Image picker in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when the user taps the image picker button?

In a React Native app using the expo-image-picker library, what is the expected behavior when the user taps the button that triggers the image picker?

A The app opens the device's photo gallery allowing the user to select an image.

B The app crashes because the image picker is not supported on mobile devices.

C Nothing happens because the button has no onPress handler.

D The app opens the camera directly without showing the gallery.

💡 Hint

Think about what the image picker library is designed to do when triggered.

The image picker library opens the device's photo gallery or camera to let the user select or take a photo. If the button triggers the picker correctly, the gallery appears.

📝 Syntax

intermediate

Which code snippet correctly requests permission to access the media library?

Select the correct React Native code snippet using expo-image-picker to request permission to access the media library.

A const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();

B const status = ImagePicker.requestPermissions();

C const status = await ImagePicker.getCameraPermissions();

D const { permission } = ImagePicker.askForPermissions();

💡 Hint

Look for the official method name to request media library permissions.

The correct method is requestMediaLibraryPermissionsAsync() which returns an object containing the status.

❓ lifecycle

advanced

When should you request image picker permissions in a React Native app?

Choose the best lifecycle moment to request image picker permissions in a React Native functional component.

A Before the app is published, in the app.json configuration file.

B Every time the user taps the image picker button.

C Inside a useEffect hook that runs once when the component mounts.

D Only after the user selects an image.

💡 Hint

Think about when you want to ask for permission to avoid delays during user interaction.

Requesting permissions once when the component loads improves user experience by avoiding repeated prompts.

🔧 Debug

advanced

Why does this image picker code fail to show the selected image?

Given this code snippet, why does the selected image not appear on the screen? const [image, setImage] = useState(null); const pickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, quality: 1, }); if (!result.canceled) { setImage(result.assets[0].uri); } }; return (

A The Image component is missing the resizeMode property, so the image won't display.

B The code uses result.uri but the correct property is result.assets[0].uri in the latest expo-image-picker version.

C The pickImage function is not marked async, so it doesn't wait for the picker.

D The Button component does not have an onPress prop, so the function never runs.

💡 Hint

Check the structure of the result object returned by the image picker.

In recent versions, the picker returns an object with an assets array. The image URI is at result.assets[0].uri, not result.uri.

🧠 Conceptual

expert

What is the main reason to ask for image picker permissions before user interaction?

Why is it better to request image picker permissions when the app or component loads rather than when the user taps the button to pick an image?

A Because the image picker library requires permissions at build time.

B Because permissions cannot be requested after the app is running.

C To reduce the app size by preloading permissions.

D To avoid interrupting the user flow with permission dialogs during image selection.

💡 Hint

Think about user experience and timing of permission dialogs.

Requesting permissions early prevents unexpected popups during user actions, making the app feel smoother.

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