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.