Untitled
unknown
plain_text
2 years ago
2.6 kB
2
Indexable
Never
import { useCallback, useRef } from 'react'; import { Box, Container, ProgressiveImage, Screen, VStack, Text, Button, BottomSheet, } from '@components-new/index'; import { s } from '@lib/react-native-size-matters'; import ReservedHandleModal from '@screens/handle-intro-screen/components/reserved-handle-modal'; import { NavigationProp } from '@react-navigation/native'; import Routes from '@navigation/routes'; type HandleIntroScreenProps = { navigation: NavigationProp<unknown>; }; const HandleIntroScreen = ({ navigation }: HandleIntroScreenProps) => { const bottomSheetRef = useRef<{ show: () => void; hide: () => void } | null>(null); const onFindHandlePress = useCallback(() => { navigation.navigate(Routes.FindHandle); }, [navigation]); const onHasReservedPress = useCallback(() => { bottomSheetRef?.current?.show?.(); }, []); const onModalClosePress = useCallback(() => { bottomSheetRef?.current?.hide?.(); }, []); return ( <> <Screen backgroundColor="white" barStyle="dark-content" header={{ leftIcon: { name: 'chevron-back-outline', type: 'ionicon', size: s(24), }, onLeftPress: () => navigation.goBack(), }} > <ProgressiveImage source={require('@assets-new/images/handle_intro.png')} height={230} /> <Container> <VStack justifyContent="space-between" flex={1} mt="vs-6" mb="vs-4"> <Box> <Text tx="your_calling_card" variant="semiBoldL" textAlign="center" /> <Text tx="intro_subtitle" variant="regularS" color="darkGrey" mt="vs-4" textAlign="center" /> </Box> <Box> <Button labelTx="create_your_handle" onPress={onFindHandlePress} bg="aubergine" /> <Button variant="clear" labelTx="already_reserved_handle" labelColor="aubergine" title="I've already reserved one" onPress={onHasReservedPress} mt="vs-3" /> </Box> </VStack> </Container> </Screen> <BottomSheet ref={bottomSheetRef} snapPoints={[0, 275]} renderContent={() => ( <ReservedHandleModal onCloseModal={onModalClosePress} onCreatePress={onFindHandlePress} /> )} /> </> ); }; export default HandleIntroScreen;