[ReactNative] SafeAreaViewで混乱しないために

SafeAreaViewが複数のライブラリから提供されていて混乱する。どれを使えばいいのよと。
筆者の知る限り、最低3つのライブラリで観測してる。

• react-native
• react-native-safe-area-context
• react-native-safe-area-view

「どれでも良いのでは？」と思うかもしれないが、実はどれでも良くない。
適切に選ばないと予想通りの動作をしない。
対策をこの記事に残しておく。

まとめ

• SafeAreaViewは必ずSafeAreaProviderで囲もう
• SafeAreaProviderはreact-native-safe-area-contextからimportできる。
• 特別な要求が無い限りはreact-nativeのSafeAreaViewで十分。ちゃんと機能する。
• 特別な要求（ex：ページ下部だけ適用させたい）がある場合は、react-native-safe-area-viewのSafeAreaViewを利用する。

詳細

必ずSafeAreaProviderでラップしておくこと

こいつが無いと、SafeAreaViewがうまいこと機能しないことがある。
どのライブラリのSafeAreaViewを使おうが、必ずSafeAreaProviderで囲んでおくと安全。

基本的にはreact-nativeのSafeAreaViewで十分である。

ナビゲーション（@react-navigation/bottom-tabs）などを利用しない限りは、標準のもので十分。
ページ上部、下部ともにSafeAreaを適用してくれる。

標準から少し外れるような機能を使いたいならreact-native-safe-area-view

例えば「ページ上部は適用しなくていい。下部だけ適用してくれ」といった要求がある場合に利用する。
ナビゲーションを利用する場合も、こいつを使っておけば安心。
ちなみに「ページ下部だけ適用させたい」場合の実装は以下

<SafeAreaView style={styles.container} forceInset={{ top: 'never' }}>
  <Text style={styles.paragraph}>This is top text.</Text>
  <Text style={styles.paragraph}>This is bottom text.</Text>
</SafeAreaView>

参考

• https://stackoverflow.com/questions/61887661/what-are-the-differences-between-different-implementations-of-safeareaview
• https://github.com/react-navigation/react-native-safe-area-view