/ react

Building a simple camera app clone for iOS with React Native

I decided to dive into React Native now that I've got the hang of the basics of building a react webapp. I'm a React Native newbie, and this blog post simply summarizes a step by step of my experience getting started.

React Native basically allows developers to build "native" iOS and Android applications using React for the UI. It also allows us to access mobile specific functionality within react quite easily. In this post we'll take a look at the iOS camera, in fact we'll build a simple camera app clone (by using a third party camera module).

Only macOS seems to be supported for iOS development right now, and that's what I'm using. So this blog post might not be of much use for linux/windows devs on Android. There are instructions for those platforms on Facebook's React Native page.

Installing prerequisites:

brew install node #(only if you haven't already)
brew install watchman
npm install -g react-native-cli

(I previously used nvm to install node so I skipped that this time.)

You'll also need Xcode if you're on mac. You can get it in the mac App Store.

I recommend using the Atom editor for the JS side, with Facebook's nuclide package installed.

Bootstrapping a React Native Project

react-native init CamerApp
cd CamerApp

I suggest you also initialize a git repo after this step.

git init
git add .
git commit -m "Starting something awesome"

Running Your App on an iPhone (optional)

Facebook's guide mentions a way to start your app in a simulator with the react-native run-ios but I wanted to run this natively on my own iPhone, so I opened up Xcode and started configuring. I'm not an Xcode expert and it's a bit of a blur what I did exactly and in which order, but here are the basics:

Open up the xcode project in CamerApp/ios/camerapp.xcodeproj.

in the project navigator tab, click on the top icon, the one with the project's name. On the General tab in the main view, assign a team. In my case I used my iCloud account as a personal team. This is required for Xcode to be able to generate a signing certificate, which allows you to run the application on an actual iPhone.

You'll also probably want to pick your current iOS version as the deployment target and set the compatibility version to Xcode 8.0. It's somewhere in the settings. (Will update when I remember, not sure how important this is).

When you're done configuring, open up your project's root folder in a terminal and run npm start

Now plug in your iPhone with a usb cable, select it in Xcode's build target device list in the top bar and click build. If you run into issues, leave a comment. I might be able to help.

On your iPhone, you'll need to open up Settings -> General -> Profiles & Device Management, and enable your developer profile to allow the signed certificates.

Your iPhone should be able to run the app now!

Let's start working on the JS code

Open up the project in your favorite text editor (atom or emacs?).

open index.ios.js

edit some text, for example:

<Text style={styles.instructions}>
  Here are some changes!

Shake your iPhone to display the developer menu, tap on reload js, and you should see your changes!

(If you're using the simulator, just press cmd+r)

Creating a camera app clone

I'm using this: https://github.com/lwansbrough/react-native-camera

You can follow the instructions in the readme in the link above to get started, here are the bits I followed:

Open camerApp/ios/camerApp/Info.plist and add this: (replace the messages with something more appropriate if you want)

<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<string>Your message to user when the microsphone is accessed for the first time</string>

in a terminal in the project's root, run this:

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save

react-native link react-native-camera

Here's my whole index.ios.js explained piece by piece.

We need to import Dimensions from react-native

import React, { Component } from 'react';
import {
} from 'react-native';

We also need to import the Camera class from the previously installed camera module:

import Camera from 'react-native-camera';

In the App's main class, I've added some basic camera functionality using the <Camera> component from the react-native-camera module, and a <Text> component from react-native. Pressing it causes the takePicture function to run.

export default class camerApp extends Component {
  render() {
    return (
      <View style={styles.container}>
          ref={(cam) => {
            this.camera = cam;
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
  takePicture() {
      .then((data) => console.log(data))
      .catch(err => console.error(err));

Next we add a bit of styling. Notice how we get the device's height and width from the Dimensions class.

const styles = StyleSheet.create({
  container: {
    flex: 1
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40

Finally we use react-native's AppRegistry class to register the component for React Native.

AppRegistry.registerComponent('camerApp', () => camerApp);

Now reload the js on your phone or simulator and BAM, you've got a "native" camera app!