Nested SafeAreaProvider ignores parent's initialMetrics, causes flash on mount

[marcospgp]

Update: Root cause identified

After extensive debugging, we found the root cause is not the nested SafeAreaProvider itself, but
how it interacts with NativeTabs pre-rendering.

The actual problem

1. NativeTabs (expo-router) pre-renders ALL tabs simultaneously when the app loads
2. At pre-render time, nested SafeAreaProviders haven't measured yet
3. Components get the root provider's value (device safe area only, e.g. 34px)
4. When user visits a tab, the nested SafeAreaProvider measures bounded insets (e.g. 83px including tab
   bar)
5. This causes a visible jump as the layout shifts

What we tried

• Context-based caching: Doesn't work because NativeTabs isolates React context between tabs
• Module-level caching: Doesn't help the first tab because all tabs pre-render simultaneously before
  any measurement
• SafeAreaView: Uses the existing provider's values, doesn't measure bounded insets
• initialMetrics: We don't know the bounded value ahead of time

The fundamental issue

There's no way to get synchronous bounded insets from a nested SafeAreaProvider. The measurement is
always async, but NativeTabs pre-renders tabs before measurement completes.

Current workaround

Accept the flash as a known limitation. It only occurs on first visit to each tab (components stay
mounted after).

Potential library-level fixes

1. Option to pass a callback/promise to initialMetrics that resolves after first measurement
2. A useSafeAreaInsetsSync() hook that blocks render until measurement completes
3. Better documentation about this interaction with tab navigators that pre-render

[marcospgp]

Update: This is likely a NativeTabs issue, not safe-area-context

After more debugging, I believe the measurement logic in react-native-safe-area-context is correct. The problem is that NativeTabs (expo-router) doesn't position pre-rendered tab content correctly in the native view hierarchy.

When tabs are pre-rendered, they're not positioned as children of the tab bar layout. So when a nested SafeAreaProvider measures, it correctly measures from its container to the screen edge - but that container isn't in the right place yet.

The fix should be in NativeTabs to position pre-rendered content correctly from the start. Filed the upstream issue at expo/expo#42486.

Keeping this issue open for reference, but the action item is on the expo side.

[cyyprian]

Same issue inside Modal