How to install React Native on Ubuntu 17.10

React Native is the hot favorite of developers who want to build a cross-platform mobile app.

The technology lets them use JavaScript along with Facebook’s React Library for robust integration with the native platforms and enhance performance.

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.

Walkthrough

1. Prerequisites

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:
– NodeJS
– NPM
– Autotools-dev
– Watchman
– Flow
– React Native

3. Start Installing Everything One by One

1. Install NodeJS  

To install NodeJS, which is a popular javascript implementation, you’ll need to take the following steps:-Open a terminal (Ctrl+Alt+ t)-Enter the following commands:

# 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 –

# /usr/local/bin/npm

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 

Flow will let you easily add the static type checking to JavaScript. Additionally, it helps prevent bugs and also, facilitates better code documentation. In fact, many React Native documentation and source code already use it and therefore, you need to install it right away.

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.

TA9300GLMK  device

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

Conclusion

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!