reactjsreact-native

React Native: What is the use of SafeAreaProvider


What is the use of SafeAreaProvider? I didn't understand the github documentation.
For what i have to use it ? SafeAreaView makes a nice job...
Even if SafeAreaProvider must be used with React-navigation:

<SafeAreaView>
  <SafeAreaProvider>
    <NavigationContainer>
      ...
    </NavigationContainer>
  </SafeAreaProvider>
</SafeAreaView>

I do not see its use...


Solution

  • What is the <SafeAreaProvider>

    it is a React context provider, this is an away to pass props down, it will calculate the safe area once and pass it down to all SafeAreaViews and hooks like useSafeAreaInsets

    What is the safe area?

    safe areas is phone screen without notches, Such items include:

    1. Physical notches
    2. Status bar overlay
    3. Home activity indicator on iOS
    4. Navigation bar on Android

    The area not overlapped by such items is referred to as "safe area".

    you can see more example and images in reactnavigation.org here and you will understand.

    with SafeArea the content will be

    enter image description here

    without SafeArea the content will be

    enter image description here