First steps with React Native
First steps with React Native
Why use React Native?
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.
Create a React Native app
Create a React Native app is hands down the simplest way to get started with React Native.
Set up your project
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:
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.
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):
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:
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:
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:
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:
Here’s the full code:
Works like a charm:
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.
Published 16 Jun 2018