Expo modules in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Camera module from Expo.

React Native

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

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

ACameraView

BCameraModule

CCamera

DExpoCamera

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect module names like CameraModule or ExpoCamera.

Trying to import default instead of named export.

The correct import is Camera from expo-camera. This is the official module name.

2fill in blank

medium

Complete the code to request camera permissions using Expo Camera module.

React Native

const { status } = await Camera.[1]PermissionsAsync();

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

Arequest

Bget

Cask

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using getPermissionsAsync instead of requestPermissionsAsync when asking permission.

Using non-existent methods like askPermissionsAsync.

The method to request permissions is requestPermissionsAsync(). It asks the user for permission.

3fill in blank

hard

Fix the error in the code to correctly use the Expo Location module to get current position.

React Native

import * as Location from 'expo-location';

const location = await Location.[1]();

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

AgetCurrentPosition

BfetchCurrentPosition

CgetPositionAsync

DgetCurrentPositionAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using getCurrentPosition which does not exist in Expo Location.

Using synchronous method names that don't return Promises.

The correct method is getCurrentPositionAsync() which returns a Promise with location data.

4fill in blank

hard

Fill both blanks to create a button that opens the image picker from Expo.

React Native

import * as ImagePicker from 'expo-image-picker';

async function pickImage() {
  let result = await ImagePicker.[1]();
  if (!result.[2]) {
    console.log('User cancelled image picker');
  }
}

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

AlaunchImageLibraryAsync

Bcancelled

ClaunchCameraAsync

Dcanceled

Attempts:

3 left

💡 Hint

Common Mistakes

Using launchCameraAsync instead of launchImageLibraryAsync to open gallery.

Checking 'canceled' instead of 'cancelled' property.

The method to open the image library is launchImageLibraryAsync(). The result has a cancelled property to check if user cancelled.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that filters permissions with granted status in Expo Permissions module.

React Native

import * as Permissions from 'expo-permissions';

const statuses = await Permissions.getAsync(Permissions.CAMERA, Permissions.LOCATION);

const grantedPermissions = { [1]: [2] for ([3], [2]) of Object.entries(statuses) if [2].status === 'granted' };

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

Aperm

Bstatus

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up keys and values in the comprehension.

Using wrong variable names that don't match the for-of destructuring.

We iterate over Object.entries(statuses) with (perm, status). The dictionary comprehension uses perm as key and status as value, filtering where status.status === 'granted'.