Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 1x 5x 5x 5x 5x 5x 2x 2x 1x 1x 1x 5x 1x | import { useCallback, useContext } from 'react';
import type {
ImageSourcePropType,
ImageStyle,
StyleProp,
TextStyle,
ViewStyle,
} from 'react-native';
import { Image, Text, TouchableOpacity, View } from 'react-native';
import { NavigationContext } from '@react-navigation/native';
import { CalendarNavLeftIcon } from '@repo/ui/icons/CalendarNavLeft';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { useTheme } from '@repo/ui/themes/ThemeContext';
import { textStyles } from '@repo/ui/themes/typography';
import { SCREENS } from '@repo/constants/screens';
interface ProfileHeaderProps {
title: string;
image: ImageSourcePropType;
showBack?: boolean;
containerStyle?: StyleProp<ViewStyle>;
titleStyle?: StyleProp<TextStyle>;
imageStyle?: StyleProp<ImageStyle>;
}
export const ProfileHeader = ({
title,
image,
showBack = true,
containerStyle,
titleStyle,
imageStyle,
}: ProfileHeaderProps) => {
const { theme } = useTheme();
const navigation = useContext(NavigationContext);
const styles = useStyles();
const backButtonHitSlop = {
top: theme.metrics.spacing[2],
right: theme.metrics.spacing[2],
bottom: theme.metrics.spacing[2],
left: theme.metrics.spacing[2],
};
const handleGoBack = useCallback(() => {
Iif (!navigation) {
return;
}
if (navigation.canGoBack()) {
navigation.goBack();
return;
}
navigation.navigate(SCREENS.HOME_V2);
}, [navigation]);
return (
<View style={[styles.container, containerStyle]}>
{showBack ? (
<View style={styles.navRow}>
<TouchableOpacity
onPress={handleGoBack}
style={styles.backButton}
hitSlop={backButtonHitSlop}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
>
<CalendarNavLeftIcon width={9} height={18} color={theme.colors.text.heading} />
</TouchableOpacity>
<Text style={[styles.title, titleStyle]}>{title}</Text>
<View style={styles.backButtonSpacer} />
</View>
) : (
<Text style={[styles.title, titleStyle]}>{title}</Text>
)}
<Image source={image} style={[styles.image, imageStyle]} resizeMode="contain" />
</View>
);
};
const useStyles = makeStyles(theme => ({
container: {
alignItems: 'center',
width: theme.metrics.sizing.full,
},
navRow: {
width: theme.metrics.sizing.full,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
title: {
...textStyles.title,
color: theme.colors.text.heading,
fontSize: theme.metrics.textSize[32],
textTransform: 'uppercase',
lineHeight: theme.metrics.spacing[10],
textAlign: 'center',
},
image: {
width: theme.metrics.spacing[34],
height: theme.metrics.spacing[40],
},
backButton: {
width: theme.metrics.spacing[8],
height: theme.metrics.spacing[8],
justifyContent: 'center',
alignItems: 'flex-start',
},
backButtonSpacer: {
width: theme.metrics.spacing[8],
},
}));
|