What is you prefered way of using react-native-safe-area-context? In the library documentation they say: https://github.com/th3rdwave/react-native-safe-area-context
- SafeAreaView is the preferred way to consume insets. This is a regular View with insets applied as extra padding or margin. It offers better performance by applying insets natively and avoids flickers that can happen with the other JS based consumers.
- useSafeAreaInsets offers more flexibility, but can cause some layout flicker in certain cases. Use this if you need more control over how insets are applied.
On the other hand React Navigation library has quite different view on this: https://reactnavigation.org/docs/handling-safe-area/
- "Note: The react-native-safe-area-context library also exports a SafeAreaView component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the useSafeAreaInsets hook instead and avoid using the SafeAreaView component."
And also in the summary of the chapter they say:
- Use useSafeAreaInsets hook from react-native-safe-area-context instead of SafeAreaView component
- Don't wrap your whole app in SafeAreaView, instead apply the styles to content inside your screens
- Apply only specific insets using the useSafeAreaInsets hook for more control
Who to trust more? I don't want my user to experience neither flicker nor jumpy behavior, I don't know in what situation it may happen in particular. Do you have experience in that regard? Thanks.
Reading the Oficial documentation and applying different kinds of examples I can say, it depends of your necessity. In my case I decided to use SafeAreaView applying the edges to add a kind of Custom status bar. So, you need to deep in the necessity of your case. I'm basing on this documentation https://github.com/th3rdwave/react-native-safe-area-context