React Native Development: Environment Configuration in Manjaro ⚛
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.1Java
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-srcYou 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.confAdd the following lines in this file:
[archlinuxcn]
Server = https://repo.archlinuxcn.org/$archSave 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-studioCheck your Android installation by running:
echo $ANDROID_HOME- Output
/home/julian/Android/SdkAnd then check that the path exists:
ls $ANDROID_HOME- Output
build-tools licenses platforms skins system-images
emulator patcher platform-tools sources toolsYou 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 watchmanReact Native Project
Finally let’s create an empty react-native project. The official docs recommend to use npx :
npx react-native init MyAwesomeAppThe 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 installRunning 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 hubLook 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.rulesMake sure you’ve enable USB Debugging settings.
Now run:
adb devicesVerify 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.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_warningsBUILD 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 sysctlYou 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-serverDebugging 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=releaseYou 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.jsonThat’s all folks! Happy coding!
In the following posts I will show you how to build a simple backend using the GCP free tier.
