appandflow / appandflow/react-native-safe-area-context

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

未關閉
#689 2 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
TypeScript
星號
2.8k
分支
258
平均合併
3 天 1 小時
30 天內合併 PR
2

描述

## 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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。