Image picker in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the ImagePicker module from expo-image-picker.

React Native

import * as [1] from 'expo-image-picker';

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

AExpoImagePicker

BimagePicker

CImagePicker

DPicker

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase letters like 'imagePicker' causes import errors.

Trying to import from 'expo-picker' instead of 'expo-image-picker'.

The correct import is ImagePicker from 'expo-image-picker'. It is case sensitive.

2fill in blank

medium

Complete the code to launch the image library picker asynchronously.

React Native

const result = await ImagePicker.[1]Async();

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

AlaunchCamera

BpickImage

CopenPicker

DlaunchImageLibrary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'launchCamera' opens the camera, not the library.

Using 'pickImage' is not a valid method.

The method to open the image library is launchImageLibraryAsync().

3fill in blank

hard

Fix the error in the code to check if the user cancelled the image picking.

React Native

if (!result.[1]) {
  console.log('User cancelled image picking');
}

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

AisCancelled

Bcanceled

Ccancelled

DdidCancel

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'cancelled' with two 'l's causes the check to fail.

Using 'isCancelled' or 'didCancel' are not valid properties.

The correct property is canceled (with one 'l') to check if the user cancelled.

4fill in blank

hard

Fill both blanks to request permission and check if granted before picking an image.

React Native

const [1] = await ImagePicker.[2]Async();
if (!permission.granted) {
  alert('Permission is required!');
  return;
}

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

Apermission

Bresult

CrequestMediaLibraryPermissions

DrequestMediaLibraryPermissionsAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'requestMediaLibraryPermissions' without 'Async' causes errors.

Checking 'result.granted' instead of 'permission.granted' is confusing.

You must request media library permissions with requestMediaLibraryPermissionsAsync() and store the result in a variable like permission.

5fill in blank

hard

Fill all three blanks to create a button that opens the image picker and sets the selected image URI in state.

React Native

const [image, setImage] = React.useState(null);

async function pickImage() {
  const result = await ImagePicker.[1]Async();
  if (!result.[2]) {
    setImage(result.[3]);
  }
}

return (
  <Button title="Pick an image" onPress={pickImage} />
);

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

AlaunchImageLibrary

Bcancelled

Curi

DlaunchCamera

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'launchCameraAsync' instead of 'launchImageLibraryAsync'.

Checking 'canceled' with one 'l' causes bugs.

Trying to get 'url' instead of 'uri' property.

The function launchImageLibraryAsync() opens the image picker. The property cancelled tells if the user cancelled. The image URI is in uri.