Image picker in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Image Picker in mobile apps?

An Image Picker is a tool or component that lets users select images from their device's gallery or take a new photo using the camera.

beginner

Which React Native library is commonly used for image picking?

The 'react-native-image-picker' library is commonly used to let users pick images or videos from their device or camera.

intermediate

What permission is usually required to access the camera or gallery on mobile devices?

Apps need permission to access the camera or photo gallery. On Android, this is usually CAMERA and READ_EXTERNAL_STORAGE permissions. On iOS, permissions are requested automatically when accessing these features.

intermediate

How do you handle the image data returned by an image picker in React Native?

The image picker returns an object with details like the image URI (path), file name, and type. You use the URI to display the image in your app or upload it to a server.

beginner

Why is it important to handle user cancellation in image picking?

Users may cancel picking an image. Handling cancellation prevents app crashes and improves user experience by allowing the app to continue working smoothly.

Which method lets users pick an image from their device in React Native?

A Using a ScrollView

B Using a TextInput component

C Using an Image Picker library

D Using a Button component only

Image Picker libraries provide the interface to select images from device storage or camera.

What is the key piece of data you use to display a picked image in React Native?

A Image URI

B Image file size

C Image file name

D Image type

The URI is the path to the image file and is used to show the image in the app.

What should your app do if the user cancels image picking?

A Force the user to pick an image

B Show an error message and crash

C Close the app

D Handle cancellation gracefully without crashing

Good apps handle cancellation smoothly to keep the user experience positive.

Which permission is NOT typically needed for image picking?

A Camera access

B Location access

C Read external storage

D Write external storage

Location access is unrelated to picking images from gallery or camera.

What React Native hook is commonly used to store the picked image URI?

A useState

B useEffect

C useContext

D useRef

useState stores the image URI so the UI can update when a new image is picked.

Explain how to implement an image picker in a React Native app.

Think about the steps from setup to showing the image.

Describe why handling user cancellation is important in image picking.

Consider what happens if the user changes their mind.

Practice

1. What is the main purpose of using an image picker in a React Native app?

easy

A. To let users select or take photos inside the app

B. To edit photos with filters

C. To upload files from the internet

D. To display images from a URL

Solution

1. Step 1: Understand the image picker role

   An image picker allows users to choose or capture photos within the app.

2. Step 2: Compare options

   Options B, C, and D describe different features unrelated to picking images from device storage or camera.

3. Final Answer:

   To let users select or take photos inside the app -> Option A

4. Quick Check:

   Image picker = select or take photos [OK]

Hint: Image picker = choose or take photos inside app [OK]

Common Mistakes:

• Confusing image picker with image editing
• Thinking it uploads images from internet
• Assuming it only displays images

2. Which of the following is the correct way to import the image picker library in React Native?

easy

A. import { launchCamera } from 'react-native-camera';

B. import ImagePicker from 'react-native-picker';

C. import { pickImage } from 'react-native-image-picker';

D. import { launchImageLibrary } from 'react-native-image-picker';

Solution

1. Step 1: Identify correct package and function

   The official image picker uses 'react-native-image-picker' and exports 'launchImageLibrary'.

2. Step 2: Check each import statement

   import { launchImageLibrary } from 'react-native-image-picker'; matches the correct import syntax and function name. Others use wrong package names or functions.

3. Final Answer:

   import { launchImageLibrary } from 'react-native-image-picker'; -> Option D

4. Quick Check:

   Correct import = import { launchImageLibrary } from 'react-native-image-picker'; [OK]

Hint: Use exact package and function names for import [OK]

Common Mistakes:

• Using wrong package name
• Importing non-existent functions
• Confusing camera and image picker imports

3. What will be the output of this code snippet when a user cancels the image selection?

launchImageLibrary({}, response => {
  if (response.didCancel) {
    console.log('User cancelled');
  } else if (response.errorCode) {
    console.log('Error:', response.errorMessage);
  } else {
    console.log('Image URI:', response.assets[0].uri);
  }
});

medium

A. Logs the image URI

B. Logs 'Error:' with error message

C. Logs 'User cancelled' to the console

D. Throws a runtime error

Solution

1. Step 1: Understand response properties

   If the user cancels, response.didCancel is true, so the first if block runs.

2. Step 2: Check code branches

   Since didCancel is true, it logs 'User cancelled' and skips other branches.

3. Final Answer:

   Logs 'User cancelled' to the console -> Option C

4. Quick Check:

   didCancel true logs 'User cancelled' [OK]

Hint: Check didCancel to detect user cancellation [OK]

Common Mistakes:

• Confusing didCancel with errorCode
• Expecting image URI when cancelled
• Not handling cancellation case

4. Identify the error in this React Native image picker usage:

launchImageLibrary(options, response => {
  if (response.didCancel) {
    console.log('User cancelled');
  } else if (response.errorCode) {
    console.log('Error:', response.errorMessage);
  } else {
    console.log('Image URI:', response.uri);
  }
});

medium

A. Using response.error instead of response.errorCode

B. Accessing response.uri instead of response.assets[0].uri

C. Missing import statement for launchImageLibrary

D. Not checking for user cancellation

Solution

1. Step 1: Check response object structure

   The image URI is inside response.assets array, not directly in response.uri.

2. Step 2: Identify incorrect property access

   Accessing response.uri will be undefined or cause error; correct is response.assets[0].uri.

3. Final Answer:

   Accessing response.uri instead of response.assets[0].uri -> Option B

4. Quick Check:

   Image URI = response.assets[0].uri [OK]

Hint: Image URI is in response.assets[0].uri, not response.uri [OK]

Common Mistakes:

• Using wrong error property
• Ignoring user cancellation
• Not importing the function

5. You want to allow users to pick only photos (no videos) from their library. Which option object should you pass to launchImageLibrary?

hard

A. { mediaType: 'photo' }

B. { mediaType: 'video' }

C. { mediaType: 'mixed' }

D. { mediaType: 'image' }

Solution

1. Step 1: Understand mediaType option

   The mediaType option controls what media types the picker shows: 'photo', 'video', or 'mixed'.

2. Step 2: Choose correct mediaType for photos only

   'photo' restricts selection to images only, which matches the requirement.

3. Step 3: Eliminate incorrect options

   'video' allows only videos, 'mixed' allows both, 'image' is invalid.

4. Final Answer:

   { mediaType: 'photo' } -> Option A

5. Quick Check:

   mediaType 'photo' = photos only [OK]

Hint: Use mediaType: 'photo' to pick only images [OK]

Common Mistakes:

• Using 'image' instead of 'photo'
• Choosing 'mixed' when only photos needed
• Confusing 'video' with photos