ImagePicker

expo-image-picker provides access to the system's UI for selecting images and videos from the phone's library or taking a photo with the camera.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

expo install expo-image-picker

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

import React, { useState, useEffect } from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);

  useEffect(() => {
    (async () => {
      if (Constants.platform.ios) {
        const { status } = await ImagePicker.requestCameraRollPermissionsAsync();
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
  }, []);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}
When you run this example and pick an image, you will see the image that you picked show up in your app, and something similar to the following logged to your console:
{
  "cancelled":false,
  "height":1611,
  "width":2148,
  "uri":"file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
}

import * as ImagePicker from 'expo-image-picker';

Asks the user to grant permissions for accessing camera. Alias for Permissions.askAsync(Permissions.CAMERA). This does nothing on web because the browser camera is not used.

A promise that resolves to an object of type PermissionResponse.

Asks the user to grant permissions for accessing user's photo. Alias for Permissions.askAsync(Permissions.CAMERA_ROLL). This does nothing on web.

A promise that resolves to an object of type PermissionResponse.

Checks user's permissions for accessing camera. Alias for Permissions.getAsync(Permissions.CAMERA).

A promise that resolves to an object of type PermissionResponse.

Checks user's permissions for accessing photos. Alias for Permissions.getAsync(Permissions.CAMERA_ROLL).

A promise that resolves to an object of type PermissionResponse.

Display the system UI for choosing an image or a video from the phone's library. Requires Permissions.CAMERA_ROLL on iOS 10 only. On mobile web, this must be called immediately in a user interaction like a button press, otherwise the browser will block the request without a warning.

  • options (object) --
    A map of options for both:
    • mediaTypes (ImagePicker.MediaTypeOptions) -- Choose what type of media to pick. Defaults to ImagePicker.MediaTypeOptions.Images.
    • allowsEditing (boolean) -- Whether to show a UI to edit the image/video after it is picked. Images: On Android the user can crop and rotate the image and on iOS simply crop it. Videos: On iOS user can trim the video. Defaults to false.
    • allowsMultipleSelection (boolean) -- (Web only) Whether or not to allow selecting multiple media files at once.
    A map of options for images:
    • aspect (array) -- An array with two entries [x, y] specifying the aspect ratio to maintain if the user is allowed to edit the image (by passing allowsEditing: true). This is only applicable on Android, since on iOS the crop rectangle is always a square.
    • quality (number) -- Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
      Note: If the selected image has been compressed before, the size of the output file may be bigger than the size of the original image.
    • base64 (boolean) -- Whether to also include the image data in Base64 format.
    • exif (boolean) -- Whether to also include the EXIF data for the image.
    Option for videos:
    • videoExportPreset (ImagePicker.VideoExportPreset) -- Available on iOS 11+ only. Specify preset which will be used to compress selected video. Defaults to ImagePicker.VideoExportPreset.Passthrough.
Animated GIFs support If the selected image is an animated GIF, the result image will be an animated GIF too if and only if quality is set to undefined and allowsEditing is set to false. Otherwise compression and/or cropper will pick the first frame of the GIF and return it as the result (on Android the result will be a PNG, on iOS — GIF).

If the user cancelled the picking, returns { cancelled: true }.
Otherwise, returns { cancelled: false, uri, width, height, type } where uri is a URI to the local media file (useable as the source for an Image/Video element), width, height specify the dimensions of the media and type is one of image or video telling what kind of media has been chosen. Images can contain also base64 and exif keys. base64 is included if the base64 option was truthy, and is a string containing the JPEG data of the image in Base64--prepend that with 'data:image/jpeg;base64,' to get a data URI, which you can use as the source for an Image element for example. exif is included if the exif option was truthy, and is an object containing EXIF data for the image--the names of its properties are EXIF tags and their values are the values for those tags. If a video has been picked the return object contains an additional key duration specifying the video's duration in miliseconds.

Display the system UI for taking a photo with the camera. Requires Permissions.CAMERA. On Android and iOS 10 Permissions.CAMERA_ROLL is also required. On mobile web, this must be called immediately in a user interaction like a button press, otherwise the browser will block the request without a warning.

  • options (object) --
    A map of options:
    • mediaTypes (ImagePicker.MediaTypeOptions) -- Choose what type of media to pick. Defaults to ImagePicker.MediaTypeOptions.Images.
    • allowsEditing (boolean) -- Whether to show a UI to edit the image after it is picked. On Android the user can crop and rotate the image and on iOS simply crop it. Defaults to false.
    A map of options for images:
    • aspect (array) -- An array with two entries [x, y] specifying the aspect ratio to maintain if the user is allowed to edit the image (by passing allowsEditing: true). This is only applicable on Android, since on iOS the crop rectangle is always a square.
    • quality (number) -- Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
    • base64 (boolean) -- Whether to also include the image data in Base64 format.
    • exif (boolean) -- Whether to also include the EXIF data for the image. On iOS the EXIF data does not include GPS tags in the camera case.
    Option for videos:
    • videoExportPreset (ImagePicker.VideoExportPreset) -- Available on iOS 11+ only. Specify preset which will be used to compress selected video. Defaults to ImagePicker.VideoExportPreset.Passthrough.

If the user cancelled the action, the method returns { cancelled: true }.
Otherwise, this method returns information about the selected media item. When the chosen item is an image, this method returns { cancelled: false, type: 'image', uri, width, height, exif, base64 }; when the item is a video, this method returns { cancelled: false, type: 'video', uri, width, height, duration }. The uri property is a URI to the local image or video file (usable as the source of an Image element, in the case of an image) and width and height specify the dimensions of the media. The base64 property is included if the base64 option is truthy, and is a Base64-encoded string of the selected image's JPEG data; prepared it with data:image/jpeg;base64, to create a data URI, which you can use as the source of an Image element, for example. The exif field is included if the exif option is truthy, and is an object containing the image's EXIF data. The names of this object's properties are EXIF tags and the values are the respective EXIF values for those tags.

Media typeAccept asset typesPlatforms
MediaTypeOptions.AllImages and videosiOS
MediaTypeOptions.ImagesOnly imagesboth
MediaTypeOptions.VideosOnly videosboth

PresetValueResolutionVideo compression algorithmAudio compression algorithm
VideoExportPreset.Passthrough0UnchangedNoneNone
VideoExportPreset.LowQuality1Depends on the deviceH.264AAC
VideoExportPreset.MediumQuality2Depends on the deviceH.264AAC
VideoExportPreset.HighestQuality3Depends on the deviceH.264AAC
VideoExportPreset.H264_640x4804640 x 480H.264AAC
VideoExportPreset.H264_960x5405960 x 540H.264AAC
VideoExportPreset.H264_1280x72061280 x 720H.264AAC
VideoExportPreset.H264_1920x108071920 x 1080H.264AAC
VideoExportPreset.H264_3840x216083840 x 2160H.264AAC
VideoExportPreset.HEVC_1920x108091920 x 1080HEVCAAC
VideoExportPreset.HEVC_3840x2160103840 x 2160HEVCAAC