Asking for permissions in React Native.

In this post I will discuss how you can ask permissions from the user to use features like camera and others.

So I started working on my next app which needed permission to read users phone storage data. So I decided to learn how to ask user permissions in React Native.

So to ask permissions, React Native has a prebuilt feature in it which we can import and use it in our code.

import { PermissionsAndroid } from 'react-native';

Before asking permissions to the user we have to declare that permissions in AndroidManifest.xml file.

So in AndroidManifest.xml paste the following code.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.gauthamapp">

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

 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
.....
.....

So to integrate the permissions in our react native code, you can refer to the below code.

import { PermissionsAndroid } from 'react-native';

const permision =()=>{
    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)    
   }  

After importing the necessary package, we can ask the user permission with PermissionsAndroid.request() method.

We can either ask for the consent of the user when the user clicks some button or like most of the apps ask when the user first enters the app.

For the first one you can do like below,

import React from 'react'
import { PermissionsAndroid, View, Button } from 'react-native';

const Request = () => {

const permision =()=>{
    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)    
   }  
  return (
    <View>
      <Button onPress={permission} title="Give permission!"></Button>
    </View>
  )
}

export default Request;

For the second concept , we can use useEffect() hook with empty array dependency to ask only once when the user enters the app.

import React,{useEffect} from 'react'
import { PermissionsAndroid, View, Text } from 'react-native';
const Request = () => {

const permission =()=>{    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)    
   }  

useEffect(()=>{permission()},[])

  return (
    <div>
     Permission!
    </div>
  )
}

export default Request;

There can be many ways to ask permissions based on the developer/ company's needs but I use and know only the above two.

So to perform some actions based on the permission given by the user , we can use the PermissionsAndroid.check() method provided by React Native.

I had forgotten about this step and was stuck for 12 hours straight as my app crashed when the app started getting phone storage data before asking for permission.

Remember if you are going to use the users' mobile storage or camera or any other stuff you need to ask permissions before using them or your app will crash without any reason.

So to check whether the user has given permission or not we can use the PermissionsAndroid.check() like below,

import React,{useEffect} from 'react'
import { PermissionsAndroid, View, Text } from 'react-native';
const Request = () => {

const permission =()=>{    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)    
   }  

useEffect(()=>{permission()},[])

useEffect(()=>{
    PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE && PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE).then(response => { 
     console.log(response)
      getdata();})
   },[getdata])

  return (
    <div>
     Permission!
    </div>
  )
}

export default Request;

Code copy pasted from my mobile app repo.

So here we ask permission from the user for the first time and we check whether he gave the permission or not with a second useEffect hook and get the data we require from the users' storage(or whatever functionality you need). This useEffect hook runs every time the user enters your app after closing it.

We get the response from PermissionsAndroid.check() which will be true or false based upon the users choice.

And thats how,

• you ask permission
• Check if the user gave permission or not
• Execute the functionality we intended to do after the permission is given.

Here are all the list of permissions in an android app.

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'

Sorry I do not know about iOS because I do not own an iPhone or a mac.

Remember to include the permission in AndroidManifest.xml aswell.

So thats all for asking permissions in android app for a react native app.

Links which made this article possible:

Stack overflow question about permissions in react native.
React Native docs about Permissions.

To know more about React & React Native you can checkout my courses in Udemy.

https://www.udemy.com/course/react-native-for-absolute-beginners-with-react-hooks/