Error: Permissions not granted... react-native-image-picker

Question

I am trying to upload an image from internal memory in our client app, using

react-native-image-picker@^0.26.4

And after executing the following sample snippet i got the response in an unexpected way.

ImagePicker.showImagePicker(options, response => {
  console.log("Response = ", response)

  if (response.didCancel) {
    console.log("User cancelled image picker")
  } else if (response.error) {
    console.log("ImagePicker Error: ", response.error)
  } else if (response.customButton) {
    console.log("User tapped custom button: ", response.customButton)
  } else {
    const source = { uri: response.uri }
    // RNGRP.getRealPathFromURI(response.uri).then(filePath => {
    //   uploadImageToS3(filePath, "dinesh")
    //   console.log(filePath)
    // })

    // You can also display  the image using data:
    // let source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source
    })
  }

RESPONSE

• Response = {error: "Permissions weren't granted"} error: "Permissions weren't granted"proto: Object D:\my_app\index.js:124 ImagePicker Error: Permissions weren't granted

• Sometimes On Allow button press app unexpectedly crashes.

Additional Information

• React Native version: ~0.46.1
• React: 16.0.0-alpha.12
• Platform: [Android 5.1 and above]
• Development Operating System: [Windows 7 Professional]
• Dev tools: [ Android Studio version 2.3.2, Android SDK 23]

Inner

I think you should add some permissions in your manifest file(android permission). – Dardani

Answer 1

Add this code in your AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Edited this after suggestions by Jaffar Raza and szskdgi

Albertype

FALSE AND MISLEADING - there is no such permission as "android.permission.WRITE_INTERNAL_STORAGE" – Achromic

<uses-permission android:name="android.permission.WRITE_INTERNAL_STORAGE"/> should be replaced with <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> – Joline

Please edit the answer with WRITE_EXTERNAL_STORAGE. I tried internal and got stuck for a while there. – Damn

Answer 2

The accepted answer won't work if you are using Android M or API level 23+, You need to prompt the user for permission.

Add this code in the android/app/src/main/AndroidManifiest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

App.js

const App=()=>{
   useEffect(() => {
    requestPermission()
  }, [])

  const requestPermission = async () => {
    try {
      console.log('asking for permission')
      const granted = await PermissionsAndroid.requestMultiple(
        [PermissionsAndroid.PERMISSIONS.CAMERA,
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE]
      )
      if (granted['android.permission.CAMERA'] && granted['android.permission.WRITE_EXTERNAL_STORAGE']) {
        console.log("You can use the camera");
      } else {
        console.log("Camera permission denied");
      }
    } catch (error) {
      console.log('permission error', error)
    }
  }
  ....

}

For detailed implementation and a list of permission that require prompting the user

https://reactnative.dev/docs/permissionsandroid

Dashboard

Answer 3

Add this code in the android/app/src/main/AndroidManifiest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Polysynthetic

Answer 4

after adding the following permission to AndroidManifiest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

we should have checked the permission before processing the functionality.

ex :- step 1(check permission whether it's GRANTED or not)

const isCameraAuthorized = await permissions.checkPermission(
          PermissionType.CAMERA
        );
enter code here

step 2(request permission)

 cameraPermissionStatus = await permissions.requestPermission(
            PermissionType.CAMERA
          );

then we have do the same for WRITE_EXTERNAL_STORAGE as

cameraPermissionStatus = await permissions.requestPermission(
                PermissionType.WRITE_EXTERNAL_STORAGE 
              );
 const isCameraAuthorized = await permissions.checkPermission(
              PermissionType.WRITE_EXTERNAL_STORAGE 
            );

Tankersley

Answer 5

I took "user didnt grant library permisson" message in some devices while I had added this permisson

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

so I changed to

 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
  package="com.app.name">
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29" tools:replace="android:maxSdkVersion" /> 

and worked after change

Tribadism

Answer 6

in my case,

My React native,targetSdkVersion and compileSdkVersion version is

"react-native": "0.62.2"
.....
 compileSdkVersion = 33
 targetSdkVersion = 33

and the latest react-native-image-picker=5.4.0 is not compatible with this version

so that I'm using

  "react-native-image-picker": "^3.0.0",

and this version work perfectly

Glamorize

Answer 7

Step 1: Install package react native permissions

Step 2: Add the below code in the AndroidManifest.xml file:

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>

Step 3: Add the line inside AndroidManifest.xml and add in the application section:

android:requestLegacyExternalStorage="true"

Step 4: Add inside index.js file:

PERMISSIONS.ANDROID.CAMERA;

Jacquerie