SELF-1553: Add back navigation to QR scanner view (#1508)

* Add back navigation to QR scanner view

* linting

* remove custom hook. use default package

app/src/hooks/useSafeAreaInsets.ts

@@ -1,16 +0,0 @@
-// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
-// SPDX-License-Identifier: BUSL-1.1
-// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
-
-import { Platform } from 'react-native';
-import { useSafeAreaInsets as useSafeAreaInsetsOriginal } from 'react-native-safe-area-context';
-
-// gives bare minimums in case safe area doesnt provide for example space for status bar icons.
-export function useSafeAreaInsets() {
-  const insets = useSafeAreaInsetsOriginal();
-  const minimum = Platform.select({ ios: 54, android: 26, web: 48 });
-  return {
-    ...insets,
-    top: Math.max(insets.top, minimum || 0),
-  };
-}

app/src/navigation/verification.ts

@@ -44,6 +44,7 @@ const verificationScreens = {
     options: {
       headerShown: false,
       animation: 'slide_from_bottom',
+      gestureEnabled: false,
     } as NativeStackNavigationOptions,
   },
 };

app/src/screens/account/settings/ShowRecoveryPhraseScreen.tsx

@@ -3,6 +3,7 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import React, { useCallback, useEffect, useRef } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 import type { RecoveryPhraseVariant } from '@selfxyz/euclid';
@@ -12,7 +13,6 @@ import { Description } from '@selfxyz/mobile-sdk-alpha/components';
 
 import Mnemonic from '@/components/Mnemonic';
 import useMnemonic from '@/hooks/useMnemonic';
-import { useSafeAreaInsets } from '@/hooks/useSafeAreaInsets';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
 import { useSettingStore } from '@/stores/settingStore';
 import { IS_EUCLID_ENABLED } from '@/utils/devUtils';

app/src/screens/documents/aadhaar/AadhaarUploadErrorScreen.tsx

@@ -8,11 +8,7 @@ import type { RouteProp } from '@react-navigation/native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 
 import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
-import {
-  BodyText,
-  PrimaryButton,
-  SecondaryButton,
-} from '@selfxyz/mobile-sdk-alpha/components';
+import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
 import { AadhaarEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
 import {
   black,

app/src/screens/documents/selection/CountryPickerScreen.tsx

@@ -3,11 +3,10 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import type React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import SDKCountryPickerScreen from '@selfxyz/mobile-sdk-alpha/onboarding/country-picker-screen';
 
-import { useSafeAreaInsets } from '@/hooks/useSafeAreaInsets';
-
 type CountryPickerScreenComponent = React.FC & {
   statusBar: typeof SDKCountryPickerScreen.statusBar;
 };

app/src/screens/verification/QRCodeViewFinderScreen.tsx

@@ -5,6 +5,7 @@
 import LottieView from 'lottie-react-native';
 import React, { useCallback, useState } from 'react';
 import { StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { View, XStack, YStack } from 'tamagui';
 import {
   useFocusEffect,
@@ -30,8 +31,10 @@ import qrScanAnimation from '@/assets/animations/qr_scan.json';
 import QRScan from '@/assets/icons/qr_code.svg';
 import type { QRCodeScannerViewProps } from '@/components/native/QRCodeScanner';
 import { QRCodeScannerView } from '@/components/native/QRCodeScanner';
+import { NavBar } from '@/components/navbar/BaseNavBar';
 import useConnectionModal from '@/hooks/useConnectionModal';
 import useHapticNavigation from '@/hooks/useHapticNavigation';
+import { buttonTap } from '@/integrations/haptics';
 import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
 import type { RootStackParamList } from '@/navigation';
 import { parseAndValidateUrlParams } from '@/navigation/deeplinks';
@@ -44,6 +47,7 @@ const QRCodeViewFinderScreen: React.FC = () => {
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const isFocused = useIsFocused();
   const [doneScanningQR, setDoneScanningQR] = useState(false);
+  const { top: safeAreaTop } = useSafeAreaInsets();
   const navigateToProve = useHapticNavigation('Prove');
 
   // This resets to the default state when we navigate back to this screen
@@ -53,6 +57,11 @@ const QRCodeViewFinderScreen: React.FC = () => {
     }, []),
   );
 
+  const handleGoBack = useCallback(() => {
+    buttonTap();
+    navigation.goBack();
+  }, [navigation]);
+
   const onQRData = useCallback<QRCodeScannerViewProps['onQRData']>(
     async (error, uri) => {
       if (doneScanningQR) {
@@ -129,6 +138,23 @@ const QRCodeViewFinderScreen: React.FC = () => {
     <>
       <ExpandableBottomLayout.Layout backgroundColor={white}>
         <ExpandableBottomLayout.TopSection roundTop backgroundColor={black}>
+          <NavBar.Container
+            paddingTop={safeAreaTop}
+            paddingHorizontal="$4"
+            paddingBottom="$2"
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            backgroundColor="transparent"
+            zIndex={1}
+          >
+            <NavBar.LeftAction
+              component="back"
+              color={white}
+              onPress={handleGoBack}
+            />
+          </NavBar.Container>
           {shouldRenderCamera && (
             <>
               <QRCodeScannerView onQRData={onQRData} isMounted={isFocused} />