React Native と聞くと、全てを JavaScript や TypeScript で作っていると思うかもしれませんが、ネイティブ特有の機能を Native Modules として、Swift や Kotlin で作ることができます。今回、久々に Native Modules を作ったら、色々変わっていたのと、一部で開発に詰まってしまったので、共有したいと思います。
Native Modules を作る
公式ドキュメント Native Modules NPM Package Setup に従って操作すれば、できます。
npx create-react-native-library {作りたいモジュール名}
とタイプして対話型 UI で情報を入力したら、雛形が完成します。簡単ですね。これは callstack の react-native-builder-bob を呼んでいます。
次に yarn をすると、必要なライブラリや cocoapods のインストールがされ、開発が開始できます。src/index.ts で React Native 側のコードを書いています。そのコードを書き終えると、再び yarn すると、TypeScript がトランスコンパイルされてます。
その後は、example ファイルの ios と android のプロジェクトを開き、ネイティブ側のコードを書いています。
一通りの開発が終われば、GitHub などに挙げて
yarn add https://github.com/****/****.git
とタイプすれば Native Modlues を導入できます。また npm に登録すれば、モジュール名で導入できるようになります。
ここからが本題です
Native Modules の動作確認でクラッシュしないのを確認して、開発プロジェクトに導入したところ、特定の操作でクラッシュしました。なぜだ・・・。
調べたところ、Native Modules の example の React Native が 0.63 であり、導入したプロジェクトが 0.68 のため、React-Core が提供する RCTEventEmitter.m の sendEvent(withName:body:) の内部実装が変更されていました。ネイティブから React Native にイベントを送信するときに、クラッシュしました。
RCTCallableJSModules is not set. This is probably because you've explicitly synthesized the RCTCallableJSModules in {モジュール名}, even though it's inherited from RCTEventEmitter.
修正対応するため、すぐに Native Modules の example の React Native を 0.68 にアップデートしました。0.68 は新しいアーキテクチャに対応するため、多くの変更があるのでアップデートは大変でした。
その後、いろいろと RCTCallableJSModules 関連を見ましたが、分からない。残念ながら時間的に今日は諦めました。またの時間に、他の有名どころのライブラリのコードなどを見漁って、調べようと思います。
もし解決法を知っている方がいたら、教えてもらえると幸いです。
まとめ
React Native は年に数回、とても面倒に感じることがあるのですが、まさに今です。Native Modules の公式ドキュメントにも書いているのですが、今はアーキテクチャの開発期間中の真盛りなので、Native Modules の開発はすこし大変そうです（私の理解力が足りないだけ）。