All Articles

First steps with React Native

First steps with React Native

What is React Native?

React Native Homepage

React Native lets you build mobile apps using only JavaScript.

In a nutshell, React Native is a framework that allows you to write your app code in JavaScript and React, and then compile to a fully native app.

Why use React Native?

If you know JavaScript well, don’t know Swift, want to build a fairly simple native app, and might want to target iOS and Android, then React Native might be a good fit. It can really speed up development.

How long are we talking?

It took me just a few hours to get a basic app with 3 screens and Google maps running on my phone. That’s pretty great for my first exposure to native apps in a long time.

Why not use React Native?

When you’re targeting a Native app, there are usually 3 options:

a) 100% native. This means entirely separate codebases for iOS and Android. This takes the longest and is the most expensive. It also yields the best performance. Complicated and resource intensive apps (like games) are generally built like this.

b) 50–90% native. Frameworks like React Native allow you to use web technologies, and compile that to a native app. Pro: You can share ~70–80% ish of the code between iOS and Android. Con: The size of the app can be a little larger, and performance usually won’t be as fast as a) but is often sufficient. Other hybrid frameworks include Phonegap and Cordova.

c) 10% native. You have a native wrapper and load a website within it (called a webview). This is a good option for very simple apps, and users usually don’t realize it’s a webpage. Pro: You can share 90% of the code between iOS and Android. Con: Anything beyond simple forms becomes a lot harder. Maps and things like that are more difficult and may not “feel” native.

Getting started

Create a React Native app

Create React Native app GitHub repo

Create a React Native app is hands down the simplest way to get started with React Native.

Set up your project

How to setup a new project with CRNA

I usually use npm at work, but prefer Yarn for React Native projects. Might be silly, but Facebook runs both Yarn and React Native, and they work really smoothly together.

Once setup is done you see a really great success message offering you several options:

CRNA success message

Hello world: Run it on my simulator

If you’re on a mac, it’s really simple to your new app running on your laptop in the iOS simulator. The simulator let’s you test iOS apps you’re building without needing a phone. Very useful.

$ yarn run ios

This command will start your simulator. You may need to update some xcode dependencies first, if prompted.

You can see the simulator running on the right

The code for our 1 screen app

If everything went well, you can now see the simulator running with the home screen of your app. You can open App.js to modify the content, save, and 💥 within seconds you see your new content. Amazing. On the web we are used to such fast refresh times, but this is not at all common with native apps.

Run it on my phone

Running the app on a simulator is useful, but before long you’ll want to try it on your phone.

First, you’ll need to install the Expo app. Expo is a toolchain for React Native that makes developing React Native apps easier. The Expo app for iOS / Android makes it really easy to test the app your phone.

Next, you’ll run $ yarn start or $ npm start to start your app (if you started the app earlier, you’ll want to stop that process first):

Success message after the app starts

After you start the app you see instructions for how to connect Expo running on your phone to your app running on your computer.

For my iPhone I press s and send the url to my phone. The url opens expo:

The url sent to my phone opens my local app in Expo on my iPhone

This is pretty slick! Any changes on my computer show up on my phone within seconds. Wow. ✨

Multiple screens and a map

So we now have a Hello World running. Great. Let’s try something a little fancier.

We now have a 1 screen app running. Let’s add more screens.

Here’s what our code for 1 screen looks like:

The code for our 1 screen app

How do we go from this to multiple screens? The simplest solution I’ve found is React Navigation.

Multiple Screens with React Navigation

First we’ll install the dependency with $ yarn add react-navigation or $ npm i --save react-navigation.

Then we’ll replace our single app component with the following code:

Stubs out 2 screens

This change will result in the initial screen (or Home screen defined as the intialRouteName property at the bottom) showing when the app loads. So now you see a home screen with the words Home Screen, but no sign of how to navigate.

We can add a <Button> to navigate between screens:

Buttons tied to \`navigation.navigate\` allow us to switch screens

Here’s the full code:

Works like a charm:

Conclusion

We now have a simple React Native app running both in a simulator and our phone. Great! Next up, we can start adding more complex components like Maps.