Request All Permissions Android React Native

mobanto August 5, 2022

Hello, i’ll show you how easily to request all permission on android.

Installation

Initial our project with react-native

npx react-native init myapp

Request Permission Preparation

Before we start coding on .js file project. 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.

  <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

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