Structuring the application

It's time to add a little interactivity to our application. You can begin by adding a simple button component to the screen that is touchable. In the root directory, create a folder called App and another folder inside the App folder called Components. In the Components directory, add a file named SimpleButton.js. This will be the directory in which we store and reference the components we create.

Note

Note that the React Native code created in this chapter will work for both iOS and Android. Simply replace index.ios.js with index.android.js if you are interested in android only. The screenshots and instructions will be mainly for the iOS simulator.

Creating the SimpleButton component

Let's start by rendering some text to the screen and importing it into our index.ios.js file. In SimpleButton.js, add:

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

export default class SimpleButton extends React.Component {
  render () {
    return ...