React Native Development: Environment Configuration in Manjaro ⚛
By: Eder Chamalé
Tags: React Native, Manjaro, Android, Apk, Nodejs

Prerrequisites

Node LTS (Current 14.15.1)

You can install Node LTS using NVM. NVM is a tool to manage multiple versions of Node in the same machine. For more information, you can refer to the official docs. Check your Node installation with this:

node -v

Output

v14.15.1

Java

You need to install Java to be able to compile APK’s and run applications in emulators/devices. OpenJDK works fine in Manjaro and you can install it like this:

sudo pacman -S jre-openjdk-headless jre-openjdk jdk-openjdk openjdk-doc openjdk-src

You can check if Java was successfully installed:

java -version

Output

openjdk version "11.0.8" 2020-07-14

OpenJDK Runtime Environment (build 11.0.8+10)

OpenJDK 64-Bit Server VM (build 11.0.8+10, mixed mode)

Android Studio

To install Android Studio in a smooth way, you can install it from the Arch Linux repo. To do this first add the Arch Linux repo in your Pacman configuration, open the /etc/pacman.conf file with your favorite editor, for example with vi:

sudo nvim /etc/pacman.conf

Add the following lines in this file:

Save changes and then update your dependencies, add the Arch repo keyrings and then install Android Studio:

sudo pacman -Syy && sudo pacman -S archlinuxcn-keyring && sudo pacman -Syu android-studio

Check your Android installation by running:

echo $ANDROID_HOME

Output

/home/julian/Android/Sdk

And then check that the path exists:

ls $ANDROID_HOME

Output

build-tools licenses platforms skins system-images

emulator patcher platform-tools sources tools

You need to add some required packages to be able to build/debug your applications, to do this open Android Studio and click on Configure->SDK Manager

You need to install the packages Android SDK Build-Tools, Android Emulator (if needed) and Android SDK Platform-Tools. Click on the SDK Tools tab and check these packages then click apply.

You can also add SDK target platforms (recommended). To do this click on the SDK Platforms tab and then check your desired platforms. In my case I’m using a Moto G6 Play device, therefore I’ve checked Android 8:

Watchman

You need to install wacthman , from the docs Watchman is defined as:

Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change.

This tool is used to debug your APK and reload your changes. To install it run:

sudo pamac install watchman

React Native Project

Finally let’s create an empty react-native project. The official docs recommend to use npx :

npx react-native init MyAwesomeApp

The app name should be alphanumeric, characters like - , . , or anything else are not allowed.

Once your app is created, mount the app folder and then install the required dependencies:

cd MyAwesomeApp

npm install

Running your App

I will show you how to run app in a physical device. First connect your device using a USB cable and then run the following command:

lsusb

Output

Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub

Bus 001 Device 004: ID 138a:0011 Validity Sensors, Inc. VFS5011 Fingerprint Reader

Bus 001 Device 003: ID 04f2:b5c0 Chicony Electronics Co., Ltd Integrated Camera

Bus 001 Device 002: ID 8087:0a2b Intel Corp. Bluetooth wireless interface

Bus 001 Device 007: ID 22b8:2e81 Motorola PCS moto g(6) play

Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

Look for your device in the output and then copy the first four digit/letters that identify your device, in my case 22b8 and then you need to register your device in the Android USB devices:

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

Make sure you’ve enable USB Debugging settings.

Now run:

adb devices

Verify that your device is listed in the command output. If everything is successful you will be able to run your app. Open two terminals/tabs and run:

Terminal #1

npx react-native start

Output



###### ######

### #### #### ###

## ### ### ##

## #### ##

## #### ##

## ## ## ##

## ### ### ##

## ######################## ##

###### ### ### ######

### ## ## ## ## ###

### ## ### #### ### ## ###

## #### ######## #### ##

## ### ########## ### ##

## #### ######## #### ##

### ## ### #### ### ## ###

### ## ## ## ## ###

###### ### ### ######

## ######################## ##

## ### ### ##

## ## ## ##

## #### ##

## #### ##

## ### ### ##

### #### #### ###

###### ######



Welcome to React Native!

Learn once, write anywhere







To reload the app press "r"

To open developer menu press "d"

If an error is thrown, please go to the Tips and Tricks section.

Terminal #2

npx react-native run-android

Output

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.

Jetifier found 1005 file(s) to forward-jetify. Using 4 workers...

info JS server already running.

info Installing the app... > Task :app:stripDebugDebugSymbols UP-TO-DATE

Compatible side by side NDK version was not found. > Task :app:installDebug

09:43:00 V/ddms: execute: running am get-config

09:43:00 V/ddms: execute 'am get-config' on 'ZL4223XB6S' : EOF hit. Read: -1

09:43:00 V/ddms: execute: returning

Installing APK 'app-debug.apk' on 'moto g(6) play - 8.0.0' for app:debug

09:43:00 D/app-debug.apk: Uploading app-debug.apk onto device 'ZL4223XB6S'

09:43:00 D/Device: Uploading file onto device 'ZL4223XB6S'

09:43:00 D/ddms: Reading file permision of /home/julian/git/wally/WallyApp/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r--

09:43:02 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"

09:43:14 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'ZL4223XB6S' : EOF hit. Read: -1

09:43:14 V/ddms: execute: returning

09:43:14 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"

09:43:15 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'ZL4223XB6S' : EOF hit. Read: -1

09:43:15 V/ddms: execute: returning

Installed on 1 device.

Use '--warning-mode all' to show the individual deprecation warnings.

See Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 18s

65 actionable tasks: 2 executed, 63 up-to-date

info Connecting to the development server...

info Starting the app on "ZL4223XB6S"...

Starting: Intent { cmp=com.wallyapp/.MainActivity }

And then you can see that your App is deployed to your device:

Tips and Tricks 🚀

Starting your app

If the following error is thrown when starting your app:

The triggering condition was at timestamp=1444001279: inotify-add-watch(/home/oren/projects/react-native/HackerNews-React-Native/node_modules/react-native/node_modules/yeoman-generator/node_modules/download/node_modules/caw/node_modules/get-proxy/node_modules/rc/node_modules/.bin) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl

You need to increase the number of watches in the OS:

echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances

&& watchman shutdown-server

Debugging your app

You can make changes to your app and it automatically will reload in your app, however sometimes these changes are not reflected and you need to manually reload your app by pressing R in the starting terminal. You also can close and reopen you app in your device.

If the emulator is launched instead of using your device, just close it then run adb devices to make sure your device is ready and try again.

Deploying your app

You can deploy your APK to your device by running:

npx react-native run-android --variant=release

You can find your APK (run this command in the root folder of your project):

ls android/app/build/outputs/apk/release

Output

app-release.apk output.json

That’s all folks! Happy coding!