React Native – Runtime PermissionsAndroid

Android application has its own secure infrastructure to make application user feel that he is completely secure from any threat and also he can manage to give some of his own data as his own permissions. Here comes the new android’s Dangerous runtime permissions request group in which the application developer directly ask the application user for his permission before accessing his personal data like Device Location, Access Camera, Access device storage, Access device Contacts etc.

Note: These permissions would only work in device which has android operating system grater than Marshmallow or has Marshmallow 6.0 API Level 23. Below API Level 23 it will automatically grant all the permissions.

How to Ask for Permission in Android?

Now you have an idea about the Android permission, let’s see how to ask for the permission in Android.

To ask for permission in Android you have to follow two steps:

1. You have to add those permissions requests in project -> app -> src -> AndroidManifest.xml file.

For Example, if we want to ask for the Camera Permission we have to add the following permission request in AndroidManifest.xml.

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

After adding the permission in AndroidManifest file, this permission will be automatically asked by the play store when they install the app and this permission will be granted to the applications.

2. After Google’s new permission modal they have introduced the run time permission mechanism in Android version 23. According to that, you have to include all the permissions in AndroidManifest.xml and also have to ask for some of the dangerous permissions in run time (You don’t have to ask for all the permission just some permission which are called dangerous permissions, you can see the list below).

According to the official docs, dangerous permissions require a dialog prompt.

So whenever you are working with this dangerous permissions you need to check whether the permission is granted by the user or not and that can be done with the help of PermissionsAndroid in React Native.

For example, If we need INTERNET permission and CAMERA permission then we have to add both the permission in AndroidManifest.xml file but have to ask only for the CAMERA permission in run time because CAMERA permission comes under the dangerous permission not INTERNET permission.

Here is the list of dangerous permissions.

Permissions that require prompting the user

Available as constants under PermissionsAndroid.PERMISSIONS:

• READ_CALENDAR: ‘android.permission.READ_CALENDAR’
• WRITE_CALENDAR: ‘android.permission.WRITE_CALENDAR’
• CAMERA: ‘android.permission.CAMERA’
• READ_CONTACTS: ‘android.permission.READ_CONTACTS’
• WRITE_CONTACTS: ‘android.permission.WRITE_CONTACTS’
• GET_ACCOUNTS: ‘android.permission.GET_ACCOUNTS’
• ACCESS_FINE_LOCATION: ‘android.permission.ACCESS_FINE_LOCATION’
• ACCESS_COARSE_LOCATION: ‘android.permission.ACCESS_COARSE_LOCATION’
• RECORD_AUDIO: ‘android.permission.RECORD_AUDIO’
• READ_PHONE_STATE: ‘android.permission.READ_PHONE_STATE’
• CALL_PHONE: ‘android.permission.CALL_PHONE’
• READ_CALL_LOG: ‘android.permission.READ_CALL_LOG’
• WRITE_CALL_LOG: ‘android.permission.WRITE_CALL_LOG’
• ADD_VOICEMAIL: ‘com.android.voicemail.permission.ADD_VOICEMAIL’
• USE_SIP: ‘android.permission.USE_SIP’
• PROCESS_OUTGOING_CALLS: ‘android.permission.PROCESS_OUTGOING_CALLS’
• BODY_SENSORS: ‘android.permission.BODY_SENSORS’
• SEND_SMS: ‘android.permission.SEND_SMS’
• RECEIVE_SMS: ‘android.permission.RECEIVE_SMS’
• READ_SMS: ‘android.permission.READ_SMS’
• RECEIVE_WAP_PUSH: ‘android.permission.RECEIVE_WAP_PUSH’
• RECEIVE_MMS: ‘android.permission.RECEIVE_MMS’
• READ_EXTERNAL_STORAGE: ‘android.permission.READ_EXTERNAL_STORAGE’
• WRITE_EXTERNAL_STORAGE: ‘android.permission.WRITE_EXTERNAL_STORAGE’

Result strings for requesting permissions

Available as constants under PermissionsAndroid.RESULTS:

• GRANTED: ‘granted’
• DENIED: ‘denied’
• NEVER_ASK_AGAIN: ‘never_ask_again’

To ask for the permission use

PermissionsAndroid.request(permission name, {Permission dialog headng, body})

App.js

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  PermissionsAndroid,
  TouchableOpacity,
  Platform,
} from 'react-native';

export default class App extends React.Component {
  proceed() {
    alert('You can use the Camera');
  }

  onPress = () => {
    var that = this;
    //Checking for the permission just after component loaded
    async function requestCameraPermission() {
      //Calling the permission function
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'AndoridPermissionExample App Camera Permission',
          message: 'AndoridPermissionExample App needs access to your camera ',
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        that.proceed();
      } else {
        alert('CAMERA Permission Denied.');
      }
    }
    if (Platform.OS === 'android') {
      requestCameraPermission();
    } else {
      this.proceed();
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text>Ask Permission for Camera</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 50,
    padding: 16,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
});