Request All Permissions Android React Native
Tags: javascript, reactnative, android
Published: 2022-08-05 09:11:00

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](https://gist.github.com/Deri-Kurniawan/8deeb50a125b0c938bac265b230fcd2a)

```
  <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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/waro1tlhfzy1hul21djh.jpg)

and if we click a button and grant or denied. The information will appear on your terminal:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfjx51wirt7batapwrwf.png)

that's it! ask me if you have an question

Source Reference: [React Native Android Permission Documentation](https://reactnative.dev/docs/permissionsandroid)
Source Code: [Deri Kurniawan Gist Github](https://gist.github.com/Deri-Kurniawan/8deeb50a125b0c938bac265b230fcd2a)