In this post I'm going to show how to create custom native views written in Objective C and integrate them into a React Native application written in JavasScript. It's based on work on I've been doing for Active Inbox (a plugin for Gmail that turns your emails into tasks, you should check it out)

React Native was released by Facebook last week and it's a new way to create native apps on iOS (and soon Android as well) using JavaScript. It differs from PhoneGap/Cordova in that it allows you to create a UI out of real native components, not just an embedded web browser.

Like the React library that it's based on React Native works by specifying views as functions of data. You write code that mostly just assumes that the views will be created anew each time any bit of data changes. The clever bit is that the views aren't actually directly creating UI elements (DOM elements in the case of React, native components in the case of React Native) but are instead creating "Shadow" Views/Elements. React checks these against the previous versions then only updates the bits that have changed.

A simple React Native app looks like this:

var React = require('react-native'); var { AppRegistry, Image, Text } = React; var App = React.createClass({ render: function() { return ( Hello World! ); } }); AppRegistry.registerComponent('helloworld', () => App);

React Native comes with a set of built-in components that you can use to create your UI. For a lot of applications these might be sufficient but sometimes you're going to need something custom. Luckily React Native makes it pretty easy to create your own custom native views written in Objective C (or Java presumably once it supports Android) which can then be used just as easily as views written in JavaScript. the process of doing this isn't really documented yet, but the source is available and is pretty clearly written.

To make a custom Objective C view available to React Native you need two Objective C classes: the view itself (which inherits from `UIView` from UIKit) and a React Native View Manager (which inherits from RCTViewManager from React Native). The view can just be a regular iOS view, it doesn't need anything special. The manager has a `view` method that is called by React Native to create an instance of the view. The manager also specifies which properties of the view can be set from the JSX template in JavaScript.