photo: https://unsplash.com/photos/0S9ePdJG6Og

React Native image upload to S3 bucket

3 min readMay 10, 2016

I’m building an app which is very similar to Instagram. I got to the point when I needed to implement image functionality — the user needs to be able to take a photo and view it later in her image gallery in the app. The task seems fairly easy. All I need is a module which helps me to deal with the photo taking and the way I can upload the photo to the S3 bucket.

Fortunately there is no need to create our own bridge between Objective-C code and React Native, we can make use of the great module built by Lochlan — react-native-camera. And as I am lazy I also found the library which let’s you upload the images to S3 — react-native-aws3.

So far so good…

Get started

Let’s start a new React Native project:

react-native init CameraApp

Then add our dependencies (notice that react-native-camera is installed from github — that’s the work towards v1):

npm install --save lwansbrough/react-native-camera react-native-aws3

Make sure that you add correct policies to your Amazon S3 bucket:

see react-native-aws3 repo for more config details

After that we need to link react-native-camera with our project. The easiest way to do it is to run:

rnpm link react-native-camera

If you don’t want to use rnpm, then please follow the instructions in react-native-camera repo how to do it manually.

Creating CameraApp component

Now we can create a CameraApp component (note that I used react-native-vector-icons, you can just drop in TouchableHighlight instead of a Button. Or install it — just don’t forget to link it. rnpm is your friend — rnpm link react-native-vector-icons)
— https://gist.github.com/knowbody/84ae45217f6d7a60c2abbd9b702596f0:

https://gist.github.com/knowbody/84ae45217f6d7a60c2abbd9b702596f0

The last thing, which I got stacked on for quite a while is to check if your RCTCameraRoll library is linked. 😱

check if your RCTCameraRoll library is linked

If it is not, all you need to do is to drop RCTCameraRoll.xcodeproj into Libraries in XCode. RCTCameraRoll.xcodeproj can be found:

<your_project>/node_modules/react-native/Libraries/CameraRoll/

Then you need to link it. In XCode click on the name of your project, in the main window click on Build Phases and then add libRCTCameraRoll.a under Link Binary With Libraries: