ImagePicker

Installation

Configuration

Usage

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

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

  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        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>
  );
}

{
  "cancelled":false,
  "height":1611,
  "width":2148,
  "uri":"file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
}

Using ImagePicker with AWS S3

Using ImagePicker with Firebase

API

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

ImagePicker.requestCameraPermissionsAsync()

Returns

ImagePicker.requestMediaLibraryPermissionsAsync(writeOnly)

Arguments

• writeOnly (boolean) - whether to request write or read and write permissions. Defaults to false.

Returns

ImagePicker.getCameraPermissionsAsync()

Returns

ImagePicker.getMediaLibraryPermissionsAsync()

Arguments

• writeOnly (boolean) - whether to get write or read and write permissions. Defaults to false.

Returns

ImagePicker.launchImageLibraryAsync(options)

Notes for Web: The system UI can only be shown after user activation (e.g. a Button press). Therefore, calling launchImageLibraryAsync in componentDidMount, for example, will not work as intended. The cancelled event will not be returned in the browser due to platform restrictions and inconsistencies across browsers.

Arguments

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

Returns

• 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 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.
• The base64 property is included if the base64 option is truthy, and is a Base64-encoded string of the selected image's JPEG data. If you prepend this with 'data:image/jpeg;base64,' to create a data URI, you can use it as the source of an Image element; for example: <Image source={{uri: 'data:image/jpeg;base64,' + launchCameraResult.base64}} style={{width: 200, height: 200}} />.
• The duration property is the length of the video in milliseconds.

Note: Make sure that you handle MainActivity destruction on Android. See ImagePicker.getPendingResultAsync.

ImagePicker.launchCameraAsync(options)

Notes for Web: The system UI can only be shown after user activation (e.g. a Button press). Therefore, calling launchCameraAsync in componentDidMount, for example, will not work as intended. The cancelled event will not be returned in the browser due to platform restrictions and inconsistencies across browsers.

Arguments

• 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:
  • videoMaxDuration (number) -- Maximum duration, in seconds, for video recording. Setting this to 0 disables the limit. Defaults to 0 (no limit).
    • On iOS, when allowsEditing is set to true, maximum duration is limited to 10 minutes. This limit is applied automatically, if 0 or no value is specified.
    • On Android, effect of this option depends on support of installed camera app.
    • On Web this option has no effect - the limit is browser-dependant.
  • videoExportPreset (ImagePicker.VideoExportPreset) -- Available on iOS 11+ only, but Deprecated. Specify preset which will be used to compress selected video. Defaults to ImagePicker.VideoExportPreset.Passthrough.
  • videoQuality (_ImagePicker.UIImagePickerControllerQualityType_) -- iOS only. Specify the quality of recorded videos. Defaults to ImagePicker.UIImagePickerControllerQualityType.High, which is the highest available for the device.

Returns

• 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 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.
• The base64 property is included if the base64 option is truthy, and is a Base64-encoded string of the selected image's JPEG data. If you prepend this with 'data:image/jpeg;base64,' to create a data URI, you can use it as the source of an Image element; for example: <Image source={{uri: 'data:image/jpeg;base64,' + launchCameraResult.base64}} style={{width: 200, height: 200}} />.
• The duration property is the length of the video in milliseconds.

Note: Make sure that you handle MainActivity destruction on Android. See ImagePicker.getPendingResultAsync.

ImagePicker.getPendingResultAsync()

Returns

Enums

ImagePicker.MediaTypeOptions

ImagePicker.VideoExportPreset

ImagePicker.UIImagePickerControllerType

Types

ImagePicker.MediaLibraryPermissionResponse

• accessPrivileges (string) - Indicates if your app has access to the whole or only part of the photo library. Possible values are:
  • all if the user granted your app access to the whole photo library
  • limited if the user granted your app access only to selected photos (only available on iOS 14.0+)
  • none if user denied or hasn't yet granted the permission

ImagePicker.CameraPermissionResponse

ImagePicker.ImagePickerErrorResult

• code (string) - The error code.
• message (string) - The error message.
• exception (string | undefined) - The exception which caused the error.