Creating Your First Application with create-react-native-app

To create a new project with Create React Native App, run the following command:

create-react-native-app first-project

This will install some JavaScript dependencies, as well as create the boilerplate for your application. Your project directory will look something like this:

.
├── App.js
├── App.test.js
├── README.md
├── app.json
├── node_modules
├── package.json
└── yarn.lock

This structure looks like what you might expect from a simple JavaScript project. There is a package.json file, which contains metadata about the project and its dependencies. The README.md file includes information for running the project. App.test.js includes a simple test file. The code for your application is located in App.js. To modify this project and build out your own application, you would begin with App.js.

We will cover what this code is doing in more detail once we start building our weather application in “Building a Weather App”.

Previewing Your App on iOS or Android

Great—now your application is ready for testing. To launch your application, run:

cd first-project
npm start

You should see the screen shown in Figure 3-1.

Figure 3-1. Previewing a Create React Native App by using a QR code

In order to view your application, you’ll need the Expo app for iOS or Android. Once you have it installed, point your phone’s camera at the QR code, and your React Native app will load. Note that your phone and computer will need to be on the same network, and able to communicate with each other.

Congrats! You’ve created your first React Native app, compiled it, and gotten it running on a real device.

In the next section, we’ll cover how to do a full, traditional installation of React Native. You can skip to “Exploring the Sample Code” instead if you’d like to get started programming.

Creating Your First Application with react-native

You can use the React Native command-line tools to create a new application. Run the following command to install the command-line tools:

npm install -g react-native-cli

Now we can generate a fresh project with all of the React Native, iOS, and Android boilerplate we’ll need by running:

react-native init FirstProject

The resulting directory structure should look similar to the following:

.
├── __tests__
├── android
├── app.json
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
├── package.json
└── yarn.lock

The ios/ and android/ directories contain boilerplate relevant to those platforms. Your React code is located in the index.ios.js and android.ios.js files, which are the respective entry points for your React application. Dependencies installed via npm can, as usual, be found in the node_modules/ folder.

Running Your App on iOS

To run your app on iOS, start by navigating into your newly created project’s directory. Then you can run your React Native application like so:

cd FirstProject
react-native run-ios

Alternatively, you can open your application in Xcode and launch the iOS simulator from there:

open ios/FirstProject.xcodeproj

You can also use Xcode to upload your application to a real device for testing. In order to do this, you will need a free Apple ID so that you can configure code signing.

To configure code signing, open your project in the Xcode Project Navigator and select your main target, which should have the same name as your project. Next, select the General tab. Under the Signing menu, select your Apple developer account from the Team drop-down (see Figure 3-2). You will then need to repeat this step for the Tests target.

Figure 3-2. Setting the Team in Xcode will allow you to test your application on a physical device

The first time you attempt to run your application on any particular device, Xcode will prompt you to sign into your Apple account and register your device for development.

For more details on how to run your app on a real iOS device, check out Apple’s official documentation.

Note that your iOS device and your computer must be on the same network in order for your application to run.

Running Your App on Android

In order to run your application on Android, you need a fully functioning Android developer setup, including Android Studio and the Android SDK. See the Getting Started documentation for a list of Android dependencies.

To launch your React Native platform on Android, run:

react-native run-android

You can also open your application in Android Studio and compile and run it from there.

You can either run your application in the Android emulator or on a physical device connected via USB. In order to run on a physical device, you will need to enable USB debugging in your device’s Developer Options. More detailed instructions are available in the Android Studio documentation.

Handling User Input

We want the user to be able to enter a zip code and get the forecast for that area, so we need to add a text field for user input. We can start by adding zip code information to our component’s initial state (see Example 3-7).

constructor(props) {
  super(props);
  this.state = { zip: "" };
}

If you’re accustomed to using React.createClass() to create components instead of JavaScript classes, this may seem odd. When creating component classes, we set the initial state values for React components by mutating the this.state variable in the constructor method. If you need a review of the React component lifecycle, see the React docs.

Next, we should also change one of the <Text> components to display this.state.zip, as shown in Example 3-8.

<Text style={styles.welcome}>
  You input {this.state.zip}.
</Text>

With that out of the way, let’s add a <TextInput> component (see Example 3-9). This is a basic component that allows the user to enter text.

<TextInput
  style={styles.input}
  onSubmitEditing={this._handleTextChange}/>

The <TextInput> component is documented in the React Native docs, along with its properties. You can also pass the <TextInput> additional callbacks in order to listen to other events, such as onChange or onFocus, but we do not need them at the moment.

Note that we’ve added a simple style to the <TextInput>. Add the input style to your stylesheet like so:

const styles = StyleSheet.create({
  ...
  input: {
    fontSize: 20,
    borderWidth: 2,
    height: 40
    }
  ...
});

The callback we passed as the onSubmitEditing prop should be added as a function on the component, as shown in Example 3-10.

_handleTextChange = event => {
 this.setState({zip: event.nativeEvent.text})
}

By using fat-arrow syntax, we ensure that our callback is properly bound to the component instance. React autobinds lifecycle methods such as render, but for other methods we need to pay attention to binding. Fat-arrow functions are covered in Example A-8.

You will also need to update your import statements, as shown in Example 3-11.

import {
  ...
  TextInput
  ...
} from "react-native;

Now try running your application using either the iOS simulator or the Android emulator. It won’t be pretty, but you should be able to successfully submit a zip code and see it reflected in the <Text> component.

If we wanted, we could add some simple input validation here to ensure that the user typed in a five-digit number, but we will skip that for now.

Example 3-12 shows the full code for the WeatherProject.js component thus far.

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "" };
  }

  _handleTextChange = event => {
    this.setState({ zip: event.nativeEvent.text });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: "center"
  }
});

export default WeatherProject;

Displaying Data

Now let’s work on displaying the forecast for that zip code. We will start by adding some mock data to our initial state value in WeatherProject.js:

constructor(props) {
  super(props);
  this.state = { zip: "", forecast: null };
}

For sanity’s sake, let’s also pull the forecast rendering into its own component. Make a new file called Forecast.js (see Example 3-13).

import React, { Component } from "react";

import { StyleSheet, Text, View } from "react-native";

class Forecast extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.bigText}>
          {this.props.main}
        </Text>
        <Text style={styles.mainText}>
          Current conditions: {this.props.description}
        </Text>
        <Text style={styles.bigText}>
          {this.props.temp}°F
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { height: 130 },
  bigText: {
    flex: 2,
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    color: "#FFFFFF"
  },
  mainText: { flex: 1, fontSize: 16, textAlign: "center", color: "#FFFFFF" }
});

export default Forecast;

The <Forecast> component just renders some <Text> based on its props. We’ve also included some simple styles at the bottom of the file to control things like text color.

Import the <Forecast> component and then add it to your app’s render method, passing it props based on this.state.forecast (see Example 3-14). We’ll address issues with layout and styling later. You can see how the <Forecast> component appears in the resulting application in Figure 3-4.

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";
import Forecast from "./Forecast";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "", forecast: null };
  }

  _handleTextChange = event => {
    this.setState({ zip: event.nativeEvent.text });
  };

  render() {
    let content = null;
    if (this.state.forecast !== null) {
      content = (
        <Forecast
          main={this.state.forecast.main}
          description={this.state.forecast.description}
          temp={this.state.forecast.temp}
        />
      );
    }

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        {content}
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: "center"
  }
});

export default WeatherProject;

Because we still don’t have a forecast to render, nothing should change visually yet.

Fetching Data from the Web

Next, let’s explore using the networking APIs available in React Native. You won’t be using jQuery to send AJAX requests from mobile devices. Instead, React Native implements the Fetch API. The Promise-based syntax, shown in Example 3-15, is fairly simple.

fetch('http://www.somesite.com')
  .then((response) => response.text())
  .then((responseText) => {
    console.log(responseText);
  });

If you’re not accustomed to working with Promises, see “Working with Promises”.

We will be using the OpenWeatherMap API, which provides us with a simple endpoint that returns the current weather for a given zip code. A small library for this API is provided in open_weather_map.js, shown in Example 3-16.

const WEATHER_API_KEY = "bbeb34ebf60ad50f7893e7440a1e2b0b";
const API_STEM = "http://api.openweathermap.org/data/2.5/weather?";

function zipUrl(zip) {
  return `${API_STEM}q=${zip}&units=imperial&APPID=${WEATHER_API_KEY}`;
}

function fetchForecast(zip) {
  return fetch(zipUrl(zip))
    .then(response => response.json())
    .then(responseJSON => {
      return {
        main: responseJSON.weather[0].main,
        description: responseJSON.weather[0].description,
        temp: responseJSON.main.temp
      };
    })
    .catch(error => {
      console.error(error);
    });
}

export default { fetchForecast: fetchForecast };

Let’s import it now:

import OpenWeatherMap from "./open_weather_map";

To integrate it into our application, we can change the callback on the <TextInput> component to query the OpenWeatherMap API, as shown in Example 3-17.

_handleTextChange = event => {
  let zip = event.nativeEvent.text;
  OpenWeatherMap.fetchForecast(zip).then(forecast => {
    console.log(forecast);
    this.setState({ forecast: forecast });
  });
};

Logging the forecast here is a nice sanity check for us; for more detailed information on how to view the console output, see “Debugging with console.log”.

Finally, we also need to update the styling for our container so that we can see the forecast text render:

container: {
  flex: 1,
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: "#666666"
}

Now, when you enter a zip code, you should actually see a forecast render (Figure 3-4).

Figure 3-4. The weather app so far

The updated code for WeatherProject.js is shown in Example 3-18.

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";
import OpenWeatherMap from "./open_weather_map";
import Forecast from "./Forecast";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "", forecast: null };
  }

  _handleTextChange = event => {
    let zip = event.nativeEvent.text;
    OpenWeatherMap.fetchForecast(zip).then(forecast => {
      this.setState({ forecast: forecast });
    });
  };

  render() {
    let content = null;
    if (this.state.forecast !== null) {
      content = (
        <Forecast
          main={this.state.forecast.main}
          description={this.state.forecast.description}
          temp={this.state.forecast.temp}
        />
      );
    }

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        {content}
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#666666"
  },
  welcome: { fontSize: 20, textAlign: "center", margin: 10 },
  input: {
    fontSize: 20,
    borderWidth: 2,
    padding: 2,
    height: 40,
    width: 100,
    textAlign: "center"
  }
});

export default WeatherProject;

Adding a Background Image

Plain background colors are boring. Let’s display a background image to go along with our forecast.

Image assets are managed much like any other code asset: you can include them with a require call. We are going to use a file called flowers.png as our background image. It can be required like so:

<Image source={require('./flowers.png')}/>

The image file is available in the GitHub repository.

Just like JavaScript assets, if you have a flowers.ios.png and a flowers.android.png file, the React Native packager will load the appropriate image based on the platform. Likewise, you can use the @2x and @3x suffixes to provide different image files for different screen densities. So, hypothetically, we could structure our project directory like so:

.
├── flowers.png
├── flowers@2x.png
├── flowers@3x.png
...

To add a background image to a <View>, we don’t set a background property on a <div> like we do on the web. Instead, we use an <Image> component as a container:

<Image source={require('./flowers.png')}
       resizeMode='cover'
       style={styles.backdrop}>
  // Your content here
</Image>

The <Image> component expects a source prop, which we get by using require.

Don’t forget to style it with flexDirection so that its children render as we’d like them to:

backdrop: {
  flex: 1,
  flexDirection: 'column'
}

Now let’s give the <Image> some children. Update the render method of the <WeatherProject> component to return the following:

<View style={styles.container}>
  <Image
    source={require("./flowers.png")}
    resizeMode="cover"
    style={styles.backdrop}>
    <View style={styles.overlay}>
      <View style={styles.row}>
        <Text style={styles.mainText}>
          Current weather for
        </Text>
        <View style={styles.zipContainer}>
          <TextInput
            style={[styles.zipCode, styles.mainText]}
            onSubmitEditing={event => this._handleTextChange(event)}
          />
        </View>
      </View>
      {content}
    </View>
  </Image>
</View>

You’ll notice that I’m using some additional styles that we haven’t discussed yet, such as row, overlay, zipContainer, and zipCode. You can skip ahead to Example 3-19 to see the full stylesheet.

Putting It All Together

For the final version of the application, I’ve reorganized the <WeatherProject> component’s render function and tweaked the styles. The main change is to the layout logic, which is diagrammed in Figure 3-5.

Figure 3-5. Layout of the finished weather application

Okay, ready to see it all in one place? Example 3-19 shows the finished code for the <WeatherProject> component in full, including the stylesheets. The <Forecast> component will be the same as shown previously in Example 3-13.

import React, { Component } from "react";

import { StyleSheet, Text, View, TextInput, Image } from "react-native";

import Forecast from "./Forecast";
import OpenWeatherMap from "./open_weather_map";

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "", forecast: null };
  }

  _handleTextChange = event => {
    let zip = event.nativeEvent.text;
    OpenWeatherMap.fetchForecast(zip).then(forecast => {
      this.setState({ forecast: forecast });
    });
  };

  render() {
    let content = null;
    if (this.state.forecast !== null) {
      content = (
        <Forecast
          main={this.state.forecast.main}
          description={this.state.forecast.description}
          temp={this.state.forecast.temp}
        />
      );
    }
    return (
      <View style={styles.container}>
        <Image
          source={require("./flowers.png")}
          resizeMode="cover"
          style={styles.backdrop}
        >
          <View style={styles.overlay}>
            <View style={styles.row}>
              <Text style={styles.mainText}>
                Current weather for
              </Text>
              <View style={styles.zipContainer}>
                <TextInput
                  style={[styles.zipCode, styles.mainText]}
                  onSubmitEditing={this._handleTextChange}
                  underlineColorAndroid="transparent"
                />
              </View>
            </View>
            {content}
          </View>
        </Image>
      </View>
    );
  }
}

const baseFontSize = 16;

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", paddingTop: 30 },
  backdrop: { flex: 1, flexDirection: "column" },
  overlay: {
    paddingTop: 5,
    backgroundColor: "#000000",
    opacity: 0.5,
    flexDirection: "column",
    alignItems: "center"
  },
  row: {
    flexDirection: "row",
    flexWrap: "nowrap",
    alignItems: "flex-start",
    padding: 30
  },
  zipContainer: {
    height: baseFontSize + 10,
    borderBottomColor: "#DDDDDD",
    borderBottomWidth: 1,
    marginLeft: 5,
    marginTop: 3
  },
  zipCode: { flex: 1, flexBasis: 1, width: 50, height: baseFontSize },
  mainText: { fontSize: baseFontSize, color: "#FFFFFF" }
});

export default WeatherProject;

Now that we’re done, try launching the application. It should work on both Android and iOS, in an emulator or on your physical device. What would you like to change or improve?

You can view the completed application in the GitHub repository.