[docs] possible inconsistency on SafeAreaProvider in Expo Router docs

[chriszs]

Summary

I'm a little confused. When I followed the documentation to integrate Expo Router, I followed the existing instruction to delete my use of SafeAreaProvider, but now when I test my app using the new architecture, the screens on which I use SafeAreaView aren't rendering with a safe area and I see this new instruction on the Appearance Elements page to add the SafeAreaProvider in my root layout and use the useSafeAreaInsets hook. Digging further, I see that this was added in #26501, the motivation for which is an issue titled "Document that safe area view isn’t needed as safe area context is available." Safe area view isn't needed, or safe area view is no longer supported? I'm not sure, because the view is still working on the pre-new architecture build and this doesn't tell me otherwise. Is the context available, or do I have to add it? The React Navigation migration doc still says to delete the provider because Expo Router calls it implicitly.

Link to the related docs page

• https://docs.expo.dev/router/appearance/#supporting-safe-areas
• https://docs.expo.dev/router/migrate/from-react-navigation/#delete-unused-or-managed-code

Anything else?

The good news is, when I do follow these instructions, it does appear to work, i.e. I have safe areas again on the new architecture. So the instructions do appear to produce the correct result.

[brentvatne]

@chriszs - can you share a minimal reproducible example of this issue on the new architecture?

[chriszs]

@brentvatne I can try, though it's just as likely to be a safe-area-context-provider bug. On the other hand, I don't see anyone else reporting it, so I don't know what's going on there. I'm reporting it as a docs inconsistency, because the instruction to re-add the provider confused me (when I remove it now, useSafeAreaInsets still seems to work okay, so it may not be necessary), as well as the motivation for recommending useSafeAreaInsets (in the past, safe-area-context recommended avoiding it because SafeAreaView was a native component that was more synchronous, avoiding a nasty post-render visual jump, but that may or may not be true under new arch).

[chriszs]

Here's the minimal repro: chriszs/test-expo-app#4

Before:

After:

Also filed this upstream: th3rdwave/react-native-safe-area-context#496

We'll see what they say.

[Shakahs]

I'm running into this as well, SafeAreaView does not work but useSafeAreaInsets() does. It appears to be an upstream bug.
Expo 51 on New Architecture.