Image picker in React Native - Mini App: Build & Ship

Build data not available for this pattern.

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