Fix: Fail to request camera permission in Scan receipt screen

src/CONST.ts

@@ -454,7 +454,7 @@ const CONST = {
     },
     RECEIPT: {
         ICON_SIZE: 164,
-        PERMISSION_AUTHORIZED: 'authorized',
+        PERMISSION_GRANTED: 'granted',
         HAND_ICON_HEIGHT: 152,
         HAND_ICON_WIDTH: 200,
         SHUTTER_SIZE: 90,

src/pages/iou/ReceiptSelector/CameraPermission/index.android.js

@@ -0,0 +1,12 @@
+import {check, PERMISSIONS, request} from 'react-native-permissions';
+
+function requestCameraPermission() {
+    return request(PERMISSIONS.ANDROID.CAMERA);
+}
+
+// Android will never return blocked after a check, you have to request the permission to get the info.
+function getCameraPermissionStatus() {
+    return check(PERMISSIONS.ANDROID.CAMERA);
+}
+
+export {requestCameraPermission, getCameraPermissionStatus};

src/pages/iou/ReceiptSelector/CameraPermission/index.ios.js

@@ -0,0 +1,11 @@
+import {check, PERMISSIONS, request} from 'react-native-permissions';
+
+function requestCameraPermission() {
+    return request(PERMISSIONS.IOS.CAMERA);
+}
+
+function getCameraPermissionStatus() {
+    return check(PERMISSIONS.IOS.CAMERA);
+}
+
+export {requestCameraPermission, getCameraPermissionStatus};

src/pages/iou/ReceiptSelector/CameraPermission/index.js

@@ -0,0 +1,5 @@
+function requestCameraPermission() {}
+
+function getCameraPermissionStatus() {}
+
+export {requestCameraPermission, getCameraPermissionStatus};

src/pages/iou/ReceiptSelector/index.native.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import {launchImageLibrary} from 'react-native-image-picker';
 import {withOnyx} from 'react-native-onyx';
 import {useIsFocused} from '@react-navigation/native';
+import {RESULTS} from 'react-native-permissions';
 import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
 import Icon from '../../../components/Icon';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -21,6 +22,7 @@ import useLocalize from '../../../hooks/useLocalize';
 import ONYXKEYS from '../../../ONYXKEYS';
 import Log from '../../../libs/Log';
 import participantPropTypes from '../../../components/participantPropTypes';
+import * as CameraPermission from './CameraPermission';
 
 const propTypes = {
     /** React Navigation route */
@@ -99,7 +101,8 @@ function ReceiptSelector(props) {
 
     const camera = useRef(null);
     const [flash, setFlash] = useState(false);
-    const [permissions, setPermissions] = useState('authorized');
+    const [permissions, setPermissions] = useState('granted');
+    const isAndroidBlockedPermissionRef = useRef(false);
     const appState = useRef(AppState.currentState);
 
     const iouType = lodashGet(props.route, 'params.iouType', '');
@@ -113,7 +116,7 @@ function ReceiptSelector(props) {
     useEffect(() => {
         const subscription = AppState.addEventListener('change', (nextAppState) => {
             if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-                Camera.getCameraPermissionStatus().then((permissionStatus) => {
+                CameraPermission.getCameraPermissionStatus().then((permissionStatus) => {
                     setPermissions(permissionStatus);
                 });
             }
@@ -156,12 +159,14 @@ function ReceiptSelector(props) {
     };
 
     const askForPermissions = () => {
-        if (permissions === 'not-determined') {
-            Camera.requestCameraPermission().then((permissionStatus) => {
+        // Android will never return blocked after a check, you have to request the permission to get the info.
+        if (permissions === RESULTS.BLOCKED || isAndroidBlockedPermissionRef.current) {
+            Linking.openSettings();
+        } else if (permissions === RESULTS.DENIED) {
+            CameraPermission.requestCameraPermission().then((permissionStatus) => {
                 setPermissions(permissionStatus);
+                isAndroidBlockedPermissionRef.current = permissionStatus === RESULTS.BLOCKED;
             });
-        } else {
-            Linking.openSettings();
         }
     };
 
@@ -219,13 +224,13 @@ function ReceiptSelector(props) {
             });
     }, [flash, iouType, props.iou, props.report, reportID, translate]);
 
-    Camera.getCameraPermissionStatus().then((permissionStatus) => {
+    CameraPermission.getCameraPermissionStatus().then((permissionStatus) => {
         setPermissions(permissionStatus);
     });
 
     return (
         <View style={styles.flex1}>
-            {permissions !== CONST.RECEIPT.PERMISSION_AUTHORIZED && (
+            {permissions !== RESULTS.GRANTED && (
                 <View style={[styles.cameraView, styles.permissionView]}>
                     <Hand
                         width={CONST.RECEIPT.HAND_ICON_WIDTH}
@@ -248,7 +253,7 @@ function ReceiptSelector(props) {
                     </PressableWithFeedback>
                 </View>
             )}
-            {permissions === CONST.RECEIPT.PERMISSION_AUTHORIZED && device == null && (
+            {permissions === RESULTS.GRANTED && device == null && (
                 <View style={[styles.cameraView]}>
                     <ActivityIndicator
                         size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
@@ -257,7 +262,7 @@ function ReceiptSelector(props) {
                     />
                 </View>
             )}
-            {permissions === CONST.RECEIPT.PERMISSION_AUTHORIZED && device != null && (
+            {permissions === RESULTS.GRANTED && device != null && (
                 <Camera
                     ref={camera}
                     device={device}