React Native: Posting/uploading camera roll images to a server.

— —

Update: I discovered a much cleaner method:
https://medium.com/@scottdixon/react-native-creating-a-custom-module-to-upload-camera-roll-images-7a3c26bac309

— —

React Native comes with a CameraRoll API which allows us to access and render a user’s saved photos from an ‘assets-library’ URL.

It would be really useful if we could read the image data and post it to a server. We can do this with a little Object-C.

If we run the example CameraRoll code and log ‘node’, we’re given an object that looks something like this:

{“isStored”:true, “height”:1000, “uri”:”assets-library://asset/ass
et.JPG?id=6E5438ED-9A8C-4ED0–9DEA-AB2DEFSD0&ext=JPG”,”width”:1500}

We want to include base64 encoded image data in that object. Here’s how:

1. Open the React Native project in Xcode and open:
Libraries > RCTImage > RCTCameraRollManager.m

2. Replace this file with the following code: https://github.com/scottdixon/react-native-upload-from-camera-roll/blob/master/RCTCameraRollManager.m

Your image objects will now contain a base64 property. You just need to adjust one more React Native file to inform it of the new property.

Open /node_modules/react-native/Libraries/CameraRoll/CameraRoll.js
and add this to line 76:

base64: ReactPropTypes.string,

Here’s a walkthrough of the changes:

• Read each image as a thumbnail
• Encode the thumbnail as base64
• Add the base64 string to the object

If you’re planning on uploading full-res images, you’re going to have a hard time (the application runs extremely slow transferring large base64 strings). This method can be optimised by supplying single-file data on request. A project for another day.

This was my first exposure to Objective-C and I’m sure there are a million optimisations. Please hit me with any feedback / submit pull requests.