Getting Started With React Native – Hello World App for iOS & Android

In this tutorial, I will walk through how to set up React Native and run your first app. There are a few things I’ve learned along the way, that I’d like to share to help make your journey with React Native a little smoother. 🙌

Disclaimer ⚠️, there are some parts that the official documentation explains very well and I will point you there. But, for the most part, it can be quite overwhelming, so here are my quick and easy steps to creating a Hello World app.

Firstly, before we begin you should know there are two options to build apps with React Native:

1. Using the Expo CLI, which is recommended in the official guide as it builds the development environment for you. No need to install Xcode or Android Studio. However, it’s not possible to include custom native modules which can cause a lot of problems.
2. Using the React Native CLI. Requires setting up Xcode 🍎 and Android Studio 🤖.

This could turn into a whole blog post about the pros and cons of Expo vs React Native. This is a good thread on StackOverflow if you’d like to know more. 🐶

We will choose the latter option, using React Native CLI with Native Development tools 🤘. From personal experience, I’ve learned the hard way, spending hours and hours trying to get libraries to work with Expo, only to find that everything is a lot easier and quicker without it. You’ll most likely run into a library that will require native configuration (and hasn’t been added to the Expo stack), it can get messy to eject afterward.

And, it’s hard to debug issues when Expo adds another layer of abstraction as it’s essentially a wrapper around React Native.

If you would like to use Expo this is not the tutorial for you. If you would like to use the native option, I hope you find this useful. So let’s begin! ⚡️

Steps 👣

Firstly, install the React Native CLI globally and spin up a default project.
npm install react-native-cli -g
react-native init FordDev (where FordDev is the name of your project name).

You should now see a directory with the basic skeleton code. You may be wondering why React Native creates a new folder to the one you’re in 🤔. It can be annoying if you have an existing directory for your code. For example, when I was creating my FordDev project, I was already in the folder created when cloning my repo “ford-dev-app”. So go ahead and copy the contents of that folder into the root. I hope React Native makes it possible which directory to create the project in, but until then there’s an open GitHub issue.

Next, install Xcode and Android if you haven’t already. For this part, I recommend using the official getting started guide (for Xcode and for Android Studio).

This is where the steps are specific to React Native v0.60+.

iOS 🍎

It looks like for v0.60+ you now have to use CocoaPods 🍫, and manage them yourself. This cleans 🧹 up the iOS development setup so much. In older versions, it was optional and in my opinion, just added to the confusion. I’m so happy about this update, thank you React Native Dev Team (See here for more details on the changes) 👏.

react-native run-ios <- this will automatically start an emulator.

A note on managing pods, every time you add a new library that has Native code, all you need to do is run pod install. React Native v0.60+ has autolinking which handles the rest for you 👌.

You should see a screen similar to this (I’ve customized it with my own header and status bar styling) ⬇️

To run 🏃‍♀️ on a real device, do the following:

1. Plug in your iPhone via USB
2. Open .xcworkspace — the official guide mentions you can open .xcodeproj if you aren’t using CocoaPods, in our case we are.

3. Configure code signing 🖊️ — you will need an Apple Developer Account for this next step.

Go to “Signing” and select your account under the Team dropdown. This will have to be done for any additional target, in my case, I have to do it for FordDevTests.

Your Signing section should look like this, where Automatically manage signing is checked, and there's a Signing Certificate. For more information see here.

4. Make sure your device is selected and click the Run

Android 🤖

For Android, if you would like to run the app on a real device, just use the following command:

react-native run-android

To run on an emulator, you will need an emulator open. I recommend creating an emulator with Android Studio - it's free and there's no additional installation. Or there is Genymotion, which has a Personal Free Edition, Genymotion For fun.

If you choose to use an emulator with Android Studio, you will need to create one via the AVD Manager.

And set the following environment variables, I advise you to put them in your ~/.bash_profile:

export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_SDK=$ANDROID_HOME
export ANDROID_NDK_HOME=$ANDROID_HOME/ndk-bundle
export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/emulator

Some useful commands for Android (add them to your package.json):

adb reverse tcp:8081 tcp:8081
To reconnect your device to the React Native development server

adb shell input keyevent 82
To open the developer menu

Useful Resources 🔖

Official Guide: https://facebook.github.io/react-native/docs/getting-started
React Native Blog: https://facebook.github.io/react-native/blog/
React Native Repo: https://github.com/facebook/react-native

I’ve created an example project here ✨, feel free to use it as you wish. I will be using it for all my tutorials, building on the basic out-of-the-box features.

Hope you liked this and found it useful. Please give it a clap 👏 or leave a comment ✍️if you did or have any questions 🙋.

Originally published at https://ford.dev on August 19, 2019.