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
Top comments (0)