React NavigationのBottomTabがiPhone12でSafeAreaが効かなくなる問題の対処法

備忘録を兼ねて。

React NavigationのBottomTabを使用している場合に、iPhone12の場合だけSafeAreaが効かなくなることがあります。
これの修正方法を調べました。

原因はreact-native-safe-area-viewのバージョン

React Navigationで使用しているreact-native-safe-area-viewのバージョンが古く、そのせいでiPhone12だけうまく動かないようです。
なぜiPhone12だけ？とは思いますが、このバージョンを合わせます。

インストールするバージョンはこちら。

react-native-safe-area-view@^2.0.0

また、React Navigationで使用しているバージョンを強制的に上げるため、package.jsonに以下の記述を追加します(devDependenciesの下あたり)。

"resolutions": {
"react-native-safe-area-view": "^2.0.0"
},

上記を記載して、念のためnode_modulesのReactNavigation関連のフォルダを削除してから、yarn addを実行します。
ちなみにこの「resolutions」の指定はnpmでは効きません。
npmでも使う方法もあるようなのですが、自分はうまく動かなかったのでやめてyarnに変えました。

さらにAppのルートにSafeAreaProviderを追加。
アプリのルートを<SafeAreaProvider>〜</SafeAreaProvider>でくくる必要があるようです。

上記実行してビルドすれば動くはずです。

まとめ

まとめると以下の通りです。

1. react-native-safe-area-view@^2.0.0をyarn addする
2. resolutionsの指定を追記する
3. node_modulesからReact Navigation関連フォルダを削除してyarn addし直す
4. アプリをSafeAreaProviderでラップする

React Navigationのv4,v5の両方で確認しました。
何か手順漏れてるかもしれないので、うまくいかなかったりしたら教えてください。