React Native PermissionsAndroid | Ask Run Time Android Permission

The post, Ask Run Time Android Permission using React Native PermissionsAndroid includes

  • What is Android Permission?
  • Why we have to ask for permission?
  • How to ask for Permission in Android?
  • How to ask run time Permission in React Native?
  • Example to ask for the run time permission.

So Let’s get started.

What is Android Permission?

According to Google’s privacy policy, a user should know which application is trying to access sensitive data such as files, contacts and SMS, as well as certain system features such as camera and internet. So they introduced Android Permission feature.

In Android permission modal every applications which is using sensitive data or some certain system features have to ask for the permissions from user.

The purpose of permission is to protect the privacy of an Android user.

Why We have to Ask for Permission?

Android applies the permission modal because some of the applications were tracking the user’s location in the background and accessing the private data like contacts, call history and messages without informing the user which is the violation of googles privacy policy.

So to solve this sensitive issue application have to ask for permission to access those sensitive data.

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.

On devices before SDK version 23, the permissions are automatically granted if we add those permissions in our Androidmanifest.xml file but after SDK version 23 you have to ask runtime permission as well. If you are targeting the Android version < 23 then you can skip 2nd point.

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.

Run Time Permissions that Requires Confirmation from the User

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

Hope you have understood the run time permission now. Let’s have a look at how to ask for the Run Time permission in React Native.

How to Ask Run Time Android Permission using React Native PermissionsAndroid?

In React Native PermissionsAndroid component provides access to Android M’s (Over API level 23) new permissions model. You always need to check the permission before using native APIs which comes under dangerous permissions.

Above mentioned all the dangerous permissions comes under PermissionsAndroid.PERMISSIONS as constants.

You can check the permission granted or not using PermissionsAndroid.RESULTS.GRANTED

To ask for the permission use

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

Result Strings for Requesting Permissions

Available as constants under PermissionsAndroid.RESULTS:

Response Result
GRANTED Permission granted successfully by the user
DENIED Permission denied by the user
NEVER_ASK_AGAIN Permission denied by the user with never ask again.

Now we have an idea about Android permissions and components. Let’s move towards the Example which can help you to ask permission in your application.

Example to Ask for the Run Time Permission

In this example, we will ask for the camera permission which needs run time permission. We are making an button on the centre of the screen and on click of button we will ask for the run time permission for CAMERA. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react native command line interface to make our React Native App.

If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:

npm uninstall -g react-native-cli @react-native-community/cli

Run the following commands to create a new React Native project

npx react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

npx react-native init ProjectName --version X.XX.X

Note If the above command is failing, you may have old version of react-native or react-native-cli installed globally on your pc. Try uninstalling the cli and run the cli using npx.

This will make a project structure with an index file named App.js in your project directory.

If you are using anything in your app that needs permission you need to add it in AndroidManifest.xml. For this example we are adding camera permission in AndroidManifest.xml.

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


Now jump into the project using

cd ProjectName

Open App.js in any code editor and replace the code with the following code.

App.js

// React Native PermissionsAndroid | Ask Run Time Android Permission
// https://aboutreact.com/react-native-android-permission/

// import React in our code
import React from 'react';

// import all the components we are going to use
import {
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  PermissionsAndroid,
  TouchableOpacity,
  Platform,
} from 'react-native';

const App = () => {
  const proceed = () => {
    alert('You can use the Camera');
  };

  const onPress = async () => {
    // We need to ask permission for Android only
    if (Platform.OS === 'android') {
      // Calling the permission function
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Example App Camera Permission',
          message: 'Example App needs access to your camera',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        // Permission Granted
        proceed();
      } else {
        // Permission Denied
        alert('CAMERA Permission Denied');
      }
    } else {
      proceed();
    }
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <View style={styles.container}>
          <TouchableOpacity
            style={styles.buttonStyle}
            onPress={onPress}>
            <Text style={styles.textStyle}>
              Ask Permission for Camera
            </Text>
          </TouchableOpacity>
        </View>
        <Text
          style={{
            fontSize: 18,
            textAlign: 'center',
            color: 'grey'
          }}>
          Ask Run Time Android Permission
          {'\n'}
          React Navigation
        </Text>
        <Text
          style={{
            fontSize: 16,
            textAlign: 'center',
            color: 'grey'
          }}>
          www.aboutreact.com
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    padding: 20,
  },
  textStyle: {
    fontSize: 18,
    color: 'white',
  },
  buttonStyle: {
    alignItems: 'center',
    backgroundColor: '#f4511e',
    padding: 10,
  },
});

export default App;

Here PermissionsAndroid.request have two arguments:

  1. PermissionsAndroid.PERMISSIONS.CAMERA to generate a dialog to ask for CAMERA Permission.
  2. A JSON {‘title’:”,’message’:”}, which will help you to communicate or to show the dialog about the requirement of the permission if the user denied the permission. It will be generated like this.

To Run the React Native App

Open the terminal again and jump into your project using.

cd ProjectName

1. Start Metro Bundler

First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro bundler run following command:

npx react-native start

Once you start Metro Bundler it will run forever on your terminal until you close it. Let Metro Bundler run in its own terminal. Open a new terminal and run the application.

2. Start React Native Application

To run the project on an Android Virtual Device or on real debugging device:

npx react-native run-android

or on the iOS Simulator by running (macOS only)

npx react-native run-ios
       

That was the React Native Android Permission. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

1 thought on “React Native PermissionsAndroid | Ask Run Time Android Permission”

  1. Hello,
    I am working on Firebase Phone authentication in my app. The app is running perfectly on an emulator but the app got crashed on Android devices.

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.