How to Use Permissions in React Native: Simple Guide

In React Native, you use the PermissionsAndroid API on Android to request and check permissions, and the react-native-permissions library for a cross-platform approach. You request permissions before accessing features like camera or location to ensure your app works properly and respects user privacy.

Syntax

React Native provides the PermissionsAndroid module to handle Android permissions. You use PermissionsAndroid.request(permission) to ask the user for permission and PermissionsAndroid.check(permission) to check if permission is already granted.

For iOS or cross-platform support, use the react-native-permissions library which offers a unified API.

javascript

import { PermissionsAndroid } from 'react-native';

async function requestCameraPermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Camera Permission',
        message: 'This app needs access to your camera',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Camera permission granted');
    } else {
      console.log('Camera permission denied');
    }
  } catch (err) {
    console.warn(err);
  }
}

Example

This example shows how to request camera permission on Android using PermissionsAndroid. It logs whether the permission was granted or denied.

javascript

import React, { useEffect } from 'react';
import { View, Text, Button, PermissionsAndroid, Alert } from 'react-native';

export default function App() {
  const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message: 'App needs access to your camera',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission granted', 'You can use the camera');
      } else {
        Alert.alert('Permission denied', 'Camera access denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Request Camera Permission</Text>
      <Button title="Request Permission" onPress={requestCameraPermission} />
    </View>
  );
}

Output

UI with a button labeled 'Request Permission'. When pressed, it shows an alert: either 'Permission granted' or 'Permission denied' depending on user choice.

Common Pitfalls

• Forgetting to add permissions in AndroidManifest.xml or Info.plist causes requests to fail silently.
• Not handling the case when the user denies permission or selects "Ask Me Later".
• Requesting permissions on iOS using PermissionsAndroid won't work; use react-native-permissions instead.
• Not checking if permission is already granted before requesting can annoy users.

javascript

/* Wrong: Requesting permission without checking */
async function wrongRequest() {
  await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
  // No check for granted or denied
}

/* Right: Check before requesting */
async function rightRequest() {
  const hasPermission = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA);
  if (!hasPermission) {
    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Permission granted');
    } else {
      console.log('Permission denied');
    }
  } else {
    console.log('Permission already granted');
  }
}

Quick Reference

Remember these key points when working with permissions in React Native:

• Always declare permissions in platform config files (AndroidManifest.xml, Info.plist).
• Use PermissionsAndroid for Android native permissions.
• Use react-native-permissions for cross-platform support.
• Check permission status before requesting.
• Handle user denial gracefully.

Key Takeaways

Use PermissionsAndroid API to request and check permissions on Android.

Always declare required permissions in platform-specific config files.

Check if permission is already granted before requesting to improve user experience.

Use react-native-permissions library for cross-platform permission handling.

Handle user denial and provide clear messages or fallback behavior.