Summary - Image picker

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.

Exercise 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.

Show example solution

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
});
if (result.canceled) return null;
return result.assets[0].uri;

Exercise 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' }}}} />.

Show example solution

return (
  <Image
    source={{ uri }}
    style={{ width: 200, height: 200, resizeMode: 'cover' }}
  />
);

Test yourself

Write the gallery permission function

const permission = await ImagePicker.____();

Show answer

const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();

Match each flow part to its role

requestMediaLibraryPermissionsAsync

Gallery permission
launchImageLibraryAsync

Picks from gallery
launchCameraAsync

Captures with camera
assets[0].uri

First image path

Next lesson: expo-location

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies