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.
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
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
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
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
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
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.
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:
Intel x86 Atom_64 System Imageor
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.
React native requires environment variables to point it to the installation of the android studio.
ANDROID_HOMEshould point to your android/sdk installation.
PATHyou 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
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.
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.
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
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.