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.

Practice

1. What is the main purpose of requesting permissions in a React Native app?

easy

A. To get user approval before accessing sensitive device features

B. To speed up the app loading time

C. To change the app's theme colors

D. To increase the app's storage space

Solution

1. Step 1: Understand app permissions

   Permissions are needed to access sensitive features like camera or location.

2. Step 2: Recognize user control

   Requesting permissions asks users for approval to protect their privacy.

3. Final Answer:

   To get user approval before accessing sensitive device features -> Option A

4. Quick Check:

   Permissions = user approval [OK]

Hint: Permissions protect user privacy by asking approval [OK]

Common Mistakes:

• Thinking permissions speed up app loading
• Confusing permissions with UI settings
• Assuming permissions increase storage

2. Which of the following is the correct way to import the PermissionsAndroid module in React Native?

easy

A. import PermissionsAndroid from 'react-native-permissions';

B. import Permissions from 'PermissionsAndroid';

C. import { PermissionsAndroid } from 'react-native';

D. import { Permissions } from 'react-native';

Solution

1. Step 1: Identify correct import source

   PermissionsAndroid is part of the core 'react-native' package.

2. Step 2: Check import syntax

   Correct syntax uses curly braces for named imports: import { PermissionsAndroid } from 'react-native';

3. Final Answer:

   import { PermissionsAndroid } from 'react-native'; -> Option C

4. Quick Check:

   Correct import = import { PermissionsAndroid } from 'react-native'; [OK]

Hint: Use curly braces for named imports from 'react-native' [OK]

Common Mistakes:

• Importing from wrong package
• Missing curly braces for named imports
• Using incorrect module names

3. What will the following React Native code output if the user denies the camera permission?

async function requestCamera() {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.CAMERA
  );
  if (granted === PermissionsAndroid.RESULTS.GRANTED) {
    console.log('Camera permission granted');
  } else {
    console.log('Camera permission denied');
  }
}
requestCamera();

medium

A. Camera permission denied

B. Camera permission granted

C. Syntax error

D. No output

Solution

1. Step 1: Understand permission request result

   If user denies, the result is not 'GRANTED'.

2. Step 2: Check conditional output

   Code logs 'Camera permission denied' when permission is denied.

3. Final Answer:

   Camera permission denied -> Option A

4. Quick Check:

   Denied permission logs denial message [OK]

Hint: Denied permission triggers else block console log [OK]

Common Mistakes:

• Assuming permission is always granted
• Confusing async function behavior
• Ignoring else condition

4. Identify the error in this React Native permission request code:

async function requestLocation() {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.LOCATION
  );
  if (granted === PermissionsAndroid.RESULTS.GRANTED) {
    console.log('Location permission granted');
  }
}

medium

A. Async function cannot use await

B. Missing else block to handle denied permission

C. Console.log syntax is wrong

D. PermissionsAndroid.PERMISSIONS.LOCATION is incorrect permission name

Solution

1. Step 1: Check permission constant name

   There is no 'LOCATION' permission; correct names are 'ACCESS_FINE_LOCATION' or 'ACCESS_COARSE_LOCATION'.

2. Step 2: Understand impact of wrong permission name

   Using wrong permission name causes runtime error or unexpected behavior.

3. Final Answer:

   PermissionsAndroid.PERMISSIONS.LOCATION is incorrect permission name -> Option D

4. Quick Check:

   Permission name must be exact [OK]

Hint: Use exact permission constants from docs [OK]

Common Mistakes:

• Using generic or incorrect permission strings
• Forgetting to handle denied permissions
• Misusing async/await syntax

5. You want to request both camera and microphone permissions in a React Native app before starting a video call. Which approach correctly handles both permissions and proceeds only if both are granted?

hard

A. Request microphone permission twice to ensure access

B. Request camera and microphone permissions separately and check each result before proceeding

C. Request permissions without awaiting results and start video call immediately

D. Request only camera permission and assume microphone is granted

Solution

1. Step 1: Understand multiple permission requests

   Each permission must be requested and checked individually to ensure access.

2. Step 2: Combine results before proceeding

   Proceed only if both camera and microphone permissions are granted to avoid errors.

3. Final Answer:

   Request camera and microphone permissions separately and check each result before proceeding -> Option B

4. Quick Check:

   Check all permissions granted before action [OK]

Hint: Check each permission result before proceeding [OK]

Common Mistakes:

• Assuming one permission covers both features
• Not awaiting permission results
• Requesting same permission multiple times