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:
- PermissionsAndroid.PERMISSIONS.CAMERA to generate a dialog to ask for CAMERA Permission.
- 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. 🙂
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.