CODEWITHSUNDEEP
androidgradlereact-nativeandroid-studio-2.3
Pavan Gangireddy
Pavan Gangireddy

Reputation: 427

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

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

Additional Information

Upvotes: 7

Views: 22101

Answers (7)

Usama Saud
Usama Saud

Reputation: 51

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;

Upvotes: 0

Deepak Singh
Deepak Singh

Reputation: 1145

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

Upvotes: 0

mirsahib
mirsahib

Reputation: 445

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

Upvotes: 2

amir behrouzi
amir behrouzi

Reputation: 155

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

Upvotes: 0

chamara bandara
chamara bandara

Reputation: 11

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 
            );

Upvotes: 1

Malsha Madushani
Malsha Madushani

Reputation: 77

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"/>

Upvotes: 1

Zafar Kurbonov
Zafar Kurbonov

Reputation: 2077

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

Upvotes: 26

Related Questions