こんにちわ。最近ファミマのアイスカフェオレにハマってるカリーです。

本日は、React Nativeでの環境のキャッシュクリアの方法について紹介します。
React Nativeで開発をしていると、時折キャッシュが悪さをしてビルドされない・アプリが動かなくなる等が発生することがあります。

そんな時にキャッシュクリアをすることで解消することがあるので、困ったらこれというコマンドを紹介したいと思います。

結論

以下のコマンドでキャッシュクリアされます。
※ iOS・android共有です

rm -rf ~/Library/Developer/Xcode/DerivedData/
lsof -n -P -i :8081 -t | xargs kill                                                   
rm -rf ios/build
rm -rf android/app/build
rm -rf node_modules
npm install
cd ios && rm -rf Podfile.lock Pods/ && arch -arm64 pod install && cd ../
watchman watch-del-all
cd android && ./gradlew clean && cd ../
react-native start --reset-cache

それぞれのコマンドの説明

rm -rf ~/Library/Developer/Xcode/DerivedData/

Xcodeでのビルド時のログやキャッシュなどが格納されているDerivedDataを削除します。

DerivedDataが時々悪さをしてエラーを出すことがあるようです。
削除後も次回ビルド時に自動生成されるので、DerivedDataフォルダをまるっと消しても問題はないです。

iOSアプリの開発を行なっていない場合はこのコマンドは不要です。

lsof -n -P -i :8081 -t | xargs kill 

指定したポートで起動しているプロセスを探し、プロセスの終了(kill)を実行します。

8081を指定しているのは、Metro Bundlerがデフォルトで8081を使用して起動するためです。
他のプロセスが8081を使用している場合、エミュレータの起動はされますが代わりにエラーが表示されます。

rm -rf ios/build

iosのビルドファイルを削除します。

iOSアプリの開発を行なっていない場合はこのコマンドは不要です。

rm -rf android/app/build

androidのビルドファイルを削除します。

androidアプリの開発を行なっていない場合はこのコマンドは不要です。

rm -rf node_modules

node_modulesを削除します。

npm install

パッケージをインストールします。

cd ios && rm -rf Podfile.lock Pods/ && arch -arm64 pod install && cd ../

Pods関連のファイルを削除し、再度インストールします。

Pods/ はiOSアプリ用のライブラリ群なので、iOSアプリの開発を行なっていない場合はこのコマンドは不要です。

watchman watch-del-all

watchmanのキャッシュを削除します。

cd android && ./gradlew clean BuildCache && cd ../

androidのプロジェクトキャッシュを削除します。

androidアプリの開発を行なっていない場合はこのコマンドは不要です。

react-native start --reset-cache

React Nativeのキャッシュをクリアします。

最後に

今回はReactNativeでビルドが通らない際の、解決するかもしれないキャッシュクリアの方法を紹介しました。

昨日まで動いてたのに突然動かなくなった…そんな時はこのキャッシュクリアコマンドで大体直る気がします。
結構ReactNativeあるあるのようなので、これからReactNativeを触る方は特に参考にしていただければと思います！