React native: why cant access camera after setting permission in app.json

Question

I'm trying to create an app where the user can take a photo when they press a button. Before setting the camera permission on the app.json, it works perfectly fine on my physical device but after setting the permission on the app.json, it doesn't work. I still got the popup where it asks for user permission but after allowing to use the camera, it doesn't activate the camera. It still doesn't work when I press the button again.

app.json

"plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "custom photos permission",
          "cameraPermission": "Allow $(PRODUCT_NAME) to open the camera",
          
          "//": "Disables the microphone permission",
          "microphonePermission": false
        }
      ]
    ],
"android": {
  "package":"mycamera.myapp",
  "versionCode": 2,
  "permissions": ["CAMERA","READ_EXTERNAL_STORAGE"],
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  }
}

HomeScreen.js

const [allImage, setAllImage] = React.useState([]);
    const useCamera = async () => {
        const hasPermissions = await cameraPermission();
        if (!hasPermissions) {
            return;
        }
        if(allImage.length < 4){
            let result = await ImagePicker.launchCameraAsync({
                allowsEditing: true,
                quality: 0.5,
            });

            if (!result.cancelled) { 
                const name = result.uri.split('/').pop();
                let match = /\.(\w+)$/.exec(name);
                let type = match ? `image/${match[1]}` : `image`;
                let newFile = {
                    uri: result.uri,
                    type: type,
                    name: name
                }
                
                setAllImage(newFile)
                setPickedImage(result.uri)
                if (!pickedImage && allImage.length === 0) {
                    setAllImage([newFile]); 
                    setFileName("Receipt 1")
                }else {
                    setAllImage([...allImage, newFile]); 
                    setFileName(fileName + ", Receipt " + (allImage.length + 1))  
                }
            }
        }
    };

Answer 1

For expo permissions of expo-image-picker as per the official documentation you need to create app.config,js / app.json file and add the permissions there.

Detailed steps are provide in main page link —> https://github.com/expo/expo/tree/sdk-46/packages/expo-image-picker

You need to add the permission as below

Example of app.config.js for the image permission taken from official website

{

 "expo": {
   "plugins": [
    [
    "expo-image-picker",
    {
      "photosPermission": "custom photos permission",
      "cameraPermission": "Allow $(PRODUCT_NAME) to open the camera",
      "//": "Disables the microphone permission",
      "microphonePermission": false
     }
    ]
  ]
 }
}