前回からの続きです。

Expo Modules

では、カスタムネイティブ機能の開発のため、Expo Modulesを素振りしてみます。

ざっくり説明

素のReactNativeでカスタムネイティブ機能を追加する場合、iosおよびandroidディレクトリ以下のネイティブコードを触ることになります。
そこはWeb技術が基本となるReactNativeとは異なり、それぞれのプラットフォームの世界です。
react-nativeコマンドでセットアップした場合、iOSはObjective-C、AndroidはJavaでネイティブ側のコードが生成されています。新たにカスタムモジュールを追加する場合、それぞれにモジュールの設定コードを追加することになります。

Expo Modulesを利用すると、モジュール追加のためのボイラープレートなどをExpoに任せることができます。
また、Expo ModulesではiOSではSwift、AndroidではKotlinを使用することになります。これはReactNative側のJavaScript/TypeScriptと、パラダイムの異なるObjective-C/Javaを行ったり来たりすることによる効率低下を避けるため、という説明がされています。
（そもそも、もうObjective-Cなんか書きたくない！）

触ってみる

Get startedに沿って触ってみます。

yarn create expo-module my-module

質問は全てデフォルトでOK。

✔ Downloaded module template from npm
✔ Created the module from template files
✔ Installed module dependencies
✔ Compiled TypeScript files
✔ Initialized the example app
✔ Configured the example app
✔ Prebuilt the example app
⠹ Installing dependencies in the example app

exampleアプリの依存インストールが結構時間掛かりました。

✔ Created an empty Git repository

✅ Successfully created Expo module

To start developing your module, navigate to the directory and open iOS and Android projects of the example app
> cd my-module
> yarn open:ios
> yarn open:android

Visit https://docs.expo.dev/modules for the documentation on Expo Modules APIs
✨  Done in 214.73s.

まずはモジュールをビルドします。

yarn build

watchモードで待機されてターミナルが解放されないので、別のターミナルでexampleアプリを起動します。

cd example
yarn android

iOSも同様に

yarn ios

少しコードを見てみます。

example/App.tsx

import * as MyModule from 'my-module';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{MyModule.hello()}</Text>
    </View>
  );
}

画面中央のテキストはMyModule.hello()の返す値が表示されたものです。
そのMyModule.helloは、これです。

src/index.ts

// Import the native module. On web, it will be resolved to MyModule.web.ts
// and on native platforms to MyModule.ts
import MyModule from './MyModule';

export function hello(): string {
  return MyModule.hello();
}

import MyModule from './MyModule'でネイティブモジュールをインポートして、hello()を呼び出した結果を返しているだけです。

ネイティブ側のコードが、以下それぞれAndroidとiOSです。

android/src/main/java/expo/modules/mymodule/MyModule.kt

    Function("hello") {
      "Hello world! 👋"
    }

ios/MyModule.swift

    Function("hello") {
      return "Hello world! 👋"
    }

該当箇所の周辺を見ても、KotlinとSwiftがよく似ているのが分かりますね。
android、iosディレクトリ以下のモジュール用のコード、それぞれ２ファイルずつしかありません。中身も@ReactMethod（Android）や@objc（iOS）などのアノテーションもなく、スッキリしています。
スゴイ。

変更してみる

説明に沿ってネイティブコードを変更してみます。

android/src/main/java/expo/modules/mymodule/MyModule.kt

変更前

    Function("hello") {
      "Hello world! 👋"
    }

変更後

    Function("hello") {
      "Hello world! 🌎🤖"
    }

ios/MyModule.swift

変更前

    Function("hello") {
      return "Hello world! 👋"
    }

変更後

    Function("hello") {
      return "Hello world! 🌎🍎"
    }

コード変更後、yarn androidおよびyarn iosすると、変更が反映されます。
（ネイティブ側の変更は自動リロード対象ではないため、ビルドが必要）

ネイティブモジュールの素振りができたので、次はこれをアプリに組み込んでいきます。

つづく

ReactNativeでのアプリ開発、ExpoSDKがいい感じになってきたようなので試してみた：その３

Expo Modules

ざっくり説明

触ってみる

変更してみる