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

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

Đang mở
#689 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
2.8k
Fork
258
Merge trung bình
3 ngày 1 giờ
Pull request đã merge (30 ngày)
2

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.