モジュールのためのライブラリを作成する

React Nativeには、一般的な問題を解決するための豊富なライブラリのエコシステムがあります。React Nativeのライブラリはreactnative.directoryウェブサイトにまとめられており、これはすべてのReact Native開発者にとって優れたリソースです。

コードの再利用のために、個別のライブラリに抽出する価値のあるモジュールを扱っている場合があります。これは、すべてのアプリで再利用したいライブラリ、オープンソースコンポーネントとしてエコシステムに配布したいライブラリ、または販売したいライブラリである可能性があります。

このガイドでは、以下を学習します。

モジュールをライブラリに抽出する方法
NPMを使用してライブラリを配布する方法

モジュールをライブラリに抽出する

create-react-native-libraryツールを使用して、新しいライブラリを作成できます。このツールは、必要なすべてのボイラープレートコード（すべての構成ファイルと、さまざまなプラットフォームで必要なすべてのファイル）で新しいライブラリをセットアップします。また、ライブラリの作成をガイドする、優れたインタラクティブメニューも付属しています。

モジュールを個別のライブラリに抽出するには、次の手順に従います。

新しいライブラリを作成する
アプリからライブラリにコードを移動する
新しい構造を反映するようにコードを更新する
公開する。

1. ライブラリを作成する

次のコマンドを実行して、作成プロセスを開始します。

npx create-react-native-library@latest <Name of Your Library>

モジュールの名前を追加します。これは有効なnpm名である必要があるため、すべて小文字にする必要があります。単語を区切るには-を使用できます。
パッケージの説明を追加します。
「どのような種類のライブラリを開発しますか？」という質問に達するまで、フォームに記入し続けます。
このガイドでは、Turboモジュールオプションを選択してください。新しいアーキテクチャとレガシーアーキテクチャの両方のライブラリを作成できることに注意してください。
次に、プラットフォーム（KotlinとObjective-C）にアクセスするライブラリが必要か、共有C++ライブラリ（AndroidとiOS用のC++）が必要かを選択できます。
最後に、最後のオプションとしてテストアプリを選択します。このオプションは、ライブラリフォルダー内にすでに構成されている個別のアプリを使用してライブラリを作成します。

インタラクティブなプロンプトが完了すると、このツールはVisual Studio Codeで次のような構造のフォルダーを作成します。

Folder structure after initializing a new library.

作成されたコードを自由に調べてください。ただし、最も重要な部分は次のとおりです。

androidフォルダー：これはAndroidコードが存在する場所です。
cppフォルダー：これはc++コードが存在する場所です。
iosフォルダー：これはiOSコードが存在する場所です。
srcフォルダー：これはJSコードが存在する場所です。

package.jsonには、パッケージの名前と説明など、create-react-native-libraryツールに提供したすべての情報がすでに構成されています。package.jsonは、Codegenを実行するようにすでに構成されていることにも注意してください。

  "codegenConfig": {
    "name": "RN<your module name>Spec",
    "type": "all",
    "jsSrcsDir": "src",
    "outputDir": {
      "ios": "ios/generated",
      "android": "android/generated"
    },
    "android": {
      "javaPackageName": "com.<name-of-the-module>"
    }
  },

最後に、ライブラリには、ライブラリをiOSおよびAndroidにリンクできるようにするためのすべてのインフラストラクチャがすでに含まれています。

2. アプリからコードをコピーする

ガイドの残りの部分では、ウェブサイトの他のガイド（プラットフォーム固有のTurbo Nativeモジュール、またはクロスプラットフォームのTurbo Nativeモジュール）に示されているガイドラインに従って、アプリにローカルのTurbo Nativeモジュールがあることを前提としています。ただし、コンポーネントとレガシーアーキテクチャのモジュールとコンポーネントでも機能します。コピーして更新する必要があるファイルを調整する必要があります。

[レガシーアーキテクチャのモジュールとコンポーネントには不要] アプリのspecsフォルダーにあるコードを、create-react-native-libraryフォルダーで作成されたsrcフォルダーに移動します。
ライブラリからアクセスできるように、Turbo Nativeモジュール仕様を適切にエクスポートするようにindex.tsファイルを更新します。例：

import NativeSampleModule from './NativeSampleModule';

export default NativeSampleModule;

ネイティブモジュールをコピーする
- android/src/main/java/com/<モジュール名>内のコードを、ネイティブモジュールのアプリで記述したコード（存在する場合）に置き換えます。
- iosフォルダー内のコードを、ネイティブモジュールのアプリで記述したコード（存在する場合）に置き換えます。
- cppフォルダー内のコードを、ネイティブモジュールのアプリで記述したコード（存在する場合）に置き換えます。
[レガシーアーキテクチャのモジュールとコンポーネントには不要]以前の仕様名から新しい仕様名（ライブラリのpackage.jsonのcodegenConfigフィールドで定義されている名前）へのすべての参照を更新します。たとえば、アプリのpackage.jsonでcodegenConfig.nameとしてAppSpecsを設定し、ライブラリでRNNativeSampleModuleSpecという名前が付けられている場合は、AppSpecsのすべての出現箇所をRNNativeSampleModuleSpecに置き換える必要があります。

これで完了です！必要なすべてのコードをアプリから分離されたライブラリに移動しました。

ライブラリをテストする

create-react-native-libraryには、ライブラリで正しく動作するようにすでに構成されている便利なサンプルアプリケーションが付属しています。これは、それをテストするのに最適な方法です！

exampleフォルダーを見ると、react-native-community/templateから作成できる新しいReact Nativeアプリケーションと同じ構造が見つかります。

ライブラリをテストするには

exampleフォルダーに移動します。
yarn installを実行して、すべての依存関係をインストールします。
iOSのみの場合は、CocoaPodsをインストールする必要があります。cd ios && pod install。
exampleフォルダーからyarn androidを使用してAndroidをビルドして実行します。
exampleフォルダーからyarn iosを使用してiOSをビルドして実行します。

ライブラリをローカルモジュールとして使用する

NPMに公開せずに、アプリケーションのローカルモジュールとしてライブラリを再利用したいシナリオがあります。

この場合、アプリの兄弟としてライブラリが配置されるシナリオになる可能性があります。

Development
├── App
└── Library

この場合でも、create-react-native-libraryで作成したライブラリを使用できます。

Appフォルダーに移動し、yarn add ../Libraryを実行して、ライブラリをアプリに追加します。
iOSのみの場合は、App/iosフォルダーに移動し、bundle exec pod installを実行して依存関係をインストールします。
App.tsxコードを更新して、ライブラリのコードをインポートします。例：

import NativeSampleModule from '../Library/src/index';

ここでアプリを実行すると、Metroはアプリに提供する必要のあるJSファイルを見つけられません。これは、MetroがAppフォルダーから開始して実行され、LibraryフォルダーにあるJSファイルにアクセスできないためです。これを修正するには、次のようにmetro.config.jsファイルを更新しましょう。

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dokyumento.jp/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
+ const path = require('path');

- const config = {}
+ const config = {
+  // Make Metro able to resolve required external dependencies
+  watchFolders: [
+    path.resolve(__dirname, '../Library'),
+  ],
+  resolver: {
+    extraNodeModules: {
+      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+    },
+  },
+};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

watchFolders構成は、Metroに追加のパス（この場合は、必要なsrc/indexファイルを含む../Libraryパス）でファイルと変更を監視するように指示します。resolverプロパティは、アプリで使用されるReact Nativeコードをライブラリにフィードするために必要です。ライブラリはReact Nativeからコードを参照およびインポートする場合があります。追加のリゾルバーがないと、ライブラリ内のインポートは失敗します。

この時点で、通常どおりにアプリをビルドして実行できます。

exampleフォルダーからyarn androidを使用してAndroidをビルドして実行します。
exampleフォルダーからyarn iosを使用してiOSをビルドして実行します。

NPMにライブラリを公開する

create-react-native-libraryのおかげで、NPMにすべてを公開するための設定はすでに整っています。

モジュールyarn installに依存関係をインストールします。
yarn prepareを実行してライブラリをビルドします。
yarn releaseでリリースします。

しばらくすると、NPMにライブラリが見つかります。それを確認するには、次を実行します。

npm view <package.name>

ここで、package.nameは、ライブラリの初期化中にpackage.jsonファイルで設定したnameです。

これで、次を実行してアプリケーションにライブラリをインストールできます。

yarn add <package.name>

注意

iOSのみ、ネイティブコードを含む新しいモジュールをインストールするたびに、bundle exec pod install（推奨）またはRubyのBundlerを使用していない場合はpod install（非推奨）を実行してCocoaPodsを再インストールする必要があります。

おめでとうございます！最初のReact Nativeライブラリを公開しました。

モジュールをライブラリに抽出する​

1. ライブラリを作成する​

2. アプリからコードをコピーする​

ライブラリをテストする​

ライブラリをローカルモジュールとして使用する​

NPMにライブラリを公開する​