React Native Installation

Aqeeb Imtiaz Harun — Sun, 05 Jan 2020 06:24:49 +0000

The purpose of this guide is to demonstrate how to install & setup React Native in Ubuntu 18.04.
This article was partly inspired by this tutorial:

Install instructions:

Install Node.js:

sudo apt-get install nodejs

Install nvm

sudo apt-get update

Install** c++ compiler*. It may already exists, but just in case.*

apt-get install build-essential libssl-dev

Install nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Reload bash

source ~/.bashrc

After installation close and reopen terminal and check nvm version

nvm --version

Install node

Install latest node

nvm install node

Set default node version for nvm

nvm alias default node

Check version of node and npm

node -v
npm -v

Install Android Studio

Install Java

sudo apt install openjdk-8-jre openjdk-8-jdk

Install android studio

In ubuntu 18.04, snap command is provided which is
containerised software packages that are simple to create and
install on all linux distributions.
https://snapcraft.io/

sudo snap install android-studio --classic

While installing Android Studio use Classic Snap version

--classic

Configure build path in your .bash_profile or .zshrc

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

Now check whether the paths were exported using:

echo $PATH

Set alias to shorten command to run emulator

alias run-emu="$ANDROID_HOME/tools/emulator @pixel2"

Reload bash_profile or .zshrc

source ~/.bash_profile or source ~/.zshrc

Generate emulator & run emulator

Note:

In order to make avdmanager command to work, you should start android-studio and complete installation first.
Also system-images should be installed Type below command to install the system image. > sdkmanager --install "system-images;android-27;google_apis;x86"

Create avd device

avdmanager create avd -n device1 -k "system-images;android-27;google_apis_playstore;x86" --device 'Nexus 5X

List emulators. You will see device1 as a result.

emu -avd -list-avds

Run emulator

emu -avd device1

Install react-native

Install react-native-cli using npm.

npm install -g react-native-cli

Create react-native project via react-native-cli.

react-native init NewProject
cd NewProject

Install Dependencies:

To install all node module dependencies, run:

npm install

Start Server

Navigate to project root folder & run:

npm start

To clear cache & run server:

npm start -c

Run React Native app on emulator/local device:

According to official documentation , after starting the local server, run:

react-native run-android

To run the app on a specific device:
Firstly, Find the device or emulator connected to PC

adb devices

List of devices attached
$device_name    device

Then, run the app specifically to that device

react-native run-android --deviceId=$device_name

Generate Debug APK

To generate a debug apk of the app execute the following commands.

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
cd android
./gradlew assembleDebug

You'll find the generated APK as app-debug.apk in {project_root}/android/app/build/outputs/apk/debug

== Common Errors: ==

Trouble shooting with permission (Mostly seen on Android Studio):

sudo apt install qemu-kvm
sudo adduser <your_username> kvm
sudo chown <your_username> /dev/kvm

If we face the following error:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
If you face that one or more modules are missing, re-run

npm install
If you face something like the following when running the app on device:

Simply, navigate to root_folder/android/app/src/main/res and delete the raw folder and all the drawable-* folders
Then try to re-run the app again.

If you face static image files missing in your bundled application, simply run this command:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

Then run the following command to compile your app to APK file.

cd android && ./gradlew clean assembleDebug

When generating debug APK, if you face this error: error EISDIR: illegal operation on a directory, open 'android', kindly follow this amazing article

Forem: Aqeeb Imtiaz Harun

React Native Installation

Install instructions:

Install nvm

Install node

Install Android Studio

Install Java

Install android studio

Generate emulator & run emulator

Install react-native

Install Dependencies:

Start Server

Run React Native app on emulator/local device:

Generate Debug APK

== Common Errors: ==