DEV Community

Deri Kurniawan
Deri Kurniawan

Posted on • Updated on

Request All Permissions Android React Native

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
Enter fullscreen mode Exit fullscreen mode

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.

  <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" />
Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

Save it and runnning the app using terminal

npm run android
Enter fullscreen mode Exit fullscreen mode

Result

The result will be look like this:
Image description

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

Image description

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

Source Reference: https://reactnative.dev/docs/permissionsandroid

Discussion (0)