Permissions handling in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when permission is denied in React Native?

Consider a React Native app that requests camera permission using react-native-permissions. What is the expected behavior if the user denies the permission request?

React Native

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

async function requestCameraPermission() {
  const result = await request(PERMISSIONS.IOS.CAMERA);
  return result;
}

A The permission request returns 'denied', and the app can handle this state gracefully.

B The app navigates to the home screen without any permission check.

C The permission is automatically granted after denial without user action.

D The app immediately crashes due to lack of permission.

💡 Hint

Think about how permission APIs usually respond when a user denies access.

When a user denies permission, the API returns a 'denied' status. The app should detect this and handle it, such as showing a message or disabling features that require the permission.

🧠 Conceptual

intermediate

Which permission status means the user permanently denied access?

In React Native permissions handling, which status indicates the user has permanently denied permission and the app cannot request it again without user action in settings?

A "denied"

B "granted"

C "blocked"

D "unavailable"

💡 Hint

This status means the user must manually enable permission in device settings.

The "blocked" status means the user permanently denied permission, so the app cannot prompt again and must direct the user to settings.

❓ lifecycle

advanced

When should you check permissions in a React Native app lifecycle?

You want to ensure your React Native app always has the latest permission status for location access. When is the best time to check permissions to update your UI accordingly?

A Never check; assume permissions are granted.

B Only once when the app is first installed.

C Only when the user clicks a button to request permission.

D Every time the app component mounts or gains focus.

💡 Hint

Think about when the user might change permissions outside the app.

Permissions can change anytime, including when the app is backgrounded. Checking on component mount or focus ensures the app UI reflects current permission status.

🔧 Debug

advanced

Why does this permission request code fail to update UI?

Given this React Native code snippet, why does the UI not update after requesting permission?

const [cameraStatus, setCameraStatus] = useState('unknown');

useEffect(() => {
  request(PERMISSIONS.ANDROID.CAMERA).then(status => {
    cameraStatus = status;
  });
}, []);

A The state variable is assigned directly instead of using the setter function.

B The permission constant is incorrect for Android.

C The useEffect hook is missing a dependency array.

D The permission request API is asynchronous and must use async/await.

💡 Hint

How do you update React state properly?

Directly assigning to the state variable does not update React state or trigger a re-render. The setter function must be used.

❓ navigation

expert

How to navigate user to app settings after permission is blocked?

In React Native, if a permission is 'blocked', the app should guide the user to the app settings page to enable it manually. Which code snippet correctly opens the app settings screen?

React Native

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

function openSettings() {
  if (Platform.OS === 'ios') {
    Linking.openURL('app-settings:');
  } else {
    Linking.openSettings();
  }
}

A Use Linking.openURL('app-settings:') on both iOS and Android.

B Use Linking.openSettings() on Android and Linking.openURL('app-settings:') on iOS.

C Use Linking.openSettings() on both platforms.

D Use Linking.openURL('settings:') on iOS and Linking.openSettings() on Android.

💡 Hint

Different platforms require different URL schemes or methods.

On iOS, the URL scheme 'app-settings:' opens settings. On Android, Linking.openSettings() is the correct method.

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