expo-image-picker

What is expo-image-picker?

The expo-image-picker package allows you to access the device's media library and camera to pick images and videos. It provides a simple and consistent interface for both iOS and Android platforms.

What are expo-image-picker's main functionalities?

Pick an image from the library

This feature allows users to pick an image from their device's media library. The code sample demonstrates how to launch the image library and handle the selected image.

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

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

  if (!result.canceled) {
    console.log(result.uri);
  }
}

Take a photo using the camera

This feature allows users to take a photo using their device's camera. The code sample demonstrates how to launch the camera and handle the captured photo.

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

async function takePhoto() {
  let result = await ImagePicker.launchCameraAsync({
    allowsEditing: true,
    aspect: [4, 3],
    quality: 1,
  });

  if (!result.canceled) {
    console.log(result.uri);
  }
}

Pick a video from the library

This feature allows users to pick a video from their device's media library. The code sample demonstrates how to launch the video library and handle the selected video.

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

async function pickVideo() {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Videos,
    allowsEditing: true,
    quality: 1,
  });

  if (!result.canceled) {
    console.log(result.uri);
  }
}

Take a video using the camera

This feature allows users to take a video using their device's camera. The code sample demonstrates how to launch the camera and handle the captured video.

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

async function takeVideo() {
  let result = await ImagePicker.launchCameraAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Videos,
    allowsEditing: true,
    quality: 1,
  });

  if (!result.canceled) {
    console.log(result.uri);
  }
}

Other packages similar to expo-image-picker

react-native-image-picker

The react-native-image-picker package provides similar functionality to expo-image-picker, allowing users to pick images and videos from the device's library or capture them using the camera. It offers more customization options and is suitable for projects that do not use Expo.

react-native-camera

The react-native-camera package is a comprehensive camera module for React Native. It allows for capturing pictures and videos, scanning barcodes, and more. It provides more advanced camera functionalities compared to expo-image-picker but requires more setup.

react-native-image-crop-picker

The react-native-image-crop-picker package allows users to pick images and videos from the device's library or capture them using the camera. It also provides built-in cropping functionality, which is not available in expo-image-picker.

README

Provides access to the system's UI for selecting images and videos from the phone's library or taking a photo with the camera.

API documentation

• Documentation for the main branch
• Documentation for the latest stable release

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npx expo install expo-image-picker

Configure for iOS

This is only required for usage in bare React Native apps.

Add NSPhotoLibraryUsageDescription, NSCameraUsageDescription, and NSMicrophoneUsageDescription keys to your Info.plist:

<key>NSPhotoLibraryUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to save photos</string>
<key>NSCameraUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to access your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to use your microphone</string>

Run npx pod-install after installing the npm package.

Configure for Android

This is only required for usage in bare React Native apps.

This package automatically adds the CAMERA, READ_EXTERNAL_STORAGE, and WRITE_EXTERNAL_STORAGE permissions. They are used when picking images from the camera directly, or from the camera roll.

<!-- Added permissions -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Config Plugin

This plugin is applied automatically in EAS Build, only add the config plugin if you want to pass in extra properties.

After installing this npm package, add the config plugin to the plugins array of your app.json or app.config.js:

{
  "expo": {
    "plugins": ["expo-image-picker"]
  }
}

Next, rebuild your app as described in the "Adding custom native code" guide.

API

The plugin provides props for extra customization. Every time you change the props or plugins, you'll need to rebuild (and prebuild) the native app. If no extra properties are added, defaults will be used.

• photosPermission (string | false): Sets the iOS NSPhotoLibraryUsageDescription permission message to the Info.plist. Setting false will skip adding the permission on iOS and does not skip the permission on Android. Defaults to Allow $(PRODUCT_NAME) to access your photos.
• cameraPermission (string | false): Sets the iOS NSCameraUsageDescription permission message to the Info.plist. Setting false will skip adding the permission on iOS and does not skip the permission on Android. Defaults to Allow $(PRODUCT_NAME) to access your camera.
• microphonePermission (string | false): Sets the iOS NSCameraUsageDescription permission message to the Info.plist. Setting false will skip adding the permission on iOS and skips adding the android.permission.RECORD_AUDIO Android permission. Defaults to Allow $(PRODUCT_NAME) to access your photos.

Example

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "custom photos permission",
          "cameraPermission": "Allow $(PRODUCT_NAME) to open the camera",

          "//": "Disables the microphone permission",
          "microphonePermission": false
        }
      ]
    ]
  }
}

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.