【Android・Kotlin】React NativeでNative Modulesを実装する方法を解説

buildscript {
    ext {
        kotlin_version = '1.5.20'
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

// ご自身のパッケージ名
package com.nativemoduleexample
import android.os.Build
import com.facebook.react.bridge.*

// ReactContextBaseJavaModuleを継承している点がポイント
class CustomNativeModuleKotlin(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {

    // getNameは必須で、JavaScriptから呼ぶ際のModule名になる
    override fun getName(): String {
        return "CustomNativeModuleKotlin"
    }

    // 出力するだけのメソッド
    @ReactMethod
    fun funcSimple() {
        print("funcSimple")
    }
    
    // callbackメソッド
    @ReactMethod
    fun funcCallback(callback: Callback) {
        callback.invoke("funcCallback")
    }

    // 引数を取るcallbackメソッド
    @ReactMethod
    fun funcCallbackWithParams(param: String?, callback: Callback) {
        callback.invoke("funcCallbackWithParams", param)
    }

    // Promise resolveパターンのメソッド
    @ReactMethod
    fun funcResolvePromise(promise: Promise) {
        promise.resolve("funcResolvePromise")
    }

    // Promise rejectパターンのメソッド
    @ReactMethod
    fun funcRejectPromise(promise: Promise) {
        promise.reject("error", "funcRejectPromise")
    }
    
    // 実用例: OSのバージョンを返すメソッド
    @ReactMethod
    fun getOSInfo(callback: Callback) {
        callback.invoke("android", Build.VERSION.RELEASE)
    }
}

// ご自身のパッケージ名
package com.nativemoduleexample

import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager

import java.util.ArrayList

class Main : ReactPackage {

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }

    override fun createNativeModules(
            reactContext: ReactApplicationContext): List<NativeModule> {
        val modules = ArrayList<NativeModule>()

        // moduleを追加
        modules.add(CustomNativeModuleKotlin(reactContext))

        return modules
    }

}

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  packages.add(new Main());
  return packages;
}

import {NativeModules} from 'react-native';

const App = () => {
  const {CustomNativeModuleKotlin} = NativeModules;
}

const App = () => {
  useEffect(() => {
        CustomNativeModuleKotlin.getOSInfo((name, os) => {
      console.log(name, os);
    });
    CustomNativeModuleKotlin.funcSimple();
    CustomNativeModuleKotlin.funcCallback(result => {
      console.log(result);
    });
    CustomNativeModuleKotlin.funcCallbackWithParams('test', (result, param) => {
      console.log(result, param);
    });

    (async () => {
      const result = await CustomNativeModuleKotlin.funcResolvePromise();
      console.log(result);
    })();

    (async () => {
      try {
        await CustomNativeModuleKotlin.funcRejectPromise();
      } catch (err) {
        console.error(err);
      }
    })();
  }, []);
}