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

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.

API documentation

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

Installation in managed Expo projects

For managed 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 react-native-unimodules package before continuing.

Add the package to your npm dependencies

expo install expo-image-picker

Configure for iOS

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 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" />

In AndroidManifest.xml add the following activity within application:

<activity
  android:name="com.theartofdev.edmodo.cropper.CropImageActivity"
  android:theme="@style/Base.Theme.AppCompat">
</activity>

Contributing

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