Permissions handling in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the PermissionsAndroid module from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

APermissionsAndroid

BPermissionsIOS

CPermissionManager

DPermissions

Attempts:

3 left

💡 Hint

Common Mistakes

Using PermissionsIOS which does not exist

Using a generic Permissions module which is not provided

Misspelling the module name

The PermissionsAndroid module is used to handle Android permissions in React Native.

2fill in blank

medium

Complete the code to request camera permission using PermissionsAndroid.

React Native

const granted = await PermissionsAndroid.[1](PermissionsAndroid.PERMISSIONS.CAMERA);

Drag options to blanks, or click blank then click option'

Aask

Bcheck

Crequest

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'check' instead of 'request' which does not prompt the user

Using non-existent methods like 'ask' or 'get'

The request method asks the user to grant the specified permission.

3fill in blank

hard

Fix the error in the code to check if camera permission is granted.

React Native

const hasPermission = await PermissionsAndroid.[1](PermissionsAndroid.PERMISSIONS.CAMERA);
if (hasPermission === PermissionsAndroid.RESULTS.GRANTED) {
  console.log('Camera permission granted');
}

Drag options to blanks, or click blank then click option'

Acheck

Brequest

Cverify

Dask

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'request' which prompts the user unnecessarily

Using non-existent methods like 'verify' or 'ask'

The check method returns the current permission status without prompting the user.

4fill in blank

hard

Fill both blanks to handle permission request result correctly.

React Native

if (granted === PermissionsAndroid.RESULTS.[1]) {
  console.log('Permission [2]');
} else {
  console.log('Permission denied');
}

Drag options to blanks, or click blank then click option'

AGRANTED

BDENIED

Callowed

Ddenied

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'DENIED' constant for granted check

Logging 'denied' message when permission is granted

When permission is granted, the result is GRANTED and we log 'Permission allowed'.

5fill in blank

hard

Fill all three blanks to request multiple permissions and check results.

React Native

const permissions = [PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.[1]];
const results = await PermissionsAndroid.[2](permissions);
if (results[PermissionsAndroid.PERMISSIONS.CAMERA] === PermissionsAndroid.RESULTS.[3]) {
  console.log('Camera permission granted');
}

Drag options to blanks, or click blank then click option'

AACCESS_FINE_LOCATION

BrequestMultiple

CGRANTED

DREAD_CONTACTS

Attempts:

3 left

💡 Hint

Common Mistakes

Using single permission request method for multiple permissions

Checking wrong permission result key

Using wrong constants for permissions or results

We request multiple permissions including CAMERA and ACCESS_FINE_LOCATION using requestMultiple. Then we check if CAMERA permission is GRANTED.