Image is loading ...

How to Install and Setup React Native on Ubuntu 18.04.1 LTS (Bionic Beaver)

Install and Setup React Native on Ubuntu 18.04.1 LTS (Bionic Beaver) | React Native framework is getting more attention from developers who want to build cross-platform mobile applications (Android/ios). Ubuntu, one of the most popular Linux distribution is on its another LTS (Long Term Support) version named Bionic Beaver. Here, I am going to explain how to install and setup React Native on Ubuntu 18.04.1 LTS (Bionic Beaver) with a simple tutorial. You could also find an installation tutorial in the official React Native page. But I faced some issues when following it and some of the steps are a little bit confusing. This is the reason behind the making of this tutorial.

Installation

1. Install Nodejs

Since React Native is a framework of JavaScript, it requires to have Nodejs(A JavaScript runtime) installed.

On Terminal,

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs

2. Install NPM

NPM will be installed with the Nodejs installation itself. However, you can install the latest version for NPM.

On Terminal,

sudo npm install [email protected] -g

3. Install JDK

Usually, Native Android apps build in Java. So Java Development Kit is required.

On Terminal,

sudo add-apt-repository ppa:openjdk-r/ppa
sudo apt-get update
sudo apt-get install openjdk-8-jdk

4. Install Android Studio

Android studio needs to be installed for working with React Native development. You can easily download it from

https://developer.android.com/studio/index.html

5. Install Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 6.0 (Marshmallow) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

The SDK Manager can be accessed from the Welcome to Android Studio screen. Click on Configure, then select SDK Manager.

SDK manager -> SDK platforms

then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 6.0 (Marshmallow) entry, then make sure the following items are all checked:

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image
CONFIGURE ANDROID_HOME ENVIRONMENT VARIABLE

The React Native tools require some environment variables to be set up in order to build apps with native code.

Copy the following lines

export ANDROID_HOME=$HOME/Android/Sdk 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/platform-tools

On Terminal,

sudo nano $HOME/.bash_profile

Paste the copied code on the terminal screen.

Press Ctrl + O (Write out)
Then press Enter
And press Ctrl + x (exit)

6. Install Watchman

A Watchman is a tool used for watch files and record when they change. It is essential where you need Live reloading of apps when code changes.

On Terminal,

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

7. Install React Native CLI

You can easily install react-native CLI using NPM.

On Terminal,

sudo npm install -g react-native-cli

9. CREATING NEW APPLICATION

Using react native CLI, you can create a new React Native project.

On Terminal,

react-native init AwesomeProject

11. Choosing the Code Editor

You can choose your own favorite code editor for editing your project. But in my case, I choose Visual studio Code(VS code).

https://code.visualstudio.com/#alt-downloads

From the above link, you can download VS code .deb file compatible with Ubuntu/Debian.

12. Start Editing

After installing VS code, direct to your project folder.

On Terminal,

cd AwesomeProject

Open your project using VS code by just typing the below command.

On Terminal,

code .

Form now on, you can use VS code Terminal instead of native Ubuntu Terminal because you can use the Terminal without going out of your code editor.
(Go to View -> Integrated Terminal from VS code’s top menubar)

13. Running the Application on Our Android Device

Now you need to run the project on your Android phone(It is recommended you to use Android 6.0 and devices, but lower versions are also compatible).

On your mobile device,

Go to Settings->About

You can see a Build Version menu there. Continually click the option until it enables the Developer options

Now, return to Settings. You can see the Developer options menu there. Enable it. Also, enable the USB debugging option in it.

Connect your mobile device with your Ubuntu system using the USB port. Type the below command to check whether your mobile device is connected or not.

On Terminal,

adb devices

Now, From the VS studio terminal, run

On Terminal,

react-native run-android

Have a nice code !

You Might Also Like
7 Comments
  • CHARLES
    says:

    Thanks for the great tutorial. Everything went until I tried react-native run-android. I got the following error would appreciate any form of help thanks:
    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring project ‘:app’.
    > The SDK directory ‘/home/user_directory/Android/Sdk’ does not exist.

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

    * Get more help at https://help.gradle.org

    BUILD FAILED in 21s

    error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with –verbose flag for more details.
    Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring project ‘:app’.
    > The SDK directory ‘/home/user_directory/Android/Sdk’ does not exist.

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

    * Get more help at https://help.gradle.org

    BUILD FAILED in 21s

    • Syamlal CM
      says:

      On your terminal, type

      sudo nano $HOME/.bash_profile

      Copy the following lines

      export ANDROID_HOME=$HOME/Android/Sdk 
      export PATH=$PATH:$ANDROID_HOME/tools 
      export PATH=$PATH:$ANDROID_HOME/platform-tools

      Paste the copied code in the nano editor screen.

      Press Ctrl + O (Write out)
      Then press Enter
      And press Ctrl + x (exit)

  • mr-programs
    says:

    Android 6.0 (Marshmallow) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

    ive heard tho that 6.0 isnt specifically required but the minimum required version, ive read that the most up to date version works and is recommended

    could you confirm this?

    x

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: