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 摘要。