Instalasi dan Problem Solving React Native Build Android

Pada kesempatan kali ini saya akan membahas mengenai bagaimana kita mengatasi error (Problem Solving) ketika pertama kali melakukan instalasi React Native, khususnya untuk develope react untuk aplikasi android.

Seperti yang kita ketahui melalui dokumentasi React native untuk membuat applikasi android pada react native dalam hal ini saya coba pada  MacBook Pro Mac OS High Sierra version 10.13.5 dengan spesifikasi Processor 2.4 GHz Intel Core i5 dengan RAM 8GB, adapun langkah-langkahnya sebagai berikut ini :

1. Install Homebrew

2. brew install node

3. brew install watchman

4. Install Android Studio 

5. Pastikan module dibawah ini di centang

  - Android SDK

  - Android SDK Platform

  - Performance (Intel ® HAXM)

  - Android Virtual Device

6. Install the Android SDK Package 

7. Pastikan Package di bawah ini di centang

   - Google APIs

   - Android SDK Platform 23

   - Intel x86 Atom_64 System Image

   - Google APIs Intel x86 Atom_64 System Image

8. Configure the ANDROID_HOME variable pada $HOME/.bash_profile

   export ANDROID_HOME=$HOME/Library/Android/sdk

   export PATH=$PATH:$ANDROID_HOME/tools

   export PATH=$PATH:$ANDROID_HOME/tools/bin

   export PATH=$PATH:$ANDROID_HOME/platform-tools

Ketika kita sudah melakukan langkah-langkah instalasi di atas kemudian menjalankan aplikasi dengan sintak react-native run-android tidak semua orang yang melakukan langkah di atas berjalan mulus, seperti yang saya alami, saya menemukan error Failure : Build failed with an exception sebagai berikut : 

1. Could not Determine java version from '10.0.2'

2. No Connection Devices !

 

Oke dari hasil penelusuran saya, berikut permasalahan yang kita dapatkan untuk point pertama :

 1. JDK yang di install tidak sesuai dengan konfigurasi default React Native Android

 2. Gradle yang di install tidak sesuai dengan konfigurasi default React Native Android

 3. Path JAVA_HOME belum di masukkan ke dalam ~/.bash_profile

Selanjutnya permasalah untuk point kedua adalah

1. Path emulator tidak ditemukan dari terminal

2. Android Virtual Device belum di buat

SOLUSI...!

Berikut Step by Step untuk menangani masalah di atas :

1. Buka file project Android dengan Editor Kesayangan Kita (Sublime, Atom atau Visual Studio dll)  masuk ke dalam folder Android => build.gradle

 

2. Edit classpath bawaan default React Native Android

  Menjadi seperti gambar di bawah ini !



jangan lupa juga edit file build.gradle yang ada didalam folder Android = > App  => src



3.  di dalam build.gradle src,  karena Java 10 dan Gradle 4.3 sintax "compile" tidak digunakan lagi maka ganti ini



menjadi seperti ini !



4. Selanjutnya edit file gradle-wrapper.properties didalam folder Android => gradle => wrapper



edit distributionUrl settingan default React Native ketika pertama kali install



menjadi seperti ini !



5. Ketik pada terminal open ~/.bash_profile kemudian tambahkan JAVA_HOME seperti gambar di bawah ini 


6. Terakhir ketik pada terminal source ~/.bash_profile

Solusi selanjutnya untuk permasalah untuk point kedua langkahnya sebagai berikut : 

1. Buka Android Studio => Tools => AVD Manager



2.  Klik tombol Create Virtual Device...



3. Pilih Nexus 5K kemudian klik Next...



4. Pilih System Image API 28 , jika belum ada silahkan di Download terlebih dahulu dengan menekan link Download, selanjutnya klik Next...



5. Isi AVD Name selanjutnya tekan Tombol Finish.





6. Virtual Device sudah jadi, selanjutnya buka Terminal dan jalan kan lagi react-native run-android maka akan di lakukan konfigurasi ulang gradle dan download Depedencies yang sesuai dengan java dan gradle terbaru yang kita install. tampilannya seperti ini

7. jika build sukses maka akan tampil seperti ini.

Ok sekian dari saya, Semoga Artikel ini bermanfaat bagi teman - teman yang baru belajar React Native. Jangan Lupa "Bahagia dan Setia"!!!