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 の開発はすこし大変そうです（私の理解力が足りないだけ）。