React Native Camera Roll

UPDATE: As of react-native 0.19, the CameraRoll module is now available on Android too!

Table of contents

• Example
• Setup
• Usage

Example

Checkout this example of a basic gallery app with infinite scroll:
https://github.com/bamlab/rn-camera-roll/tree/master/example

<img width=300 src=https://raw.githubusercontent.com/bamlab/rn-camera-roll/master/example/screenshot.png />

Setup

First, install the package:

npm install rn-camera-roll

Then, follow those instructions:

iOS

The Camera Roll iOS API is part of react-native. You have to import node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj by following the libraries linking instructions.

Android

Update your gradle files

For react-native >= v0.15, this command will do it automatically:

react-native link rn-camera-roll

For react-native = v0.14 You will have to update them manually:

In android/settings.gradle, add:

include ':rn-camera-roll'
project(':rn-camera-roll').projectDir = new File(settingsDir, '../node_modules/rn-camera-roll/android')

In android/app/build.gradle add:

dependencies {
  ...
  compile project(':rn-camera-roll')
}

Register the package into your MainActivity

1package com.example;
2
3import android.app.Activity;
4import android.os.Bundle;
5import android.view.KeyEvent;
6
7import com.facebook.react.LifecycleState;
8import com.facebook.react.ReactInstanceManager;
9import com.facebook.react.ReactRootView;
10import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
11import com.facebook.react.shell.MainReactPackage;
12import com.facebook.soloader.SoLoader;
13
14// IMPORT HERE
15import fr.bamlab.rncameraroll.CameraRollPackage;
16// ---
17
18public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
19
20    private ReactInstanceManager mReactInstanceManager;
21    private ReactRootView mReactRootView;
22
23    @Override
24    protected void onCreate(Bundle savedInstanceState) {
25        super.onCreate(savedInstanceState);
26        mReactRootView = new ReactRootView(this);
27
28        mReactInstanceManager = ReactInstanceManager.builder()
29                .setApplication(getApplication())
30                .setBundleAssetName("index.android.bundle")
31                .setJSMainModuleName("index.android")
32                .addPackage(new MainReactPackage())
33
34                // REGISTER PACKAGE HERE
35                .addPackage(new CameraRollPackage())
36                // ---
37                .setUseDeveloperSupport(BuildConfig.DEBUG)
38                .setInitialLifecycleState(LifecycleState.RESUMED)
39                .build();
40
41        mReactRootView.startReactApplication(mReactInstanceManager, "example", null);
42
43        setContentView(mReactRootView);
44    }
45
46    ...

Usage

You can use the getPhotos API as you would with the iOS API with the after and the first params. You can use both the promise syntax or the callback syntax.

1import CameraRoll from 'rn-camera-roll';
2
3onPhotosFetchedSuccess(data) {
4  const photos = data.edges.map((asset) => {
5    return asset.node.image;
6  });
7  console.log(photos);
8  /**
9  On Android, this should log something like:
10  [
11    {
12      "uri": "file:/storage/emulated/0/DCIM/Camera/IMG_20160120_172426830.jpg",
13      "width":3006,
14      "height":5344,
15      "orientation": 90
16    },
17    {
18      "uri": "file:/storage/emulated/0/DCIM/Camera/IMG_20160116_153526816_TOP.jpg",
19      "width": 5344,
20      "height": 3006,
21      "orientation": 0
22    }
23    ...
24  ]
25  **/
26}
27
28onPhotosFetchError(err) {
29  // Handle error here
30}
31
32fetchPhotos(count = 10, after) {
33  CameraRoll.getPhotos({
34    // take the first n photos after given photo uri
35    first: count,
36    // after
37    after: "file:/storage/emulated/0/DCIM/Camera/IMG_20151126_115520477.jpg",
38  }, this.onPhotosFetchedSuccess.bind(this), this.onPhotosFetchError.bind(this));
39}