Log In

Starting with React Native


by Yariv Katz

Before we start learning writing native mobile apps using react native, we have to take care of a few logistics first. We need to Install some software in order to start developing with react native. Our goal in this tutorial is to install the needed software, and manage to run our native app on an android or ios simulator, and also manage to run our native app on a physical device.

Installing node

Rather you are running on windows or mac, and rather you are targetting android or iOS you have to start by installing node. in google search type nodejs and hit the first link, or click on this link: NodeJS Homepage. Click on the big green button to download the installation file and follow the instructions to install nodejs on your computer. To verify that the installation is successfull open the CMD on windows or the terminal on mac and type:

> node -v
> npm -v

Make sure that your node version is above 8.3 and npm version is above version 6. Mac users can also install node using Homebrew

> brew install node

Mac Users: Install watchman

This step is for mac users only, so windows users can skip ahead. When the src files of our react native project will change, react native will automatically detect changes, recompile and reflect the changes in the simulator or device. To do this react native is using an app called watchman which watch files and take action when they change. To install watchman we will use Homebrew so in the terminal type:

> brew install watchman

And if the installation we successful you will be able to get the version of the installed watchman by typing in the terminal:

> watchman -v

Android development only: Install JDK

Rather you are developing for android on a mac or windows, we will use Java to develop for android and therefor we will need to install Java Development Kit (JDK). To install JDK click the following link: Oracle JDK. Download the installation file in the link above activate the file and follow the instructions to install JDK. If the installation is successful then you can go to the terminal or cmd and type:

> java -version

Windows users only: Install python2

This step is only if you are running react native using a windows pc. You will have to install python2. go to this link: python2. Download the windows installer, click the file and follow the instructions to install python2 2.7.16. If the installation is successful you will be able to open the CMD and type:

> python --version

Mac users and iOS developers only: Install XCode

This step only applies to mac users that want to develop for iOS as well. You will need to install XCode which is the IDE tool for developing iOS mac which also arrives with iOS simulators we can use to run our app. We install XCode by using the Mac App Store so follow this link to install XCode: Install XCode. If the installation is successful you will be able to launch XCode after installing it. React native tools will compile the app and run the simulator using XCode command line tools so you will have to install that as well. After installing XCode, open XCode, in the top menu choose XCode -> Preferences... Click the Locations tab and in the Command Line Tools combobox choose the most recent one. To verify that XCode Command Line Tools is installed, you can open a terminal and type:

> xcode-select -p

Android developers only: Install Android Studio

Rather you are a windows user or a mac user, if you want to develop for android you will need to install Android Studio which you will use to develop some native code that you will not be able to develop with react native. Installing android studio is simply going to this link: Download Android Studio. Downloading the installation file and following the install instructions, choose custom installation and make sure the following boxes are checked.

  • Android SDK
  • Android SDK Platform (Make sure Android 9.0 SDK is installed)
  • Performance (Intel ® HAXM)
  • Android Virtual Device

After you are finished installing Android Studio the starter dialog will appear. At the bottom of the dialog click the configure and choose SDK Manager. Android 9.0 (Pie) should be checked, and if not make sure you check it. Hightlight Android 9.0 (Pie) and mark the option at the bottom to Show Package Details. Make sure the following are checked:

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Now click the tab of the SDK tools and choose to Show Package Details and make sure that in the Android SDK Build-Tools 28.0.3 is selected.

Make sure you check their checkboxes and click apply and go over the installation.

Android developers only: Environment Variables

React native requires environment variables to point it to the installation of the android studio.

  • ANDROID_HOME should point to your android/sdk installation.
  • PATH you will need to add some folders to your PATH environment variable. \Android\Sdk\platform-tools

On mac you will need to set all the following:

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

You can also place that code in your .bash_profile

Starting a new React Native app.

Our next step is creating a new react native application and managing to run the app in an android or iOS simulator and later on a physical device. To start a new react native project we will use the react native cli. In your terminal or CMD type:

> npx react-native-cli init HelloWorld

You will notice that the folder HelloWorld is now created. Inside that folder there is an android folder with the android native project and ios with the iPhone native project.

Mac users only: Running the project on iOS simulator

Now to run our project on iOS simulator Open the HelloWorld.xcodeproj using XCode and hit the play button to compile and run on a simulator, you can also choose to run the app on your device.

Running on Android

Now to run the android application on the simulator you can open android studio and look for the top bar icon to open the AVD Manager which manages the open simulators. Launch one of the simulators. After the simulator launches you can type in the terminal or cmd in the HelloWorld folder the following:

> npx react-native run-android

You will see the app launch on the simulator and if you have a physical device connected you should see the same app running on your phone

Summary

The steps we took here are the first steps we need to take in order to learn how to work with react native. Now that it's behind us let's start experimenting and building beautiful cross platform performant apps.