Artikel ini merupakan kelanjutan dari http://arrowfunxtion.com/2018/08/26/melompat-kembali-ke-react-native/
Dan juga sebagai catatan saya supaya tidak hilang, karena ada beberapa hal yang harus disesuaikan sana sini ketika saya menggunakan React Native versi terbaru yaitu 0.56 (ditulis 26 Agustus 2018).
Pertama perlu diperhatikan dependency yang saya pakai:
– React native 0.56
– Target Android 26
– Mobx
– Mobx React
– React native qr code scanner
Ada beberapa hal yang perlu disetting karena ternyata ketika saya menggunakan mobx state manager tidak semulus ketika saya menginstallnya di react web.
Paling jelas yaitu support untuk decorators legacy, symbol “@” yang kita gunakan pada @observable dan @observer ini memang seringkali bermasalah. Terlebih ternyata React Native 0.56 menggunakan Babel versi 7 yang tidak backward kompatibel dengan versi-versi sebelumnya.
Hal ini berarti konfigurasi babel yang biasa saya lakukan ternyata tetap gagal untuk support decorators. Untuk itu agar berhasil saya perlu menyesuaikan file .babelrc di projek saya menjadi seperti ini:
{
"presets": ["react-native"],
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}
Dan sebelum bisa menggunakan saya perlu menginstall 3 dev dependency yaitu:
– “@babel/core”: “^7.0.0-beta.47”,
– “@babel/plugin-proposal-decorators”: “^7.0.0-beta.47”,
– “@babel/plugin-transform-runtime”: “^7.0.0-rc.3”,
Saya bahkan tidak ingat apakah dependency ketiga benar-benar diperlukan apa tidak sangking banyaknya saya mencoba-coba konfigurasi dan versi yang saya install untuk menyelesaikan masalah decorators.
Dengan setup seperti di atas tampaknya permasalah decorator telah selesai, saya bisa menjalankan android simulator dan aplikasi yang sedang saya develop dengan lancar. Lalu sampai saya coba untuk membuat signed APK. Berhasil tapi kemudian ternyata pas saya install di hape beneran aplikasi crash, apa yang terjadi? ternyata error berkaitan dengan decorator. Kurang lebih begini BabelHelpers applyDecoratedDecorator is not a function, wow? apa lagi ini?
Lalu kemudian saya mencari dan mencari hingga Alhamdulillah saya menemukan solusi atas permasalah tersebut di sini https://github.com/facebook/react-native/issues/20150
Ternyata saya ingat kembali dependency ketiga di atas transform-runtime memang diperlukan untuk mengatasi masalah ini. Setelah menginstall dependency tersebut saya juga harus sedikit “hack” file index.js bawaan dari react-native init menjadi seperti ini:
/** @format */
import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor'
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty'
Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty});
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
let App = require('./App').default
AppRegistry.registerComponent(appName, () => App);
Mind blowing, alhamdulillah dengan modifikasi tersebut aplikasi berhasil berjalan dengan lancar di hape saya dan hape istri saya. Yay! Jadi ini sebetulnya bukan cara baku sesuai dokumentasi babel untuk menggunakan @babel/runtime, tapi ya begitulah memang tidak ada cara lain karena cara baku malah menghasilkan error lebih banyak.
Dan usut punya usut ternyata ini memang sebuah “workaround” atau solusi sementara yang memang harus dilakukan di versi React Native 0.56 ini.
Akhirnya versi barebone aplikasi mobile saya telah berjalan lancar dan berhasil dibuat .apk nya. Untuk step by step memproduksi apk bisa dilihat di guide resmi react native. Lancar tanpa kendala.
Update: Ada hal yang saya lupa catat yaitu ketika menggunakan Mobx dan mobx react saya tidak bisa menggunakan versi terbaru. Sehingga saya pun harus mendowngrade ke mobx v4.3.1 dan mobx-react v5.1.0
Selain itu agar QRCode scanner yang memerlukan react-native-camera dapat berjalan saya harus mengubah 2 file yang saya bahkan baru pertama kali berurusan dgn file-file itu yaitu android/app/build.gradle dan android/gradle/wrapper/gradle-wrapper.properties.
Pertama di build.gradle saya tambahkan kode ini:
compile (project(':react-native-camera')){
exclude group: "com.android.support", module: 'support-v4'
}
pada block dependencies{}
Kemudian pada gradle-wrapper.properties saya mengubah distributionUrl seperti ini:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
Sebelumnya adalah
distributionUrl=https\://services.gradle.org/distributions/gradle-3.5.1-all.zip
