6

I know that I always need to use <safeAreaView> to keep my content in the correct place of the screen in iOS.

Even I'm build an app just for Android, seems there isn't problem use <safeAreaView>, in case of I want to build the same app for the iOS platform.

My question is, am I wrong if I ALWAYS use <safeAreaView> to wrap all my content? Why would I use <View> if perhaps in the future I'll have to replace everything with <safeAreaView>?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Henrique
  • 362
  • 1
  • 5
  • 13
  • 1
    Because you might want your content to go to the edges of the screen sometimes, underneath any notches or gesture controls. – Jon Mar 05 '20 at 19:22
  • 1
    For tabbed views, it is handled by default. For iOS with no enclosing tabs, we should use it unless as specified on answer by @Jon. As you apps scrollable area might collide with "swipe up to go to home" behavior on iOS device with notches. – Samin Mar 06 '20 at 09:07

1 Answers1

6

If you are using navigation libraries like react-navigation or react-native-router-flux then you don't need to use <SafeAreaView>. These libraries manage automatically it. You have to only use when any screen has headerMode:none or it out side of the navigation. If you are using full screen modal then you should use <SafeAreaView>.

Kishan Bharda
  • 5,446
  • 3
  • 30
  • 57
  • 2
    I don't thing having navigation handles it. For android it might but for iOS with swipe gesture to go to home on bottom, one must use safeareview. – Samin Mar 06 '20 at 09:04
  • 2
    React navigation doesn't handle it, but does have its own version on SafeAreaView which stops animation judders. https://stackoverflow.com/questions/53476125/how-to-deal-with-safeareaview-react-navigation – Harry B Aug 20 '20 at 16:53