React Native

How to get images from camera roll with React Native on Android?

UPDATE: The CameraRoll Api is available on Android as of React Native 0.19

So you've decided to build a photo gallery component in your React Native app.
On iOS, no problem, you can use the CameraRoll Api.
Unfortunately, you won't have the same luck on Android. Facebook didn't open source the Android version yet...

Use rn-camera-roll for Android

But do not despair! You can luckily use rn-camera-roll!
This module makes the ++code>CameraRoll.getPhotos++/code> method available on Android.

You can use the ++code>CameraRoll.getPhotos++/code> method as you would with the iOS API with the ++code>after++/code> and the ++code>first++/code> params:

++pre>++code>++code class=" language-javascript">var CameraRoll = require('rn-camera-roll');

onPhotosFetchedSuccess(data) {  
 var photos = data.edges.map((asset) => {
   return asset.node.image;
 });
 console.log(photos);
}

onPhotosFetchError(error) {  
 // Handle error here
 console.err(error);
}

fetchPhotos(count = 10, after) {  
 // Use the CameraRoll API on iOS and Android
 CameraRoll.getPhotos({
   // take the first n photos after given photo uri
   first: count,
   // after
   after: "file:/storage/emulated/0/DCIM/Camera/IMG_20151126_115520477.jpg",
 }, this.onPhotosFetchedSuccess.bind(this), this.onPhotosFetchError.bind(this));
}
++/code> ++/code> ++/pre>

Check out the results

You can now build an awesome photo gallery in your React Native App, even on Android!

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

camera-roll-react-native

 

 

Développeur mobile ?

Rejoins nos équipes