Home

Awesome

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

CircleCI Status Supports Android and iOS MIT License Lean Core Badge

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)
  1. 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')
  2. 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.

<manifest>
...
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...
<application>

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

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:

NameTypeRequiredDescription
tagstringYesSee above.
typeenum('photo', 'video')NoOverrides automatic detection based on the file extension.
albumstringNoThe album to save to

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:

Returns:

Array of Album object

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:

NameTypeRequiredDescription
paramsobjectYesExpects a params with the shape described below.

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

Example

Loading images:

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };
render() {
 return (
   <View>
     <Button title="Load Images" onPress={this._handleButtonPress} />
     <ScrollView>
       {this.state.photos.map((p, i) => {
       return (
         <Image
           key={i}
           style={{
             width: 300,
             height: 100,
           }}
           source={{ uri: p.node.image.uri }}
         />
       );
     })}
     </ScrollView>
   </View>
 );
}

Loading images with listeners and refetchs:

import { CameraRoll, cameraRollEventEmitter } from '@react-native-camera-roll/camera-roll';

import { useCallback, useEffect, useState } from 'react';

import { AppState, EmitterSubscription } from 'react-native';

interface GalleryOptions {
  pageSize: number;
  mimeTypeFilter?: Array<string>;
}

interface GalleryLogic {
  photos?: ImageDTO[];
  loadNextPagePictures: () => void;
  isLoading: boolean;
  isLoadingNextPage: boolean;
  isReloading: boolean;
  hasNextPage: boolean;
}

const supportedMimeTypesByTheBackEnd = [
  'image/jpeg',
  'image/png',
  'image/heif',
  'image/heic',
  'image/heif-sequence',
  'image/heic-sequence',
];

export const useGallery = ({
  pageSize = 30,
  mimeTypeFilter = supportedMimeTypesByTheBackEnd,
}: GalleryOptions): GalleryLogic => {
  const [isLoading, setIsLoading] = useState(false);
  const [isReloading, setIsReloading] = useState(false);
  const [isLoadingNextPage, setIsLoadingNextPage] = useState(false);
  const [hasNextPage, setHasNextPage] = useState(false);
  const [nextCursor, setNextCursor] = useState<string>();
  const [photos, setPhotos] = useState<ImageDTO[]>();

  const loadNextPagePictures = useCallback(async () => {
    try {
      nextCursor ? setIsLoadingNextPage(true) : setIsLoading(true);
      const { edges, page_info } = await CameraRoll.getPhotos({
        first: pageSize,
        after: nextCursor,
        assetType: 'Photos',
        mimeTypes: mimeTypeFilter,
        ...(isAndroid && { include: ['fileSize', 'filename'] }),
      });
      const photos = convertCameraRollPicturesToImageDtoType(edges);
      setPhotos((prev) => [...(prev ?? []), ...photos]);

      setNextCursor(page_info.end_cursor);
      setHasNextPage(page_info.has_next_page);
    } catch (error) {
      console.error('useGallery getPhotos error:', error);
    } finally {
      setIsLoading(false);
      setIsLoadingNextPage(false);
    }
  }, [mimeTypeFilter, nextCursor, pageSize]);

  const getUnloadedPictures = useCallback(async () => {
    try {
      setIsReloading(true);
      const { edges, page_info } = await CameraRoll.getPhotos({
        first: !photos || photos.length < pageSize ? pageSize : photos.length,
        assetType: 'Photos',
        mimeTypes: mimeTypeFilter,
        // Include fileSize only for android since it's causing performance issues on IOS.
        ...(isAndroid && { include: ['fileSize', 'filename'] }),
      });
      const newPhotos = convertCameraRollPicturesToImageDtoType(edges);
      setPhotos(newPhotos);

      setNextCursor(page_info.end_cursor);
      setHasNextPage(page_info.has_next_page);
    } catch (error) {
      console.error('useGallery getNewPhotos error:', error);
    } finally {
      setIsReloading(false);
    }
  }, [mimeTypeFilter, pageSize, photos]);

  useEffect(() => {
    if (!photos) {
      loadNextPagePictures();
    }
  }, [loadNextPagePictures, photos]);

  useEffect(() => {
    const subscription = AppState.addEventListener('change', async (nextAppState) => {
      if (nextAppState === 'active') {
        getUnloadedPictures();
      }
    });

    return () => {
      subscription.remove();
    };
  }, [getUnloadedPictures]);

  useEffect(() => {
    let subscription: EmitterSubscription;
    if (isAboveIOS14) {
      subscription = cameraRollEventEmitter.addListener('onLibrarySelectionChange', (_event) => {
        getUnloadedPictures();
      });
    }

    return () => {
      if (isAboveIOS14 && subscription) {
        subscription.remove();
      }
    };
  }, [getUnloadedPictures]);

  return {
    photos,
    loadNextPagePictures,
    isLoading,
    isLoadingNextPage,
    isReloading,
    hasNextPage,
  };
};

deletePhotos()

CameraRoll.deletePhotos([uri]);

Requests deletion of photos in the camera roll.

On Android, the uri must be a local image or video URI, such as "file:///sdcard/img.png".

On iOS, the uri can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI. The user is presented with a dialog box that shows them the asset(s) and asks them to confirm deletion. This is not able to be bypassed as per Apple Developer guidelines.

Returns a Promise which will resolve when the deletion request is completed, or reject if there is a problem during the deletion. On iOS the user is able to cancel the deletion request, which causes a rejection, while on Android the rejection will be due to a system error.

Parameters:

NameTypeRequiredDescription
uristringYesSee above.

iosGetImageDataById()

CameraRoll.iosGetImageDataById(internalID, true);

Parameters:

NameTypeRequiredDescription
internalIDstringYesIos internal ID 'PH://xxxx'.
optionsPhotoConvertionOptionsFalseExpects an options object with the shape described below.

Upload photo/video with iosGetImageDataById method


try {
// uri 'PH://xxxx'
const fileData = await CameraRoll.iosGetImageDataById(uri);
if (!fileData?.node?.image?.filepath) return undefined;
const uploadPath = imageData.node.image.filepath; // output should be file://...
// fetch or ReactNativeBlobUtil.fetch to upload
}
catch (error) {}

Note:

Sometimes when calling iosGetImageDataById, the image/video can be downloaded from iCloud. To be able to receive the progress of this download, you need to add a listener to the onProgressUpdate event and use it to render on the UI.

The event generated will be an object containing the image id (id) and the progress of the download (progress). The id is a string with the internalID you used to call iosGetImageDataById. The progress is a double ranging from 0 to 1, where 0 represents the start of the download and 1 represents the completion of the download.


import { progressUpdateEventEmitter } from '@react-native-camera-roll/camera-roll';

useEffect(() => {
  const subscription = progressUpdateEventEmitter.addListener(
    'onProgressUpdate',
    event => {
      // Render the progress of the image / video being 
      // downloaded using event.id and event.progress
    },
  );

  return () => {
    subscription.remove();
  };
}, []);

useCameraRoll()

useCameraRoll is a utility hooks for the CameraRoll module.

import React, {useEffect} from 'react';
import {Button} from 'react-native';
import {useCameraRoll} from "@react-native-camera-roll/camera-roll";

function Example() {
  const [photos, getPhotos, save] = useCameraRoll();

  return <>
    <Button title='Get Photos' onPress={() => getPhotos()}>Get Photos</Button>
    {
      photos.map((photo, index) => /* render photos */)
    }
  </>;
};

getPhotoThumbnail()

iOS only

Returns a Promise with thumbnail photo.

Parameters:

NameTypeRequiredDescription
internalIDstringYesIos internal ID 'PH://xxxx'.
optionsPhotoThumbnailOptionsYesExpects an options object with the shape described below.

Returns:

TypeDescription
Promise<PhotoThumbnail>A Promise with PhotoThumbnail with the shape described below.

Example

Loading a thumbnail:

export default function Thumbnail(props) {
  const [base64Image, setBase64Image] = useState(null);

  useEffect(() => {
    const getThumbnail = async () => {
      const options = {
        allowNetworkAccess: true,
        targetSize: {
          height: 80,
          width: 80
        },
        quality: 1.0
      };

      const thumbnailResponse = await CameraRoll.getPhotoThumbnail(props.image.uri, options);

      setBase64Image(thumbnailResponse.thumbnailBase64);
    };

    getThumbnail();
  }, []);

  const extension = props.image.extension;
  let prefix;

  switch (extension) {
    case 'png':
      prefix = 'data:image/png;base64,';
      break;
    default:
      //all others can use jpeg
      prefix = 'data:image/jpeg;base64,';
      break;
  }

  return (
    <Image
      source={{ uri: `${prefix}${base64Image}` }}
    />
  );
}

Known issues

IOS

If you try to save media into specific album without asking for read and write permission then saving will not work, workaround is to not precice album name for IOS if you don't want to request full permission (Only ios >= 14).