React Native development environment on Ubuntu 16.04

By Hans C. Poo, hans@welinux.cl

Having a good development enviroment: styling, syntax validation, hot code reloading, etc. is very important for joy and productivity of programmers, but configuring one is very specific and not easy. If you follow this tutorial you should end up with a nice Atom and Ubuntu Linux environment for working with React Native, it’s mostly free software for Linux Ubuntu 16.04 and is dedicated to the Android part of React Native development.

This tutorial cover three different timed tasks:

Once for the machine.
Once per Project.
Every time you want to program.

Once for the machine

Android Studio and emulator

1.- Download and Install Android Studio and then Create an Emulator (Android Virtual Device AVD) in: Tools > Android > AVD Manager. This may take some time, do it with a good internet connection and 8GB of space on disk al least, note that the folder
~/Android is created after this process, we’ll use it further.

Ref: https://developer.android.com/studio/index.html?hl=es-419

Emulator Name

From the console take note of the name of the created emulator, we’ll need it later.

cd ~/Android/Sdk ./tools/bin/avdmanager list avd | awk '/Name:/ {print $2}'

Start up the emulator from command line

In our case the emulator created was Nexus_5X_API_26.

cd ~/Android/Sdk ./emulator/emulator -avd Nexus_5X_API_26

Activate live reloading in the emulator

The next instruction will send a control key to the emulator opening and advanced menu, here you must enable live reloading and hot realoading for better developer experience.

adb shell input keyevent KEYCODE_MENU

Ref: https://stackoverflow.com/questions/36933287/how-to-enable-live-reload-in-react-native-on-android
Activar opciones de desarrollador

Install nodejs 8, npm y yarn

In ubuntu 16.04, the official repos are very outdated with nodejs 6, if you have already installed nodejs, please remove it first before proceed.

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs

Ref: http://nodesource.com/blog/installing-node-js-8-tutorial-linux-via-package-manager/

Yarn

yarn is the recommended package manager much faster than npm, they are compatible you can use both.

sudo npm install -g yarn

Install command CLI to create react native projects

npm install -g create-react-native-app

Ref: https://github.com/react-community/create-react-native-app

Atom

wget https://atom.io/download/deb
sudo dpkg -i atom-amd64.deb

Ref: https://atom.io

Validating java script code while you type

With Atom Package Manager install linter, enabling code style validation while you write.

apm install linter linter-eslint
apm install atom-beautify atom-ternjs autoclose-html autocomplete-modules busy-signal intentions language-babel linter linter-eslint linter-ui-default prettier-atom react-snippets pure-syntax

Once per project

Ready, let’s create a project in ~ (my home directory)

cd ~ react-native init MyProject

Confiig eslint in the project

cd ~/MyProject

Install a module with javascript rules for eslint.

yarn add --dev eslint eslint-config-equimper eslint-config-prettier

Create eslint configuration file .eslintrc enabling those rules

{ "extends": [ "equimper", "prettier/react", "prettier" ], "rules": { "no-console": 0, "arrow-body-style": 0, } }

Every time you want to program

Boot up the emulator