Permissions handling in React Native

Introduction

Apps need permission to access sensitive features like camera or location. Permissions handling helps ask users for access safely and respectfully.

When your app needs to take photos or record videos using the camera.

When your app wants to get the user's current location to show nearby places.

When your app needs to read or write files on the device storage.

When your app wants to send notifications and needs permission to do so.

When your app requires access to contacts or microphone.

Syntax

React Native

import { PermissionsAndroid, Platform } from 'react-native';

async function requestCameraPermission() {
  if (Platform.OS === 'android') {
    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',
        }
      );
      return granted === PermissionsAndroid.RESULTS.GRANTED;
    } catch (err) {
      console.warn(err);
      return false;
    }
  } else {
    // iOS permissions handled differently
    return true;
  }
}

On Android, you must request permissions at runtime for sensitive features.

On iOS, permissions are usually handled by linking native modules or using libraries.

Examples

Request fine location permission on Android.

React Native

const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);

Check if camera permission was granted before using the camera.

React Native

const hasCameraPermission = await requestCameraPermission();
if (hasCameraPermission) {
  // proceed to open camera
}

Using react-native-permissions library to check iOS camera permission status.

React Native

import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions';

const status = await check(PERMISSIONS.IOS.CAMERA);

Sample App

This simple app shows a button to request camera permission on Android. It updates the text to show if permission was granted or denied.

React Native

import React, { useState } from 'react';
import { View, Text, Button, PermissionsAndroid, Platform } from 'react-native';

export default function App() {
  const [permissionStatus, setPermissionStatus] = useState('Unknown');

  async function requestCameraPermission() {
    if (Platform.OS === 'android') {
      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) {
          setPermissionStatus('Camera Permission Granted');
        } else {
          setPermissionStatus('Camera Permission Denied');
        }
      } catch (err) {
        setPermissionStatus('Permission Error');
      }
    } else {
      setPermissionStatus('iOS Permission Handling Not Shown');
    }
  }

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

Important Notes

Always explain to users why you need permissions before asking.

Test permissions on real devices because emulators may behave differently.

Remember to add permission declarations in AndroidManifest.xml or Info.plist files.

Summary

Permissions let apps access sensitive device features safely.

Android requires runtime permission requests; iOS uses different methods.

Always check and handle permission results to avoid app crashes.