Summary - Image picker
- React Native course
- Advanced
- Lesson 18/83
- 5 min
Combine expo-image-picker and gallery/camera selection to write a profile photo app.
Summary - Image picker
In this group you learned to install the expo-image-picker package, ask for gallery permission, pick from the gallery with launchImageLibraryAsync, take with the camera using launchCameraAsync and show the image on the screen. An image selection flow is these five pieces.
In the summary we will merge permission, gallery selection and image display in a single app. These three pieces together form a real profile photo flow. Let us merge them now.
Practice Summary - Pick an image from the gallery
Complete the pickImage function. Call const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images }). If result.canceled, return null. Otherwise return result.assets[0].uri.
Starter code
import * as ImagePicker from 'expo-image-picker';
export async function pickImage() {
// pick an image from the gallery and return the uri
}Sample solution
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
if (result.canceled) return null;
return result.assets[0].uri;Practice Summary - Show the image
Complete the empty showImage function. It takes uri as a parameter. Return <Image source={{{ uri }}} style={{{ width: 200, height: 200, resizeMode: 'cover' }}}} />.
Starter code
import { Image } from 'react-native';
export function showImage(uri) {
// show the image in a 200x200 container with cover
}Sample solution
return (
<Image
source={{ uri }}
style={{ width: 200, height: 200, resizeMode: 'cover' }}
/>
);Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the gallery permission function
const permission = await ImagePicker.____();const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();Explanation: This function asks for gallery permission.
2 Match each flow part to its role
| Term | Meaning |
|---|---|
requestMediaLibraryPermissionsAsync |
Gallery permission |
launchImageLibraryAsync |
Picks from gallery |
launchCameraAsync |
Captures with camera |
assets[0].uri |
First image path |