Running react-native app in ubuntu 18.04

These day, I’ve figured out that configuring react-native dev environment is quite difficult than it is in mac. In this article, I will explain how to setup your environment to build react-native app in ubuntu 18.04.

1. Install node and npm

If you are already an ubuntu user, or if you already have an experience in ubuntu, you may be familiar with installing node via apt like apt-get install nodejs. However, these day, it is recommended to install node via nvm which is a package manager for nodejs. Therefore, lets install nvm first.

  • Install nvm
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.33.8/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

2. 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
  • 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
# Configure android emulator to run directly in terminal.
function emulator { ( cd "$(dirname "$(whence -p emulator)")" && ./emulator "$@"; ) }
# Set alias to shorten command and also fix the side-effect
alias emu="$ANDROID_HOME/tools/emulator"
  • Reload bash_profile or .zshrc
source ~/.bash_profile
  • 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 doo1 -k "system-images;android-27;google_apis_playstore;x86" --device 'Nexus 5X
// run emulator
emu -avd doo1
  • List emulators. You will see doo1 as a result.
emu -avd -list-avds
  • To install pixel device, you can do following.
// install missing module
sudo apt-get install libcanberra-gtk-module:i386
// create avd
avdmanager create avd -n doo1 -k "system-images;android-28;google_apis;x86" --device 'pixel'
  • Trouble shooting with permission
/** 
Sometimes there is permission issue running device telling to
grant permisson on `/dev/kvm`.
**/
sudo apt install qemu-kvm
sudo adduser <your username> kvm
sudo chown <your username> /dev/kvm

3. 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 DoobooProject
  • Finally run your react-native project.
// Move to created project dir.
cd DoobooProject
// Start react-native packager
npm start
// open up another terminal and run android
react-native run-android