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 | 2x 2x 2x 1x 2x 2x | import { Text, TouchableOpacity, View } from 'react-native';
import { ScreenLayout } from '@repo/ui/components/ScreenLayout';
import { BrandIcon } from '@repo/ui/icons/Brand';
import { ChevronLeftIcon } from '@repo/ui/icons/ChevronLeft';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { SCREENS } from '@repo/constants/screens';
import type { AppStackScreenProps } from '@/types/navigation';
type ComingSoonScreenProps = AppStackScreenProps<typeof SCREENS.COMING_SOON>;
export const ComingSoonScreen = ({ navigation }: ComingSoonScreenProps) => {
const styles = useStyles();
const handleGoBack = () => {
navigation.goBack();
};
return (
<ScreenLayout style={styles.container}>
<View style={styles.header}>
<TouchableOpacity
onPress={handleGoBack}
accessible={true}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
>
<ChevronLeftIcon />
</TouchableOpacity>
<BrandIcon />
<View style={styles.spacer} />
</View>
<View style={styles.content}>
<Text style={styles.title}>Coming Soon</Text>
</View>
</ScreenLayout>
);
};
const useStyles = makeStyles(theme => ({
container: {
padding: theme.metrics.spacing[4],
gap: theme.metrics.spacing[17.5],
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
logo: {
width: theme.metrics.spacing[25],
height: theme.metrics.spacing[6.5],
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: theme.metrics.textSize[24],
fontWeight: theme.metrics.fontWeight.bold,
},
spacer: {
width: theme.metrics.spacing[6],
},
}));
|