Software systems to innovate and grow

React Native Example App Tutorial

By Engineering Team January 10, 2019 10 mins read

An International Space Station Image Viewer

React Native (RN) is one of the most exciting tools in the ever-expanding landscape of mobile development technologies. Many frameworks give developers the ability to build cross-platform apps with web technologies (think Ionic, Flutter, Xamarin, etc.), but none can boast the same performance benchmarks, vibrant community, or adoption rate, making React Native a viable option for nontrivial apps.

Being a Facebook framework, they are unsurprisingly using it for their main iOS and Android mobile apps, as well as other platforms like Instagram, Facebook Ads Manager, and Facebook Analytics. Many other big companies with robust active user rates have gotten on board with React Native, too, though, including Walmart, Pinterest, Uber, Tesla, and Skype.

Getting going with React Native can be tricky at first, but once you’re set up, you might be surprised at how quickly you can get a basic app off the ground.

Follow along below to see how we got a basic International Space Station image viewing app together by making just a few changes to a single file in React Native’s starter template. When we’re done, we’ll have an app that looks like the image below.

React Native Example App Tutorial

Note: This tutorial assumes some basic knowledge of JavaScript and ES6 syntax. If you are not familiar with both, check out Eloquent JavaScript

Up and Running

First, let’s cover some basic requirements for this tutorial.

We’re going to be building an iOS app, and right now, the only way to do that in RN is on a Mac. So, you’ll need access to one to complete the tutorial, as is.

Note: With a couple of initialization changes, you could easily complete this tutorial using the fantastic Expo online simulator and toolchain, including a CLI and an SDK. Keep in mind that you would almost never use Expo to build a real-world app, but it is a great way to get going, especially if you don’t have access to an Apple environment.

Installing Requirements

Also, you’ll need to install a few requirements to start using React Native locally. The React Native site has the steps listed, but briefly, you’ll need:

Once you have all of these applications installed, you should be ready to initialize a new React Native project. At the command line, type:

Once that has finished running, you should have a directory full of items looking something like this:

Note: The other way to initiate a React Native project from the command line is by installing the aforementioned Expo toolchain option, expo-cli. If you’re interested in using that to get going, the official docs have a great tutorial.

Running the Initial App

Let’s change into that directory and fire up the iOS simulator:

You’ll see a lot of action in the terminal, and then, your iOS simulator will pop up along with a Metro Bundler window, the JavaScript bundler for RN. The simulator will look like this once fully loaded:

React Native Example App Tutorial

So, now we have a running app in the simulator. It’s not much to look at, but it makes for a decent starting point. Let’s open up the App.js file and see what we have in there:

This is the file creating the welcome message in our simulator, and this is where your React knowledge starts to kick in.

Scanning through the code, we see:

  • Imports
    • One line importing React and {Component}
    • One line importing four components from React Native
  • instructions variable, which uses the RN Platform component to show different instructions for iOS and Android
  • A Flow type argument: type Props = {};
    • Flow is a static type checker for JavaScript. We won’t be using it in this tutorial, but it’s a must for anything nontrivial in React Native or React.
  • Next, we have an App component that returns some JSX, which is an XML-like syntax extension of JavaScript. JSX is used in the React ecosystem to describe a UI when rendering a component. In this case, it’s showing the rest of the text we see on the screen along with the instructions variable.
  • Last, we have a styles variable that uses the StyleSheet RN component to, you guessed it, style our UI. It works very much like standard CSS.

Building Our App

Now that we’ve reviewed what React Native gives you to start, let’s delete a bunch of it.

We’ll modify the comments, remove a few RN imports that we won’t be needing, delete the instructions variable, clear out all the JSX, and also, delete two of the three style objects in styles.

Alright. Now that we have a relatively blank slate, let’s review what we want our app to do:

  • We want to pull in some images of the International Space Station from the web.
  • We want to display one image at a time.
  • We want to be able to cycle through them in both directions by touching either the left or right side of the current image.
  • We want to include a caption for each image.

Pretty straightforward, with just enough complexity to make it interesting. Let’s get going.

Grabbing Images

We’re going to grab a few images from Imgur and put them in an array of objects. Each one has the URL of the image we want, and a caption for each one.

Styling Our App

Before we start in on the logic for our app, let’s make a few style changes so it looks right when we start pulling everything together.

First, we need to change the background color. We really don’t need to, technically, but white is a little boring, so we’ll add a new hex value to backgroundColor.

Then, we’ll add two new style objects for our images and captions.

React Native uses flexbox to arrange the layout. The numbers determine which component to prioritize when rendering. We’re giving the container priority over the image since we want the image inside the container when the app renders.

The Class Constructor & Initializing State

If you’re familiar with React, you already know all about the class constructor, but if not, let’s quickly cover what it is and why we use it.

The class constructor is used to initialize local state inside a component. A component’s state is its rendered value. It’s what’s currently happening in the UI.

Once we initialize the App component’s state, we can use it to make changes to our UI and keep track of those changes.

Let’s set our state to index: 0, so we can use the first image as a starting point in our array of images.

Next, we need to create an image variable inside the render() method that links our state to the first image in the StationImages array.

We’ll also add some JSX that will show our first image on the screen.

Note: We’re using ImageBackground in the JSX, which is a React Native component for displaying nested images inside the View component. Make sure you add it to your React Native imports at the top, or you’ll get an error.

Events & Changing State

In order to get the functionality for our app that we want, we need to add another value to our state and a couple of event methods to the App component.

  • newImage(event)
  • onNewLayout(event)

First, we added imageWidth to our initial state and set it to null. This will help us keep track of the different image widths as we cycle through them on the screen.

Next, we created a newImage event, which takes the current index and imageWidth of the current image, calculates where the image is touched (on the left half or the right half of the image), and either moves forward or back one image in the array.

The onNewLayout event is simply there to update imageWidth with (that’s right) the newest image’s width and keep track of it.

TouchableHighlight & Updating JSX

Now, we’re ready to make the changes to our UI so we can use our methods.

We’ll be using TouchableHighlight, which is a React Native component used to wrap touchable areas. Make sure you add it to your React Native imports at the top and let’s see it in action:

We’re using the onPress handler in TouchableHighlight to bind this to newImage. This is what connects the code we just wrote to the UI.

Also, notice the onLayout event handler in ImageBackground, which we’re using to update our onNewLayout event. onLayout is a React Native method that is called anytime the app layout is rendered.

Review & Recap

At this point, you should have a working app that is showing our first image of the space station and allows you to click on either half of the images to see a new picture.

Just so you don’t have to scroll back up the page, it should look like this:

React Native Example App Tutorial

And, you should have an App.js file that looks like this:

And, that concludes our React Native tutorial!

This is a very minimal example, but it should give you an idea of the framework’s possibilities and what you can accomplish with just a few changes to a single file.

We hope this gets you excited to learn more about React Native and how you can leverage your JavaScript skills to build high-performance cross-platform apps.

If you would like to learn more, the React Native site is a great starting point. Also, it is an open source project and one known to be friendly to first-timers, so be sure to check out the repo to see if you can help out with the project!

Happy coding!