expo-image-picker
- React Native course
- Advanced
- Lesson 13/83
- 5 min
Learn gallery access with expo-image-picker.
The expo-image-picker package
To let the user pick an image from the gallery or take a photo with the camera you use the expo-image-picker package. This package offers two functions for both gallery and camera selection: launchImageLibraryAsync and launchCameraAsync. With Expo you install it with npx expo install expo-image-picker.
The package opens its own selection interface; the user picks an image or takes a photo. The result returns as an object; the assets field of this object carries the picked images. The canceled field tells whether the user canceled the selection. This package is the easiest way to access both camera and gallery through a single interface.
Import
The package is imported from expo-image-picker as a * namespace. The common syntax: import * as ImagePicker from 'expo-image-picker'. This pattern groups all functions of the package under the ImagePicker name; it makes the code easier to read.
After importing you can use two main functions: ImagePicker.launchImageLibraryAsync (gallery selection) and ImagePicker.launchCameraAsync (camera capture). You also request gallery permission with ImagePicker.requestMediaLibraryPermissionsAsync. All functions of the package are asynchronous so they are awaited.
Practice Import the package
Complete the empty file. Import the expo-image-picker package with import * as ImagePicker. Then export it with export { ImagePicker }.
Starter code
// import the expo-image-picker package
// export itSample solution
import * as ImagePicker from 'expo-image-picker';
export { ImagePicker };Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does expo-image-picker provide?
- Only location info
- Only file download
- Gallery and camera selection Correct answer
- Only network requests
Explanation: The package provides gallery and camera selection.
2 Write the import statement
import * as ____ from 'expo-image-picker';import * as ImagePicker from 'expo-image-picker';Explanation: The ImagePicker namespace carries all functions.
3 Match each part to its role
| Term | Meaning |
|---|---|
launchImageLibraryAsync |
Picks from gallery |
launchCameraAsync |
Captures with camera |
requestMediaLibraryPermissionsAsync |
Gallery permission |
assets |
Picked images |