Request All Permissions Android React Native
Deri Kurniawan
Posted on August 5, 2022
Hello! I will show you how to easily request all permissions on Android.
Installation
Initial our project with react-native
npx react-native init myapp
Request Permission Preparation
Before we start coding on App.js file. We need to write permission on AndroidManifest.xml first. you can find at myapp/android/app/src/main/AndroidManifest.xml
paste this code on inner manifest tag.
Also check out full code on My Gist
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.CALL_PHONE" />
<uses-permission android:name="android.permission.READ_CALL_LOG" />
<uses-permission android:name="android.permission.WRITE_CALL_LOG" />
<uses-permission android:name="com.android.voicemail.permission.ADD_VOICEMAIL" />
<uses-permission android:name="android.permission.USE_SIP" />
<uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />
<uses-permission android:name="android.permission.BODY_SENSORS" />
<uses-permission android:name="android.permission.SEND_SMS" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.READ_SMS" />
<uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />
<uses-permission android:name="android.permission.RECEIVE_MMS" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
<uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
<uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />
<uses-permission android:name="android.permission.ACCEPT_HANDOVER" />
<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
<uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />
<uses-permission android:name="android.permission.UWB_RANGING" />
Let's Coding
So, after we write permission that what we need.
now we can coding to request permission.
Delete all code on App.js and paste this code below
import React from 'react';
import {Button, Linking, PermissionsAndroid, ScrollView} from 'react-native';
const PERMISSIONS_TYPE = [
'READ_CALENDAR',
'WRITE_CALENDAR',
'CAMERA',
'READ_CONTACTS',
'WRITE_CONTACTS',
'GET_ACCOUNTS',
'ACCESS_FINE_LOCATION',
'ACCESS_COARSE_LOCATION',
'ACCESS_BACKGROUND_LOCATION',
'RECORD_AUDIO',
'READ_PHONE_STATE',
'CALL_PHONE',
'READ_CALL_LOG',
'WRITE_CALL_LOG',
'ADD_VOICEMAIL',
'USE_SIP',
'PROCESS_OUTGOING_CALLS',
'BODY_SENSORS',
'SEND_SMS',
'RECEIVE_SMS',
'READ_SMS',
'RECEIVE_WAP_PUSH',
'RECEIVE_MMS',
'READ_EXTERNAL_STORAGE',
'WRITE_EXTERNAL_STORAGE',
'BLUETOOTH_CONNECT',
'BLUETOOTH_SCAN',
'BLUETOOTH_ADVERTISE',
'ACCESS_MEDIA_LOCATION',
'ACCEPT_HANDOVER',
'ACTIVITY_RECOGNITION',
'ANSWER_PHONE_CALLS',
'READ_PHONE_NUMBERS',
'UWB_RANGING',
];
async function requestPermission(PERMISSION_TYPE) {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS[PERMISSION_TYPE],
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log(`You can use ${PERMISSION_TYPE}`);
} else {
console.log(`${PERMISSION_TYPE} permission denied`);
}
} catch (err) {
console.warn(err);
}
}
export default function App() {
return (
<ScrollView>
{PERMISSIONS_TYPE.map((TYPE, index) => (
<Button
key={index}
color={index % 2 === 0 ? 'dodgerblue' : 'blue'} // to make odd event button color
title={`Allow ${TYPE}`}
onPress={() => requestPermission(TYPE)}
/>
))}
<Button
color="black"
title="Open Settings"
onPress={() => Linking.openSettings()} // opens settings your app
/>
</ScrollView>
);
}
Save it and runnning the app using terminal
npm run android
Result
The result will be look like this:
and if we click a button and grant or denied. The information will appear on your terminal:
that's it! ask me if you have an question
Source Reference: React Native Android Permission Documentation
Source Code: Deri Kurniawan Gist Github
Posted on August 5, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.