React Native is the hot favorite of developers who want to build a cross-platform mobile app.
Based on the “learn once, write anywhere” philosophy, React Native has no single way of developing applications. You can install it on different operating systems to know it better.
In this post, we’ll focus on installing React Native on Ubuntu 17.10.
Install Android Studio and run Java-based “Hello world” app for Android. Proceed only when you are done with these steps.
2. Installation Packages
You need to have the following installation packages:
– React Native
3. Start Installing Everything One by One
1. Install NodeJS
# sudo apt-get install -y build-essential # curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash # sudo apt-get install -y nodejs
2. Install NPM
After installing NodeJS, proceed to install NPM or the Node Package Manager. You can check if it has already been installed or not using these commands:
# which npm
When NPM is already installed, this will return –
If not, it will return –
#npm not found.
To NPM, run the following command in terminal:
# curl http://npmjs.org/install.sh | sh
3. Install Autotools-dev
Before you go ahead and install Watchman, you need to first install Autotools-dev, which is a package that accompanies several other tools i.e aclocal automake. To install it, copy and paste the following commands in the terminal:
# sudo apt-get install autotools-dev # sudo apt-get install aclocal # sudo apt-get install automake
4. Install Watchman
Once you’re done installing Autotools-dev, go ahead and install Watchman, which is a tool developed by Facebook for watching the file system. It is necessary to install the tool if you are aiming for best results.
Here are the commands you need to copy and paste in the terminal to install Watchman:
# git clone https://github.com/facebook/watchman.git # cd watchman # git checkout v4.9.0 # the latest stable release # ./autogen.sh # ./configure # make # sudo make install
5. Install Flow
The command to install Flow are:
# wget https://github.com/facebook/flow/releases/download/v0.62.0/flow-linux64-v0.62.0.zip # unzip flow-linux64-v0.62.0.zip # cd flow # sudo mv flow /usr/local/bin/flow
Note: You can put the flow executable anywhere on your PATH. It does not have to be in /use/local/bin
6. Install React Native
When you’re done with steps 1 through 5, the next step is to install React Native. It’s important to note that you will need to make use of sudo to install React Native as a root. The reason behind this is that we’re going to install it globally. Here’s the code, which you need to use:
# sudo npm install -g react-native-cli
Users who’ve installed NPM using a different method can proceed to install React Native as a normal user with this code:
# npm install -g react-native-cli
When you’re done with installing all the prerequisite packages, you can go ahead and start creating your own app(s)!
Let’s create demo project in React Native for test all of the above installations.
4. Create Project
Start by creating an app project with the following command:
# react-native init MyFirstDemoApp
However, you need to remember that it may take several minutes to create a project initially.
5. Setting Up an Android Device
The next step is to set up an Android device and run the project on the same. You can run a project in a real Android device or by using an emulator.
We chose to go ahead with the tutorial by using a real Android device belonging to a team member.
Begin by plugging in the device and checking the manufacturer code by using lsusb command:
# lsusb Bus 002 Device 002: ID 8087:8000 Intel Corp. Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 001 Device 002: ID 8087:8008 Intel Corp. Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub Bus 003 Device 003: ID 046d:c077 Logitech, Inc. M105 Optical Mouse Bus 003 Device 002: ID 046d:c31d Logitech, Inc. Media Keyboard K200 Bus 003 Device 006: ID 22b8:2e76 Motorola PCS Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
There were a number of devices that were connected with USB. We went ahead with our Android device, which was:
Bus 003 Device 006: ID 22b8:2e76 Motorola PCS
From this line of code, you’ll require these four digits, which are a part of the device ID:
22b8:2e76 – Device ID
22b8 – First four-digit identifier for Motorola
Next, you need to copy and paste the following code in the terminal:
# adb devices
Following this, you’ll be able to view the complete list of devices attached.
6. Running the Project
Start with the MyFirstDemoApp project, for which you’ll require two terminals to run the code.
Here’s the code on one terminal:
# cd MyFirstDemoApp # react-native run-android
A failed code indicates that the default React Native port is being used by other services in the system. You can then proceed to try the following code:
# adb reverse tcp:8081 tcp:8081
If this code runs successfully, you can make the following changes to the app:
-Open index.android.js in your text editor
-Change “Welcome to React Native” to “My First Demo APP in React Native on Android”
-Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see the change
-Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app’s logs
Well, that’s it! You’ve successfully installed React Native on Ubuntu 17.10. We hope that it was a successful attempt for you, just like it was for us. Let us know how did you fare in a comment!