Getting Started with React Native (Part 2)

Building a Simple App

The Idea

Our simple app will consist of:
(1) Two screens (Home & About)
(2) A navigation bar
(3) A clickable button on the Home screen to open About screen
(4) A clickable button on the About screen to open a popup alert

Let’s start by extending our HelloWorld project from part 1.

Adding Navigation

We can use the React Native core component either NavigatorIOS (for iOS only) or Navigator (for both iOS and Android) to build the app navigation. Here we will be using NavigatorIOS component (Learn more about NavigatorIOS).

Now let’s open and edit the index.ios.js file as below:

You can see that we have imported NavigatorIOS component from react-native package. Then we render the NavigatorIOS component in the default HelloWorld class with the initialRoute props that defines first route (Home in this case) in our navigator. After that we create a new class for the Home component which renders the output for the Home screen. In React Native, the component classes can be separated into different js files. We will demonstrate that in the next step.

Now let’s run react-native run-ios command and you should see the emulator as below:

Creating Home and About Screen/Scene Component

Earlier we defined Home component class in index.ios.js file. Now we will separate this class into a different file. In addition we will also create the About component as well a separate styles file.

Let’s create a new folder in the root of our HelloWorld project called app and inside of that we create another folder called components where we will put all component files.

Home.js

From the above code block, you may notice two things: (1) import the css styles object from the styles.js file and (2) module.exports = Home: exports the Home component class to be used in other component files.

About.js

styles.js

index.ios.js

Again you can see how we import Home component class from Home.js file:

import Home from './app/components/Home';

Adding Functions

As we mentioned in the beginning, this app will include a button in the Home screen which can be pressed to open the About screen.

Please note that there is no core React Native component for Button at the moment and instead we can use TouchableHighlight component for touch action. However there are also some third-party components for Button, one of which is react-native-button. We will be using this one in our app as I want to show you how to use the third-party component.

So let’s install the react-native-button component and edit Home.js file:

npm install react-native-button --save

Home.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';
import Button from 'react-native-button';
import styles from './styles';
class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!
        </Text>
        <Button
          containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: '#ccc'}}
          style={{fontSize: 20, color: 'green'}}>
          Open About Screen
        </Button>
      </View>
    );
  }
}
module.exports = Home;

From above, you can see how we import and use the Button component.

Refresh the app (Cmd + R) in the emulator and you should see the Home screen with a button as below:

Now let’s add a function to this button to open About screen when it is pressed.

First we import About component:

import About from './About';

Then let’s create a function called: _openAbout() in Home class

_openAbout () {
    this.props.navigator.push({
        title: 'About Screen',
        component: About
    });
 }

Navigator’s push method is used to add a route to current navigator stack.

Next is to add onPress property to the Button for it to call the function when pressed.

<Button
   containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: '#ccc'}}
   style={{fontSize: 20, color: 'green'}}
   onPress={this._openAbout.bind(this)}
   >
   Open About Screen
</Button>

Now you should be able to navigate from Home to About by pressing the button.

Let’s finish implementing our app by adding another button to the About screen and a function to open the alert popup.

Similar to what we did in Home.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  AlertIOS
} from 'react-native';
import Button from 'react-native-button';
import styles from './styles';
class About extends Component {
_openAlert () {
    AlertIOS.alert('Hello', 'This is the About Screen :)');
}
render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          About!!
        </Text>
        <Button
          containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: '#ccc'}}
          style={{fontSize: 20, color: 'green'}}
          onPress={this._openAlert.bind(this)}
          >
          Say Hello
        </Button>
      </View>
    );
  }
}
module.exports = About;

Here is the final product:

The entire source code can be found here.

I hope this will be helpful for you to get started with React Native. As a newbie I am also still learning and I will continue to share what I have learned. Happy coding! :)

Getting Started with React Native (Part 1)