React Nativeのライブラリをpatch-packageで手軽に修正する方法

はじめに

あけましておめでとうございます。React Nativeでアプリの開発を行っているとき、なんらかの外部のライブラリ（パッケージ）を使用することが多いかと思いますが、私が開発する上で困ったのがライブラリの特定の機能にバグがあり、どうしてもそのバグを修正する必要があるケースでした。

メジャーなライブラリの特定の機能にバグがある場合などは既存のissueとして修正方法が提示されていることも多かったのですが、修正方法のみが提示されていて当面はライブラリにマージされて反映される見込みがしばらくなさそうなケースも多いかと思います。

そのような場合、ライブラリに修正を適用するためにはライブラリからフォークして自分自身で修正を適用するという対応方法もあると思いますが、わざわざフォークせずに直接ライブラリに対するパッチを当てることができるpatch-packageというライブラリが非常に使い勝手が良かったので紹介させていただきます。この方法を使えばフォークすることなしに自分でちょっとした修正を行うことも簡単にできます。

patch-packageについて

David Sheldrickさんという人が2017年の5月あたりに公開したライブラリ。2019年1月15日時点でのnpmでの週間ダウンロード数は5万ほどなので、結構メジャーに使われていそうです。（ちなみにreact-native-firebaseも週間5万ダンロードくらいです）

https://www.npmjs.com/package/patch-package

githubレポジトリ（詳しいdocumentはこちらにあります）

https://github.com/ds300/patch-package

準備・インストール方法

package.jsonのscriptsの部分に以下の行を追加しておく

"scripts": {
+  "postinstall": "patch-package"
 }

npmの場合のインストール方法

npm i patch-package --save-dev

yarnの場合のインストール方法

yarn add --dev patch-package postinstall-postinstall

yarnの場合にpostinsall-postinstallという別パッケージが必要になる理由は、documentに記載がありますが、yarnの場合はpostinstallが実行されるのがyarn addとyarn installに限られるためにyarn removeの時は実行されないとのこと。なので、postinstall-postinstallによってyarn removeでもpostintallが実行されることでpatch-packageによってパッチが当てられることを確実にするために必要だとのことです。

実際の使用方法の流れ

/node_module 以下の該当ファイルを修正する
↓
（正しく修正されていることを確認する ）
↓
以下のコマンドを実行することで、もともとのファイルと修正後のファイルの差分をとったパッチファイルを自動作成する

npｍの場合(※npxはnpm > 5.2 の場合のパッケージの実行方法)

npx patch-package <パッケージ名>

yarnの場合

yarn patch-package <パッケージ名>

※初回はパッチファイルの置き場所の/packageというディレクトリも自動生成してくれます。<パッケージ名>の部分は例えばreact-native-cameraなどのライブラリの名前が入ります。

↓

作成されたパッチファイルをコミットすることで、チーム内でパッチを共有できる(npm/yarn installなどのコマンドを実行後に常に自動的にパッチが当てられるようになります)

私が実際にプロジェクトで使用したケース

動画撮影機能のためにreact-native-cameraというライブラリを実際のプロジェクトで使用していたのですが、iOSの場合に動画撮影開始時に画面が一瞬暗くなり、ちらついたような状態で動画が録画されるというバグがありました。

そのバグのissueで修正コードが提示されていて、修正コードを作成した人はpatch-packageを用いて当面バグを回避しているとのコメントがあり、それのとおりにpatch-packageを使ってバグを回避することができました。

このコメントでもすぐにPRを作成する、という旨が記載されていたのですが、実際にその修正がマージされたのは結果的には数カ月後だった（ちなみにこの修正されたバージョンではまた別の問題があって結局パッチを当てたままで使用しています。。）ので、patch-packageの便利さにあやかることができました。 https://github.com/react-native-community/react-native-camera/pull/1542#issuecomment-407324574

まとめ

公式のドキュメントに書かれている内容ですが、機能追加などの変更が大きくなる場合や他の人にとっても有益な場合はフォークを用いての修正が推奨されていますが、手軽に修正できるという点ではpatch-packageが活躍する場面は多そうですので、みなさんも是非試してみてください。

patch-package
https://github.com/ds300/patch-package