REACT NATIVE

PERTEMUAN KE 5
PEMBAHASAN

• Integrasi dengan Native Module

• Build APK Debug Mode dan Release Mode
INTEGRASI DENGAN NATIVE MODULE

Native Modules adalah serangkaian fungsi Javascript yang diimplementasikan secara native untuk setiap
platform (iOS dan Android). Native modules diperlukan ketika React Native belum memiliki modul yang
sesuai. Native Module ini dibuat menggunakan bahasa native seperti Java dan Objective-C.
APAKAH KITA BUTUH NATIVE MODULE ?

Jawabannya tergantung dari aplikasi yang sedang kita kembangkan.

Ada beberapa case Ketika sedang mendevelop suatu aplikasi menggunakan React Native ini harus
menggunakan native module untuk mengakses suatu fitur yang tidak disediakan oleh library. Contohnya
dasarnya seperti pengaksesan Toast pada native android.
MEMBUAT NATIVE MODULE

Untuk membuat Native module direkomendasikan menggunakan IDE sesuai dengan platform yang sedang
dikembangkan , Untuk android dapat menggunakan Android Studio, dan untuk IOS dapat menggunakan Xcode.
1. Buat Folder / Package baru di android/app/src/main/java/identifier/nama folder
2. Buat file baru sesuai dengan module yang akan dibuat, Contoh “ToastNativeModule.java”
3. Kemudian Ikuti Sesuai dengan code dibawah
4. Agar module yang sedang kita buat dapat dibaca oleh react native maka class yang sudah kita buat tadi
extends kan kepada ReactContextBaseJavaModule dan kemudian Implement Method yang disediakan oleh
ReactContectBaseJavaModule dan isikan pada fungsi getName() dengan nama module yang nantinya akan
dipanggil di JS
5. Kemudian Buat Sebuah Fungsi baru yang nantinya akan dipanggil pada JS dengan diberikan anotasi
@ReactMethod
1. Kemudian Buat sebuah Class baru untuk nama Sesuaikan , nantinya class ini digunakan untuk
meregister module yang telah dibuat tadi.
2. Implements class kepada ReactPackage kemudian implement fungsi-fungsinya
3. Pada sesuaikan dengan fungsi dibawah ini
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
return Arrays.<NativeModule>asList(new PictureInPictureModule(reactApplicationContext));
}
1. Kemudian lanjut buka MainApplication.java
2. Pada fungsi getPackage() sesuaikan dengan kode dibawah ini untuk menambahkan package yang telah
dibuat .
@Override
protected List<ReactPackage> getPackages() {

@SuppressWarnings("UnnecessaryLocalVariable")

List<ReactPackage> packages = new PackageList(this).getPackages();

packages.add(new MainAppPackage());

return packages;

}
MEMANGGIL NATIVE MODULE DARI REACT
NATIVE

Setelah Native Module tadi dibuat, berikut cara untuk memanggil native module yang telah dibuat :
1. Importkan fungsi NativeModules dari react native “Import { NativeModules } from ‘react-native’”
2. Kemudian pada native module panggil nama module yang telah dibuat sebelumnya “const
{ ToastModule } = NativeModules;”
3. Setelah itu tinggal panggil fungsi yang telah dibuat yang sebelumnya telah diberikan anotasi
@ReactMethod
BUILD APK DEBUG MODE DAN RELEASE
MODE

Hasil akhir dari sebuah project pengembangan pastinya adalah sebuah aplikasi yang dapat diinstall pada
smartphone.
Perbedaan APK Debug Mode dan Release Mode yaitu terletak pada cara instalasi dari aplikasi tersebut , jika
APK debug mode dapat di install langsung kepada smartphone android tanpa harus melewati Google
Playstore , dan APK Release Mode ini digunakan untuk mempublish aplikasi yang telah di buat agar tampil
pada Google Playstore, dan dapat di install oleh smartphone melalui Google Playstore.
APK DEBUG MODE

1. Untuk membuat APK debug mode hal yang pertama harus dilakukan yaitu membuat folder pada
“android/app/src/main/” Bernama “assets”
2. Kemudian jalankan perintah ini untuk membuat sebuah index.js “ react-native bundle --platform
android --dev false --entry-file index.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res “
3. Setelah itu pada terminal jalankan peritah ini untuk memulai building debug apk
“cd android && ./gradlew assembleDebug”
APK RELEASE MODE
Untuk membuat apk release, hal yang harus dilakukan pertama kali yaitu membuat keystore yang dibutuhkan untuk
perilisan aplikasi ke playstore
Untuk membuat Keystore jalankan perintah ini diterminal dan sesuaikan Namanya.

keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000

Jika sudah membuat keystore kemudian dilanjutkan dengan menjalankan perintah ini untuk switch dari debug
mode kepada release mode

react-native bundle --platform android --dev false --entry-file index.js --bundle-output

android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Jika peritah sebelumnya sudah dijalankan kemudian dilanjutkan buka Android
Studio
1. Pergi ke menu Build -> Generate Signed Bundle / APK.
2. Kemudian pada pilihan , pilih Android App Bundle dan klik next.
3. Setelah muncul seperti gambar disamping , pada Key store path arahkan
kepada keystore yang telah dibuat tadi, dan masukan password serta alias
yang telah dibuat, kemudian klik next
4. Kemudian akan muncul pilihan Kembali dengan pilihan debug dan release,
kita arahkan pilihan ke release dan klik finish , maka apk akan di build
dengan release mode untuk keperluan upload ke playstore.