@react-native-camera-roll/camera-roll

[![CircleCI Status][circle-ci-badge]][circle-ci] ![Supports Android and iOS][supported-os-badge] ![MIT License][license-badge] [![Lean Core Badge][lean-core-badge]][lean-core-issue]

Notice: The NPM package name has changed, please change your package.json dependency!

Previous package name: @react-native-community/cameraroll

New package name: @react-native-camera-roll/camera-roll

Getting started

$ npm install @react-native-camera-roll/camera-roll --save

or

$ yarn add @react-native-camera-roll/camera-roll

Linking

Linking should be automatic since react-native version 0.60. Below are instructions if auto linking does not work.

Mostly automatic installation

$ react-native link @react-native-camera-roll/camera-roll && npx pod-install

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @react-native-camera-roll/camera-roll and add RNCCameraroll.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNCCameraroll.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java (Auto link, ^RN0.69 does not required)

• Add import com.reactnativecommunity.cameraroll.CameraRollPackage; to the imports at the top of the file
• Add new CameraRollPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':@react-native-camera-roll_camera-roll'
   project(':@react-native-camera-roll_camera-roll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-camera-roll/camera-roll/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(':@react-native-camera-roll_camera-roll')
   

Migrating from the core react-native module

This module was created when the CameraRoll was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from:

import { CameraRoll } from "react-native";

to:

import { CameraRoll } from "@react-native-camera-roll/camera-roll";

Usage

CameraRoll provides access to the local camera roll or photo library.

Permissions

iOS

The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the NSPhotoLibraryUsageDescription key in your Info.plist with a string that describes how your app will use this data. This key will appear as Privacy - Photo Library Usage Description in Xcode.

If you are targeting devices running iOS 11 or later, you will also need to add the NSPhotoLibraryAddUsageDescription key in your Info.plist. Use this key to define a string that describes how your app will use this data. By adding this key to your Info.plist, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.

Android

Permission is required to read and write to the external storage.

On Expo, follow the guide here for requesting the permission.

On react-native-cli or ejected apps, adding the following lines will add the capability for the app to request the permission. Find more info on Android Permissions here.

...
  
  
  
  
...

Then you have to explicitly ask for the permission

import { PermissionsAndroid, Platform } from "react-native";
import { CameraRoll } from "@react-native-camera-roll/camera-roll";

async function hasAndroidPermission() {
  const getCheckPermissionPromise = () => {
    if (Platform.Version >= 33) {
      return Promise.all([
        PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES),
        PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO),
      ]).then(
        ([hasReadMediaImagesPermission, hasReadMediaVideoPermission]) =>
          hasReadMediaImagesPermission && hasReadMediaVideoPermission,
      );
    } else {
      return PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
    }
  };

  const hasPermission = await getCheckPermissionPromise();
  if (hasPermission) {
    return true;
  }
  const getRequestPermissionPromise = () => {
    if (Platform.Version >= 33) {
      return PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
        PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO,
      ]).then(
        (statuses) =>
          statuses[PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES] ===
            PermissionsAndroid.RESULTS.GRANTED &&
          statuses[PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO] ===
            PermissionsAndroid.RESULTS.GRANTED,
      );
    } else {
      return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE).then((status) => status === PermissionsAndroid.RESULTS.GRANTED);
    }
  };

  return await getRequestPermissionPromise();
}

async function savePicture() {
  if (Platform.OS === "android" && !(await hasAndroidPermission())) {
    return;
  }

  CameraRoll.save(tag, { type, album })
};

Methods

• save
• getAlbums
• getPhotos
• deletePhotos
• iosGetImageDataById
• useCameraRoll
• getPhotoThumbnail iOS only

Reference

Methods

save()

CameraRoll.save(tag, { type, album })

Saves the photo or video to the photo library, and returns the URI of the newly created asset.

The tag must be a local image or video URI, such as "file:///sdcard/img.png".

If the tag has a file extension of .mov or .mp4 (lower or uppercase), it will be inferred as a video. Otherwise it will be treated as a photo. To override the automatic choice, you can pass an optional type parameter that must be one of 'photo' or 'video'.

It allows to specify a particular album you want to store the asset to when the param album is provided. On Android, if no album is provided, DCIM directory is used, otherwise PICTURE or MOVIES directory is used depending on the type provided.

Returns a Promise which will resolve with the new URI.

Parameters:

saveAsset()

Same as save(), but returns the full asset information (PhotoIdentifier) instead of just the URI.

getAlbums()

CameraRoll.getAlbums(params);

Returns a Promise with a list of albums

Parameters:

• assetType : {string} : Specifies filter on asset type. Valid values are:
  • All // default
  • Videos
  • Photos
• albumType : {string} : (iOS only) Specifies filter on type of album. Valid values are:
  • All
  • Album // default
  • SmartAlbum

Returns:

Array of Album object

• id: {string}
• title: {string}
• count: {number}
• type: {string} (iOS only)
• subtype: {string | undefined} : See AlbumSubType type for possible values. iOS only.

getPhotos()

CameraRoll.getPhotos(params);

Returns a Promise with photo identifier objects from the local camera roll of the device matching shape defined by getPhotosReturnChecker.

Parameters:

• first : {number} : The number of photos wanted in reverse order of the photo application (i.e. most recent first for SavedPhotos). Required.
• after : {string} : A cursor that matches page_info { end_cursor } returned from a previous call to getPhotos. Note that using this will reduce performance slightly on iOS. An alternative is just using the fromTime and toTime filters, which have no such impact.
• groupTypes : {string} : Specifies which group types to filter the results to. Valid values are:
  • Album
  • All // default
  • Event
  • Faces
  • Library
  • SmartAlbum
  • PhotoStream
  • SavedPhotos
• groupName : {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.
• includeSharedAlbums : {boolean} : Include assets originating from an iCloud Shared Album. iOS only.
• assetType : {string} : Specifies filter on asset type. Valid values are:
  • All
  • Videos
  • Photos // default
• mimeTypes : {Array} : Filter by mimetype (e.g. image/jpeg). Note that using this will reduce performance slightly on iOS.
• fromTime : {number} : Filter by creation time with a timestamp in milliseconds. This time is exclusive, so we'll select all photos with timestamp > fromTime.
• toTime : {number} : Filter by creation time with a timestamp in milliseconds. This time is inclusive, so we'll select all photos with timestamp <= toTime.
• include : {Array} : Whether to include some fields that are slower to fetch
  • filename : Ensures image.filename is available in each node. This has a large performance impact on iOS.
  • fileSize : Ensures image.fileSize is available in each node. This has a large performance impact on iOS.
  • fileExtension : Ensures image.fileExtension is available in each node.
  • location: Ensures location is available in each node. This has a large performance impact on Android.
  • imageSize : Ensures image.width and image.height are available in each node. This has a small performance impact on Android.
  • playableDuration : Ensures image.playableDuration is available in each node. This has a medium peformance impact on Android.
  • orientation : Ensures image.orientation is available in each node. This has a small peformance impact on Android. Android only
  • albums : Ensures group_name is available in each node. This has a large peformance impact on iOS.
  • sourceType : Ensures sourceType is available in each node.

Returns a Promise which when resolved will be of the following shape:

• edges : {Array} An array of node objects
  • node: {object} An object with the following shape:
    • id: {string} : A local identifier. Correspond to Media._ID on Android and localIdentifier on iOS.
    • type: {string}
    • subTypes: {Array} : An array of subtype strings (see SubTypes type). Always [] on Android.
    • sourceType: {string | null} : "UserLibrary" (for the user library) or "CloudShared" (for an iCloud Shared Album). Always "UserLibrary" on Android.
    • group_name: {Array} : An array of albums containing the element. Always 1 element on Android. 0 to n elements on iOS.
    • image: {object} : An object with the following shape:
      • uri: {string}
      • filename: {string | null} : Only set if the include parameter contains filename
      • extension: {string | null} : Only set if the include parameter contains fileExtension
      • height: {number | null} : Only set if the include parameter contains imageSize
      • width: {number | null} : Only set if the include parameter contains imageSize
      • fileSize: {number | null} : Only set if the include parameter contains fileSize
      • playableDuration: {number | null} : Only set for videos if the include parameter contains playableDuration. Will be null for images.
      • orientation: {number | null} : Only set for images if the include parameter contains orientation. Android only
    • timestamp: {number}
    • modificationTimestamp: {number}
    • location: {object | null} : Only set if the include parameter contains location. An object with the following shape:
      • latitude: {number}
      • longitude: {number}
      • altitude: {number}
      • heading: {number}
      • speed: {number}
• page_info : {object} : An object with the following shape:
  • has_next_page: {boolean}
  • start_cursor: {string}
  • end_cursor: {string}
• limited : {boolean | undefined} : true if the app can only access a subset of the gallery pictures (authorization is PHAuthorizationStatusLimited), false otherwise (iOS only)

Example

Loading images:

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (