Skip to content
CameraRoll is a react-native native module that provides access to the local camera roll or photo library.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore(ci): update version of orb (#67) Jun 26, 2019
android feat(lib): Filename added to the image properties iOS and Android (#61) Jun 13, 2019
example Merge pull request #40 from react-native-community/feature/turn-off-c… Apr 22, 2019
ios fixes #42, again (#66) Jun 26, 2019
js fix(lib): dummy commit back to the center fix semantic-release May 13, 2019
typings fix typo in ts declarations Apr 5, 2019
.eslintignore setup of library config files for flow, eslint, babel, jest, etc.. Feb 24, 2019
.eslintrc.js Standard ESLint Apr 6, 2019
.flowconfig general cleanup Mar 3, 2019
.gitattributes setup of library config files for flow, eslint, babel, jest, etc.. Feb 24, 2019
.gitignore fix(lib): fix groupType all not working on Android (#57) May 13, 2019
.npmignore setup of library config files for flow, eslint, babel, jest, etc.. Feb 24, 2019
.prettierrc setup of library config files for flow, eslint, babel, jest, etc.. Feb 24, 2019
.releaserc chore(ci) add publish step on master commits (#48) Apr 24, 2019
LICENCE general cleanup Mar 3, 2019
README.md feat(lib): Filename added to the image properties iOS and Android (#61) Jun 13, 2019
babel.config.js Make lib JS+native code reachable from iOS example app Feb 24, 2019
jest.setup.js setup of library config files for flow, eslint, babel, jest, etc.. Feb 24, 2019
package.json chore(release): 1.1.1 [skip ci] Jun 18, 2019
react-native-cameraroll.podspec Rename react-native-cameraroll. podspec to react-native-cameraroll.po… Mar 18, 2019
tsconfig.json general cleanup Mar 3, 2019
yarn.lock fix(ci): eslint dependency version issue May 7, 2019

README.md

@react-native-community/cameraroll

CircleCI Status Supports Android and iOS MIT License

Getting started

$ npm install @react-native-community/cameraroll --save

Mostly automatic installation

$ react-native link @react-native-community/cameraroll

Manual installation

iOS

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

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • 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
  1. Append the following lines to android/settings.gradle:
    include ':@react-native-community_cameraroll'
    project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-community/cameraroll/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':@react-native-community_cameraroll')
    

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-community/cameraroll";

Usage

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

Permissions

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.

On Android permission is required to read the external storage. Add below line to your manifest to request this permission on app install.

<manifest>
...
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
...
<application>

Methods


Reference

Methods

saveToCameraRoll()

CameraRoll.saveToCameraRoll(tag, [type]);

Saves the photo or video to the camera roll or photo library.

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

On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time).

If the tag has a file extension of .mov or .mp4, 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'.

Returns a Promise which will resolve with the new URI.

Parameters:

Name Type Required Description
tag string Yes See above.
type enum('photo', 'video') No Overrides automatic detection based on the file extension.

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:

Name Type Required Description
params object Yes Expects a params with the shape described below.
  • 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.
  • groupTypes : {string} : Specifies which group types to filter the results to. Valid values are:
    • Album
    • All // default
    • Event
    • Faces
    • Library
    • PhotoStream
    • SavedPhotos
  • groupName : {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.
  • assetType : {string} : Specifies filter on asset type. Valid values are:
    • All
    • Videos
    • Photos // default
  • mimeTypes : {Array} : Filter by mimetype (e.g. image/jpeg).

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:
      • type: {string}
      • group_name: {string}
      • image: {object} : An object with the following shape:
        • uri: {string}
        • filename: {string}
        • height: {number}
        • width: {number}
        • isStored: {boolean}
        • playableDuration: {number}
      • timestamp: {number}
      • location: {object} : 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}

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>
 );
}
You can’t perform that action at this time.