An Introduction to React Native: Building Mobile Apps with JavaScript

Whenever there is an update for regular iOS apps written in Swift or Objective-C, the whole app needs to be recompiled and a new version has to be distributed to the App Store again. All this can take a few weeks depending on the App Store review process.

To avoid this hassle, React Native apps work in a different way: a native app is able to locate specific JavaScript code, which is later downloaded and compiled when the app is launched on an actual device. Thanks to this, updating the app can be done instantly without needing to submit a new version to the App Store again.

It is interesting to note that thanks to the good relationship between Apple and Facebook, the App Store review guidelines were changed to allow JavaScript code to be downloaded and executed “if it does not significantly alter functionality of the app”. In practice, this means you need to send your app to the App Store just once, and once it is approved, you should be able to update it whenever you want.

To set up basic React Native development environment, follow these simple steps:

1. Install Node.js, which contains the package manager for JavaScript libraries (e.g. React Native).
2. Open your terminal and type $ sudo npm install -g react-native-cli to install the React Native command line interface.
3. Create a test project using the $ react-native init TestProject command.

The TestProject folder will then be located on your desktop, and it will contain an “ios” folder with an Xcode project. Launch a basic React Native app by opening the project and clicking on the Run button.

After that React Native development environment is ready, the rest of the development process can be completed by editing the index.ios.js file located in the TestProject folder. All the changes made in JavaScript code can be loaded into an app that is already running by pressing Cmd+R in the simulator (no need to relaunch it from Xcode).

At first glance the source of a React app looks like a strange XML or HTML document that is composed of various components. Behind the hood, these are JavaScript classes that extend the React.Component and render themselves inside each other thanks to JSX syntax.

Each React component has constant properties (aka props) that are received from its parent as well as a mutable state that can be changed freely by itself in one of its component lifecycle methods (or its other functions). The main purpose of each React component is to render itself through the render() function that defines how it should be rendered in the output application document. Each component can contain multiple child components — either other Javascript classes or actual React Native iOS components that are rendered on the screen. In web development, HTML tags would be there instead.

To further customize the look of the components that have been created, React Native contains a Stylesheet object. It can be filled with CSS properties to describe the UI of each component just like it’s done in web development (including margin, padding, background color etc.) — which is kind of neat.

Here is example of a very simple app composed of React Native iOS components:

'use strict'

// import react
const React = require('react-native')
const { AppRegistry, StyleSheet, View, Text, NavigatorIOS, Component } = React

// create styles
const styles = StyleSheet.create
({
    container: { flex: 1 },
    page: { flex: 1, backgroundColor: '#ddd', justifyContent:'center' },
    text: { fontSize: 28, textAlign: 'center' }
})

// main app component containing ios navigator
class ReactTest extends Component
{
    render()
    {
        return (
		// ios navigator
            <NavigatorIOS
                style={styles.container}
                barTintColor={'#ff0030'}
                tintColor={'#000'}
                initialRoute={{ title: 'React Test', component: Home}}
            />
        )
    }
}

// first screen
class Home extends Component
{
    // show second screen on click
    click = () =>
    {
        this.props.navigator.push({ title: 'Second!', component: Second})
    }

    render()
    {
        return (
            <View style={styles.page}>
                <Text style={styles.text} onPress={this.click}>Click Me!</Text>
            </View>
        )
    }
}

// second screen
class Second extends Component
{
    render()
    {
        return (
            <View style={styles.page}>
                <Text style={styles.text}>YOLO!</Text>
            </View>
        )
    }
}

// register app
AppRegistry.registerComponent('ReactTest', () => ReactTest)
module.exports = ReactTest

React Native apps can best be described as “web pages with native UI elements”. They are not as fast as regular native apps and cannot use all the fancy features found in mobile operating systems. But that does not mean they are completely useless. For many apps, what React Native offers would be enough. But perhaps the biggest potential lies somewhere in between. Regular native apps which contain some screens made in React Native can display web content with native UI that can be changed on the fly.

P.S. - Do you want to chat about React.js or React Native with us? Then please join us on August 25 for beer and a little networking at our rooftop Scrollbar!

Register here!