Request All Permissions Android React Native

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

Comments

[Lyhuoy]

Thank man for sharing!!