Getting Started With React Native

Helena Ford

Helena Ford / August 19, 2019

6 min read

Hello World

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!


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 the steps using the official getting started guide (for XCode and for Android Studio).

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


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).

npm install
sudo gem install cocoapods
cd ios
pod install cd ..

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:

Screen Shot

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.
Screen Shot
  1. 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.

Screen Shot
  1. Make sure your device is selected and click the Run
Screen Shot


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

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.

Screen Shot
Screen Shot
Screen Shot
Screen Shot
Screen Shot
Screen Shot

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

export ANDROID_HOME=$HOME/Library/Android/sdk
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:

React Native Blog:

React Native Repo:

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.

Share This Post

Get my posts in your inbox!

I create helpful content about react native development, and open source software.

Subscribe to my newsletter and I'll let you know when I publish new content.

No spam, you can unsubscribe at any time.

- subscribers