ReactNativeのSafeArea

React NativeのSafeArea

iPhone Xの上部のノッチとかあるところで進出してしまわないようにする

種類が多いので整理

react-native-safe-area-view

github

react-native-safe-area-contextに依存しているけど、なにが違うの #??

root部分をSafeAreaProviderで囲う

それ以外の場所をSafeAreaViewで囲う

react-native-safe-area-context

RN本家のもの

https://reactnative.dev/docs/safeareaview

問題がある

While React Native exports a SafeAreaView component, it has some inherent issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. In addition, this component only supports iOS 10+ with no support for older iOS versions or Android. We recommend to use the react-native-safe-area-context library to handle safe areas in a more reliable way. ref

expoのもの

https://docs.expo.io/versions/latest/sdk/safe-area-context/

React Navigationとの相性など

https://reactnavigation.org/docs/handling-safe-area/

createNativeStackNavigatorに変えたらSafeAreaが消えた