Camera access (expo-camera) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the CameraView component from expo-camera.

React Native

import { [1] } from 'expo-camera';

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

ACamera

BCameraAccess

CCameraModule

DCameraView

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect component names like CameraView or CameraModule.

Forgetting to import from 'expo-camera'.

The correct import is Camera from expo-camera. This component allows you to access the device camera.

2fill in blank

medium

Complete the code to request camera permissions using the hook.

React Native

const [permission, requestPermission] = [1]();

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

AuseCamera

BuseCameraPermissions

CuseCameraAccess

DuseCameraRequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks that do not exist like useCamera or useCameraRequest.

Confusing permission request with camera usage.

The hook useCameraPermissions is used to get and request camera permissions in expo-camera.

3fill in blank

hard

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

React Native

if (!permission?.[1]) {
  return <Text>No access to camera</Text>;
}

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

Aaccepted

Ballowed

Cgranted

Denabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using properties like allowed or enabled which do not exist.

Checking permission without optional chaining causing errors.

The permission object has a granted property that is true when the user has allowed camera access.

4fill in blank

hard

Fill both blanks to render the CameraView component with the back camera facing and a style.

React Native

<CameraView facing=[1] style=[2] />

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

A"back"

B"front"

C{ flex: 1 }

D{ width: 100 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using front camera instead of back.

Using incorrect style objects that do not fill space.

The back camera is selected with "back". The style { flex: 1 } makes the camera fill the available space.

5fill in blank

hard

Fill all three blanks to request permission on button press and handle the response.

React Native

async function askPermission() {
  const { status } = await [1]();
  if (status === [2]) {
    [3](true);
  } else {
    [3](false);
  }
}

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

ArequestPermission

B"granted"

CsetHasPermission

DgetCameraPermissionsAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using getCameraPermissionsAsync instead of requestPermission.

Comparing status to incorrect strings.

Not calling the correct state setter.

The function requestPermission asks the user for camera access. The status is compared to the string "granted". The state setter setHasPermission updates the permission state.