Cara memangil native method dari React Native iOS

Shiit …saya bingung lagi untuk memulai kata-kata di setiap konten. Ya intinya teman-teman pernah tidak mengalami tuntutan pekerjaan untuk menggunakan React Native padahal base programming language teman-teman Swift atau Obj-C.

Yes, kita perlu beradaptasi lagi dengan bahasa baru, dengan design pattern baru dll.

Nah disini kita akan membahas bagaimana kita convert atau mengkonversi framework atau library yang telah kita buat dengan Swift atau Obj-C, sehingga bisa tetap kita pakai di React Native.

Nah untuk mewujudkan hal tersebut kita perlu tau bagaimana cara kerja Native Module di React Native.

Sesuai gambar diatas, untuk mengekspose Swift class atau method ke Native Module kita memerlukan beberapa langkah

Setup

Buka project React Native teman-teman, cari folder /ios dan buka file xcworkspace.

Create Bridging-Header file dengan create Swift File dengan nama (Baca: SampleSDK) class yang akan dipanggil di React Native, otomatis akan ada Pop up untuk configure Bridging-Header file, Klik Create Bridging Header.

Untuk Framework atau Lib baik itu menggunakan Cocoapods atau Private Framework (.framework dan .xcframework) karena kita tidak bisa mengubah file yang ada didalam maka kita perlu membuat converter dengan membuat class dan method untuk memanggil Framework atau Lib tersebut.

import Foundation
import MyFramework
class SampleSDK: NSObject {
    func show() {
        MyFramework.show()
    }
}

Dalam kasus ini saya membuat custom framework (Baca: MyFramework) dengan method show yang hanya menampilkan print function.

Mengespose Swift ke React Native

Untuk mengekspose method yang kita buat, kita perlu membuat Obj-C File baru yang akan kita namakan sesuai dengan Class yang tadi telah kita buat yaitu SampleSDK.m

Langkah pertama ubah SampleSDK.swift teman-teman menjadi seperti ini

import Foundation
import MyFramework
@objc(SampleSDK)
class SampleSDK: NSObject {
    @objc
    func show() {
        MyFramework.show()
    }
}

Yup tambahkan @objc(SampleSDK) sesuai dengan nama Class teman-teman dan tambahakan @objc pada method yang ingin diekspose ke RN

Tahap selanjutnya pada file SampleSDK.m kita tambahkan beberapa line code ini

#import "React/RCTBridgeModule.h"
@interface RCT_EXTERN_MODULE(SampleSDK, NSObject)
RCT_EXTERN_METHOD(show)
@end

Keterangan

RCT_EXTERN_MODULE adalah nama class yang sudah kita define dengan @objc(SampleSDK)

RCT_EXTERN_METHOD adalah methode yang akan kita ekspose, yang sudah kita tambahkan @objc text sebelum nya

Mengakses Native Module dari React Native

Yeayyyy … akhirnya kita tiba dimana kita bisa memanggil Framework atau Lib kita dari JS file

Untuk memanggil kita perlu mengimport Native Module

import {
...
NativeModules
} from 'react-native';

Selanjutnya deklarasi const SampleSDK

const { SampleSDK } = NativeModules;

Tahap terakhir tinggal panggil method kita

const App: () => React$Node = () => {
    return (
        ...
        <Button title="SampleSDK" onPress={() => SampleSDK.show()}/>
        ...
    );
};

Button SampleSDK print — — — — —

What Next

Selanjutnya teman-teman bisa mempelajari mengenai

#import "React/RCTEventEmitter.h"

RCTEventEmitter.h bisa teman-teman gunakan untuk menghandle event state, sehingga React Native bisa observe event yang terjadi di Swift atau Native code

Final Project

alfian0/AwsomeProject

Usefull Article

Swift in React Native - The Ultimate Guide Part 1: Modules

iOS Native Modules · React Native