How do I request multiple permissions at once in react native

Question

I'd like to request permissions on one page instead of waiting for each particular situation. However, I do not want multiple popups. Is there a way to ask for permissions with a single popup/modal.

On the android side I found this post and this, which look promising, but I have yet to find something for iOS.

Answer 1

In Android

First add permissions in to the AndroidManifest.xml file and then

if (Platform.OS === 'android') {
    PermissionsAndroid.requestMultiple(
      [PermissionsAndroid.PERMISSIONS.CAMERA, 
      PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE]
      ).then((result) => {
        if (result['android.permission.ACCESS_COARSE_LOCATION']
        && result['android.permission.CAMERA']
        && result['android.permission.READ_CONTACTS']
        && result['android.permission.ACCESS_FINE_LOCATION']
        && result['android.permission.READ_EXTERNAL_STORAGE']
        && result['android.permission.WRITE_EXTERNAL_STORAGE'] === 'granted') {
          this.setState({
            permissionsGranted: true
          });
        } else if (result['android.permission.ACCESS_COARSE_LOCATION']
        || result['android.permission.CAMERA']
        || result['android.permission.READ_CONTACTS']
        || result['android.permission.ACCESS_FINE_LOCATION']
        || result['android.permission.READ_EXTERNAL_STORAGE']
        || result['android.permission.WRITE_EXTERNAL_STORAGE'] === 'never_ask_again') {
          this.refs.toast.show('Please Go into Settings -> Applications -> APP_NAME -> Permissions and Allow permissions to continue');
        }
      });
  }

In iOS In the info section of your project on XCode

• Add the permissions and the description say - ex: Privacy - Contacts Usage Description then,

  Permissions.request('photo').then(response => {
    if (response === 'authorized') {
      iPhotoPermission = true;
    }
   Permissions.request('contact').then(response => {
    if (response === 'authorized') {
      iPhotoPermission = true;
    }
  });
  });
  

Answer 2

Makes sure you also add respective permissions in manifest file as well.

export async function GetAllPermissions() {
  try {
    if (Platform.OS === "android") {
      const userResponse = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
        PermissionsAndroid.PERMISSIONS.CALL_PHONE
      ]);
      return userResponse;
    }
  } catch (err) {
    Warning(err);
  }
  return null;
}

Answer 3

To request multiple permissions I will suggest you to use npm module as its saves time and easy to setup and most important you don't have to worry about the platforms :)

Installation

npm install --save react-native-permissions

Usage

import Permissions from 'react-native-permissions'

// Check the status of multiple permissions
  _checkCameraAndPhotos = () => {
    Permissions.checkMultiple(['camera', 'photo']).then(response => {
      //response is an object mapping type to permission
      this.setState({
        cameraPermission: response.camera,
        photoPermission: response.photo,
      })
    })
  }

Don't forget to add permissions to AndroidManifest.xml for android and Info.plist for iOS (Xcode >= 8).

Answer 4

First add your permissions to "android/app/src/main/AndroidManifest.xml" file. You can use npm module in order to achieve your goal.

npm install --save react-native-permissions

After installation, you can use checkMultiple function to ask multiple permissions. Following code illustrates how to ask permission for ANDROID.CAMERA and ANDROID.READ_EXTERNAL_STORAGE :

 checkMultiple([
  PERMISSIONS.ANDROID.CAMERA,
  PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
]).then(result => {
  
  console.log(result);
  
});

The result will be an object like this

{"android.permission.CAMERA": "denied", "android.permission.READ_EXTERNAL_STORAGE": "denied"}

To handle this result, you can use this basic code example

checkPermissions = () => {
if (Platform.OS !== 'android') {
  return;
}

checkMultiple([
  PERMISSIONS.ANDROID.CAMERA,
  PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
]).then(result => {
  if (
    !result ||
    !result[PERMISSIONS.ANDROID.CAMERA] ||
    !result[PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE]
  ) {
    console.log('could not get any result. Please try later.');
  }

  if (
    result[PERMISSIONS.ANDROID.CAMERA] === RESULTS.GRANTED &&
    result[PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE] === RESULTS.GRANTED
  ) {
    console.log('granted for both permissions');
    // do smthing here
  }
});

};

Answer 5

There is also a way to request multiple permissions at once using react-native-permissions package.

you can also implement your own conditions according to need, i am just writing a simple solution

requestMultiple will not ask again if permissions are already granted.

import { checkMultiple, requestMultiple, PERMISSIONS } from 'react-native-permissions';

const verifyPermissions = async () => {
        let perm = [ PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.PHOTO_LIBRARY ];
        if (Platform.OS == 'android') {
            perm = [ PERMISSIONS.ANDROID.CAMERA, PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE ];
        }
        let permissionStatuses = await requestMultiple(perm);
        console.log('obj', permissionStatuses);
        console.log('Camera', permissionStatuses[perm[0]]);
        console.log('photo', permissionStatuses[[ perm[1] ]]);
        const result = permissionStatuses[perm[0]];
        if (result !== 'granted') {
            Alert.alert('Insufficient permissions!', 'You need to grant camera and library access permissions to use this app.', [
                { text: 'Okay' }
            ]);
            return false;
        }
        return true;
    };