fix: request camera permission only after screen transition is complete

src/pages/iou/request/step/IOURequestStepScan/index.native.js

@@ -1,6 +1,7 @@
+import {useFocusEffect} from '@react-navigation/core';
 import lodashGet from 'lodash/get';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {ActivityIndicator, Alert, AppState, View} from 'react-native';
+import React, {useCallback, useRef, useState} from 'react';
+import {ActivityIndicator, Alert, AppState, InteractionManager, View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import {RESULTS} from 'react-native-permissions';
 import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSequence, withSpring, withTiming} from 'react-native-reanimated';
@@ -120,37 +121,41 @@ function IOURequestStepScan({
             runOnJS(focusCamera)(point);
         });
 
-    useEffect(() => {
-        const refreshCameraPermissionStatus = (shouldAskForPermission = false) => {
-            CameraPermission.getCameraPermissionStatus()
-                .then((res) => {
-                    // In android device app data, the status is not set to blocked until denied twice,
-                    // due to that the app will ask for permission twice whenever users opens uses the scan tab
-                    setCameraPermissionStatus(res);
-                    if (shouldAskForPermission && !askedForPermission.current) {
-                        askedForPermission.current = true;
-                        askForPermissions(false);
-                    }
-                })
-                .catch(() => setCameraPermissionStatus(RESULTS.UNAVAILABLE));
-        };
-
-        // Check initial camera permission status
-        refreshCameraPermissionStatus(true);
+    useFocusEffect(
+        useCallback(() => {
+            const refreshCameraPermissionStatus = (shouldAskForPermission = false) => {
+                CameraPermission.getCameraPermissionStatus()
+                    .then((res) => {
+                        // In android device app data, the status is not set to blocked until denied twice,
+                        // due to that the app will ask for permission twice whenever users opens uses the scan tab
+                        setCameraPermissionStatus(res);
+                        if (shouldAskForPermission && !askedForPermission.current) {
+                            askedForPermission.current = true;
+                            askForPermissions(false);
+                        }
+                    })
+                    .catch(() => setCameraPermissionStatus(RESULTS.UNAVAILABLE));
+            };
+
+            InteractionManager.runAfterInteractions(() => {
+                // Check initial camera permission status
+                refreshCameraPermissionStatus(true);
+            });
 
-        // Refresh permission status when app gain focus
-        const subscription = AppState.addEventListener('change', (appState) => {
-            if (appState !== 'active') {
-                return;
-            }
+            // Refresh permission status when app gain focus
+            const subscription = AppState.addEventListener('change', (appState) => {
+                if (appState !== 'active') {
+                    return;
+                }
 
-            refreshCameraPermissionStatus();
-        });
+                refreshCameraPermissionStatus();
+            });
 
-        return () => {
-            subscription.remove();
-        };
-    }, []);
+            return () => {
+                subscription.remove();
+            };
+        }, []),
+    );
 
     const validateReceipt = (file) => {
         const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));