React Native: What is the use of SafeAreaProvider

user_16120177 0
Viewed 6891

What is the use of SafeAreaProvider? I didn't understand the github documentation https://github.com/th3rdwave/react-native-safe-area-context.
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...

react-native reactjs
2 Answers

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

user_79655470

Doing some tests to see if I can avoid using SafeAreaProvider, seems like there might be no need for it if you are just using SafeAreaView (tested on mobile, not sure on web since the docs say it needs different config.). If however, you want to use any of the inset values via hooks, such as useSafeAreaInsets, then you are require to do so.

If you don't know what a provider and a consumer are, then check it out contexts in react.

Therefore, I don't think safeAreaView consumes from this provider, since it still works fine without it.

It would help if it was clearer, this was just the conclusion of a simple test.

user_137917960
Related