Cara Install React Native pada Linux

React Native adalah sebuah framework yang di kembangkan oleh Facebook untuk membuat aplikasi mobile hybrid. Menurut info, framework ini telah di pakai oleh banyak aplikasi populer seperti: Instragram, Facebook, Airbnb, Walmart, dst. Anda bisa melihat info selengkapnya disini.

Berikut adalah cara install React Native pada Linux khususnya Ubuntu (Saya menggunakan Deepin Linux yang berbasis Ubuntu).

Menurut dokumentasi yang saya baca, React Native membutuhkan beberapa dependencies dan tools supaya bisa berjalan. Berikut dependencies dan tools yang di butuhkan:
- Node.js
- Yarn (atau anda bisa menggunakan NPM)
- React Native CLI
- Watchman
- Java Development Kit (Oracle JDK 8)
- Android SDK (Android Studio)

Catatan:
- Dalam tutorial ini akan di khususkan untuk membuat aplikasi Android, walau sebenarnya React Native bisa juga untuk membuat aplikasi iOS.
- Pastikan anda terhubung ke internet dan memiliki kouta yang memadai, karena hampir seluruh konten yang ada dalam tutorial ini akan kita download dari internet.

Install Node.js

Untuk menginstall Node.js silahkan ketik perintah berikut pada terminal:

sudo apt-get install nodejs nodejs-legacy

Cek versi Node.js dengan perintah berikut:

node -v

Install Yarn Package Manager

Sebelumnya, anda harus menambahkan repositori milik Yarn untuk bisa melakukan installasi lewat APT. Ketik perintah berikut untuk menambahkan repositori Yarn:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

Jika berhasil, kemudian lakukan update dan install yarn. Ketik perintah berikut:

sudo apt-get update && sudo apt-get install yarn

Kemudian, periksa versi Yarn yang terpasang untuk memastikan installasi berhasil.

yarn --version

Install React Native CLI

Langkah selanjutnya adalah menginstall React Native CLI, ketik perintah berikut:

yarn add global react-native-cli

Periksa versi dari React Native, ketik perintah berikut ini:

react-native --version

Install Watchman

Pada langkah ini kita akan menginstall Watchman, sebuah tools untuk memonitor perubahan files. Kita akan menginstall Watchman dari Source karena memang metode ini yang tersedia. Ketik perintah berikut satu persatu untuk memastikan tidak ada error terjadi:

sudo apt-get install git
git clone https://github.com/facebook/watchman.git
cd watchman/
git checkout v4.7.0
sudo apt-get install -y autoconf automake build-essential python-dev
./autogen.sh 
./configure 
make
sudo make install

Kemudian periksa versi dari Watchman untuk memastikan installasi sukses, ketik:

watchman --version

Selanjutnya, lakukan konfigurasi agar Watchman berjalan lancar.

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

Install Java Development Kit

Selanjutnya, install Oracle JDK untuk compiling source code saat kita membuat aplikasi. Sebelumnya kita tambahkan repositori ~~official~~ dari Oracle JDK:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update

Kemudian install Oracle JDK, ketik:

sudo apt-get install oracle-java8-installer

Jika tidak ada pesan error saat proses installasi di atas, selanjutnya tambahkan variable pada environment kita.

nano ~/.bashrc

Kemudian, masukan text berikut pada akhir baris file di atas:

export JAVA_HOME="/usr/lib/jvm/java-8-oracle"
export JDK_HOME="/usr/lib/jvm/java-8-oracle"
export PATH=$JAVA_HOME/bin:$PATH

Jika merasa sudah benar, tekan CTRL+O untuk menyimpan kemudian CTRL+X untuk keluar dari text editor Nano.
Kemudian ketik perintah berikut untuk reload file .bashrc:

source ~/.bashrc

Dan, selanjutnya kita cek versi dari Oracle JDK dengan mengetik perintah berikut:

javac -version

Jika tidak ada pesan error, maka proses installasi Oracle JDK berhasil.

Catatan: Anda juga bisa menggunakan OpenJDK selain Oracle JDK.

Install Android SDK (Android Studio)

Kunjungi situs https://developer.android.com/studio/index.html, kemudian download Android Studio pada situs tersebut. Jika proses download sudah selesai, kemudian extract file tersebut dan copy ke /opt/android-studio. Silahkan ketik perintah berikut:

sudo apt-get install unzip
unzip android-studio-ide-xxxx-linux.zip
mv android-studio /opt/android-studio

Jika tidak ada error, kemudian jalankan Android Studio untuk melakukan konfigurasi dengan perintah berikut:

cd /opt/android-studio/bin
./studio.sh

Kemudian, akan muncul jendela dengan dua opsi. Pilih opsi paling bawah yang bertuliskan "I do not have a previous ...." dan klik Ok.
Pilih Custom installation saat pertama kali menjalankan Android Studio. Pastikan anda mencentang opsi berikut ini:

Android SDK
Android SDK Platform
Android Virtual Device

Klik "Next" untuk mendownload dan memasang komponen yang di pilih. Jika sudah selesai, tambahkan variable lagi pada environment kita. Ketik:

nano ~/.bashrc

Kemudian masukan text di bawah ini tepat di bawah text JAVA_HOME atau JDK_HOME.

export ANDROID_HOME=${HOME}/Android/Sdk 
export PATH=${PATH}:${ANDROID_HOME}/tools 
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Jika merasa sudah benar, tekan CTRL+O untuk menyimpan kemudian CTRL+X untuk keluar dari text editor Nano.
Kemudian ketik perintah berikut untuk reload file .bashrc:

source ~/.bashrc

Langkah selanjutnya, Download Build-Tools dan SDK yang di butuhkan.
React Native membutuhkan SDK Android 6.0 (Marshmallow). Untuk memasangnya, buka SDK Manager, klik "Configure" pada jendela "Welcome to Android Studio".

SDK Manager juga bisa di akses pada menu Android Studio → "Preferences" , di bawah Appearance & Behavior → System Settings → Android SDK.

Pilih "SDK Platforms" pada jendela SDK Manager, kemudian centang "Show Package Details" pada bagian bawah jendela. Cari Android 6.0 (Marshmallow) kemudian "expand" untuk melihat daftar yang ada, pastikan daftar di bawah ini di centang:

Google APIs
Intel x86 Atom System Image
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

Selanjutnya, pilih tab "SDK Tools" pada bagian atas jendela. Dan centang "Show Package Details" pada bagian bawah jendela. Cari "Android SDK Build Tools" kemudian "expand" untuk melihat daftar yang ada, pastikan Android SDK Build-Tools 23.0.1 di centang.
Kemudian, klik tombol "Apply" untuk mendownload paket yang di butuhkan. Tunggu sampai proses download selesai.

Testing installasi React Native Anda

Ketik perintah berikut untuk membuat project baru:

react-native init AwesomeProject 
cd AwesomeProject

Kemudian, coba kita jalankan. Ketik perintah berikut: (Catatan: Anda harus menjalankan sebuah Android Virtual Device terlebih dahulu)

react-native run-android

Jika proses build berhasil dan muncul pesan error pada aplikasi Android kita, kita harus menjalankan Development Server terlebih dahulu:

yarn start

Jika tidak ada pesan error, maka aplikasi Android anda akan menampilkan layar berikut pada AVD (Android Virtual Device) Anda.

Sekian, terimakasih.
- Em Suryadi

Sumber:

Em Suryadi

Sebuah catatan dari seorang pelupa...

Rabu, 01 Maret 2017