Feat/confirm passport belongs to me screen (#55)

app/src/Navigation.tsx

@@ -23,6 +23,7 @@ import HomeScreen from './screens/HomeScreen';
 import LaunchScreen from './screens/LaunchScreen';
 import MockDataScreen from './screens/MockDataScreen';
 import NextScreen from './screens/NextScreen';
+import ConfirmBelongingScreen from './screens/Onboarding/ConfirmBelongingScreen';
 import PassportCameraScreen from './screens/Onboarding/PassportCameraScreen';
 import PassportNFCScanScreen from './screens/Onboarding/PassportNFCScanScreen';
 import PassportOnboardingScreen from './screens/Onboarding/PassportOnboardingScreen';
@@ -157,6 +158,12 @@ const AppNavigation = createNativeStackNavigator({
         dateOfExpiry: '',
       },
     },
+    ConfirmBelongingScreen: {
+      screen: ConfirmBelongingScreen,
+      options: {
+        headerShown: false,
+      },
+    },
     CreateMock: {
       screen: MockDataScreen,
       options: {

app/src/layouts/ExpandableBottomLayout.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { View, ViewProps } from 'tamagui';
+
 import { black, white } from '../utils/colors';
 
 interface ExpandableBottomLayoutProps {
   children: React.ReactNode;
 }
 
-interface TopSectionProps {
+interface TopSectionProps extends ViewProps {
   children: React.ReactNode;
 }
 
-interface BottomSectionProps {
+interface BottomSectionProps extends ViewProps {
   children: React.ReactNode;
 }
 
@@ -20,12 +22,23 @@ const Layout: React.FC<ExpandableBottomLayoutProps> = ({ children }) => {
   return <SafeAreaView style={styles.layout}>{children}</SafeAreaView>;
 };
 
-const TopSection: React.FC<TopSectionProps> = ({ children }) => {
-  return <View style={styles.topSection}>{children}</View>;
+const TopSection: React.FC<TopSectionProps> = ({ children, ...props }) => {
+  return (
+    <View {...props} style={styles.topSection}>
+      {children}
+    </View>
+  );
 };
 
-const BottomSection: React.FC<BottomSectionProps> = ({ children }) => {
-  return <View style={styles.bottomSection}>{children}</View>;
+const BottomSection: React.FC<BottomSectionProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <View {...props} style={styles.bottomSection}>
+      {children}
+    </View>
+  );
 };
 
 /**

app/src/screens/HomeScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { usePreventRemove } from '@react-navigation/native';
 import { Button, YStack, styled } from 'tamagui';
 
 import { BodyText } from '../components/typography/BodyText';
@@ -25,7 +26,8 @@ const ScanButton = styled(Button, {
 const HomeScreen: React.FC = () => {
   const onCaptionPress = useHapticNavigation('Launch');
   const onScanButtonPress = useHapticNavigation('QRCodeViewFinder');
-
+  // Prevents back navigation
+  usePreventRemove(true, () => {});
   return (
     <YStack bg={black} gap={20} jc="space-between" height={'100%'} padding={20}>
       <YStack ai="center" gap={20} justifyContent="flex-start">

app/src/screens/NextScreen.tsx

@@ -19,7 +19,7 @@ const NextScreen: React.FC = () => {
   const navigation = useNavigation();
   const handleNext = () => {
     setRegistered(true);
-    navigation.navigate('Home');
+    navigation.navigate('ConfirmBelongingScreen');
   };
   const dataHidden = false;
   const disclosureOptions: any = {

app/src/screens/Onboarding/ConfirmBelongingScreen.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+
+import { usePreventRemove } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
+
+import { PrimaryButton } from '../../components/buttons/PrimaryButton';
+import Description from '../../components/typography/Description';
+import { Title } from '../../components/typography/Title';
+import useHapticNavigation from '../../hooks/useHapticNavigation';
+import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
+import { notificationSuccess } from '../../utils/haptic';
+import { styles } from '../ProveFlow/ValidProofScreen';
+
+const ConfirmBelongingScreen: React.FC = () => {
+  const onOkPress = useHapticNavigation('Home');
+
+  useEffect(() => {
+    notificationSuccess();
+  }, []);
+
+  // Prevents back navigation
+  usePreventRemove(true, () => {});
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" backgroundColor="black" />
+      <ExpandableBottomLayout.Layout>
+        <ExpandableBottomLayout.TopSection>
+          <LottieView
+            autoPlay
+            loop={false}
+            source={require('../../assets/animations/loading/success.json')}
+            style={styles.animation}
+            cacheComposition={true}
+            renderMode="HARDWARE"
+          />
+        </ExpandableBottomLayout.TopSection>
+        <ExpandableBottomLayout.BottomSection gap={20}>
+          <Title textAlign="center">Confirm your identity</Title>
+          <Description textAlign="center" paddingBottom={20}>
+            By continuing, you certify that this passport belongs to you and is
+            not stolen or forged.
+          </Description>
+          <PrimaryButton onPress={onOkPress}>Confirm</PrimaryButton>
+        </ExpandableBottomLayout.BottomSection>
+      </ExpandableBottomLayout.Layout>
+    </>
+  );
+};
+
+export default ConfirmBelongingScreen;

app/src/screens/Onboarding/PassportNFCScanScreen.tsx

@@ -5,11 +5,14 @@ import {
   NativeModules,
   Platform,
   StyleSheet,
-  Text,
 } from 'react-native';
 import NfcManager from 'react-native-nfc-manager';
 
-import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import {
+  useFocusEffect,
+  useNavigation,
+  usePreventRemove,
+} from '@react-navigation/native';
 import LottieView from 'lottie-react-native';
 import { Image } from 'tamagui';
 
@@ -17,6 +20,7 @@ import ButtonsContainer from '../../components/ButtonsContainer';
 import TextsContainer from '../../components/TextsContainer';
 import { PrimaryButton } from '../../components/buttons/PrimaryButton';
 import { SecondaryButton } from '../../components/buttons/SecondaryButton';
+import { BodyText } from '../../components/typography/BodyText';
 import Description from '../../components/typography/Description';
 import { Title } from '../../components/typography/Title';
 import useHapticNavigation from '../../hooks/useHapticNavigation';
@@ -41,7 +45,8 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
   const [isNfcSupported, setIsNfcSupported] = useState(true);
   const [isNfcEnabled, setIsNfcEnabled] = useState(true);
   const [isNfcSheetOpen, setIsNfcSheetOpen] = useState(false);
-  const [scanningMessage, setScanningMessage] = useState('');
+
+  usePreventRemove(true, () => {});
 
   const checkNfcSupport = useCallback(async () => {
     const isSupported = await NfcManager.isSupported();
@@ -70,7 +75,7 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
         await scan({ passportNumber, dateOfBirth, dateOfExpiry });
         // Feels better somehow
         await new Promise(resolve => setTimeout(resolve, 1000));
-        navigation.navigate('NextScreen');
+        navigation.navigate('ConfirmBelongingScreen');
       } catch (e) {
         console.log(e);
       } finally {
@@ -99,7 +104,7 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
       if (Platform.OS === 'android' && emitter) {
         const subscription = emitter.addListener(
           'NativeEvent',
-          (event: string) => setScanningMessage(event),
+          (event: string) => console.info(event),
         );
 
         return () => {
@@ -126,9 +131,11 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
           <>
             <TextsContainer>
               <Title children="Ready to scan" />
-              <Description children={scanningMessage} />
+              <BodyText textAlign="center">
+                Hold your device near the NFC tag and stop moving when it
+                vibrates.
+              </BodyText>
             </TextsContainer>
-
             <Image
               h="$8"
               w="$8"
@@ -137,11 +144,8 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
               source={{
                 uri: NFC_IMAGE,
               }}
+              margin={20}
             />
-            <Text>
-              Hold your device near the NFC tag and stop moving when it
-              vibrates.
-            </Text>
           </>
         ) : (
           <>

app/src/screens/ProveFlow/ValidProofScreen.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import LottieView from 'lottie-react-native';
 
 import { PrimaryButton } from '../../components/buttons/PrimaryButton';
+import { BodyText } from '../../components/typography/BodyText';
 import Description from '../../components/typography/Description';
 import { Title } from '../../components/typography/Title';
 import { typography } from '../../components/typography/styles';
@@ -38,7 +39,7 @@ const SuccessScreen: React.FC = () => {
           <Title size="large">Identity Verified</Title>
           <Description>
             You've successfully proved your identity to{' '}
-            <Text style={typography.strong}>{appName}</Text>
+            <BodyText style={typography.strong}>{appName}</BodyText>
           </Description>
         </View>
         <PrimaryButton onPress={onOkPress}>OK</PrimaryButton>