Transitioning from React to React Native

Nowadays, everyone is tapping away on their mobile phones and using apps that they downloaded from the app or play store. As a software engineer, I feel like it’s my duty to know not only how to create web apps for desktops, but also mobile apps as well. I found a blog from Kyle Banks which described in great detail how to create a calculator app using React Native, so I’ll be taking some screenshots from his blog as well as my own.

React Native Tutorial Part 1: Hello, React

The great thing about it is that it’s compatible with both Android and iOS, so you don’t have to learn an entirely new language when you want to switch from one OS to the other. So let’s get cracking!

First off, keep in mind that I’m coding out of a MacBook environment, as opposed to Windows. Let’s start off by running the following three commands.

$ brew install node 
$ brew install watchman 
$ npm install -g react-native-cli

Then you can create and initialize your project.

$ react-native init ReactCalculator

You can now open up the project with a text editor in whichever directory that you initialized the project. I named mine ReactCalculator, per Banks’ blog, but you can name it whatever you’d like. For the purpose of this blog, we’re just going to try and print “Hello, React!” to the screen, but I do plan to continue and build a calculator as I code along to the blog.

Assuming you did not run into any errors running the commands above, you can run the application on a simulator using the following commands respectively, depending on which operating system you’d like to run it on.

# For Android
$ react-native run-android

# For iOS
$ react-native run-ios

A new terminal running the React Native packager will open up as well as the following screen on your simulator.

Hopefully everything works as planned!

Okay, so now that we have Facebook’s React Native welcome screen, how can we mutate it to our liking? Good question! Let’s try and get it to display “Hello, React!”, the typical phrase software engineers love to display when they first learn to code or even a new language.

As of right now, when you first initialized the project, there were two index files created, one for iOS and one for Android.

index.android.js
index.ios.js

In order to get the simulator to display “Hello, React!”, we have to change both of these files. In each of the two index files, replace all of the content with the following code.

import React, { Component } from 'react';
import {
    Text,
    AppRegistry
} from 'react-native';
class ReactCalculator extends Component {

    render() {
        return (
            <Text>Hello, React!</Text>
        )
    }

}
AppRegistry.registerComponent('ReactCalculator', () => ReactCalculator);

Like React, we must first import React and Component from the react package. We’re also importing Text and appRegistry from the react-native package.

We also need to register our root Component, where all other components will be mounted, via AppRegistry.

Running the code again, you should have a nice and ugly “Hello, React!” message on the screen of your simulator.

Just like how you would mount a horse, the horse as the root component will carry all of our sub-components and views that we mount on it.

Now, I would have to agree that as we build the calculator app, it would most definitely not be DRY if we have to copy and paste code in both the Android and iOS files! What a pain! So let’s do a workaround and refactor, refactor, refactor!

Let’s create a src directory and a ReactCalculator.js file inside.

$ mkdir src
$ touch src/ReactCalculator.js

And let’s move the code from index.android.js and index.ios.js into ReactCalculator.js.

// src/ReactCalculator.js

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

class ReactCalculator extends Component {

    render() {
        return (
            <Text>Hello, React!</Text>
        )
    }

}

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

Since we can import source code from other packages, all we have to do is replace all the the content in index.android.js and index.ios.js with the import line below.

import ReactCalculator from './src/ReactCalculator';

Run your application again and you should get the same nice and ugly “Hello, React!” message on your screen. So now, we can just edit the ReactCalculator.js file for a Single Source of Truth rather than duplicating every line of code we write as we develop this app.

And huzzah! We are done here! Congrats on creating your first React Native app, albeit a simple nice and ugly “Hello, React!” message!