Running react-native app in ubuntu 18.04

dooboolab
Jul 7, 2018 · 3 min read

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.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

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
export PATH=$PATH:$ANDROID_HOME/emulator# 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 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

Troubleshoot

  1. When facing below error,
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

dooboolab

Open source community

dooboolab

Written by

dooboolab

dooboolab

dooboolab

Open source community