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

iOS: Duplicate SafeArea spacing issue when using Navigation Header with SafeAreaView

Đang mở
#650 6 bình luận 10 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ả

## Problem Description
When using `react-native-safe-area-context`'s `SafeAreaView` with React Navigation headers, extra spacing appears between the header and content on iOS. This doesn't happen when using `react-native`'s built-in `SafeAreaView`.

## Steps to Reproduce
1. Create a screen with React Navigation header
2. Use `react-native-safe-area-context`'s `SafeAreaView`
3. Add content inside the SafeAreaView
4. Test on iOS simulator/device

## Code Example
```typescript
import {Text} from 'react-native';
import React, {useEffect} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import type {StackNavigationOptions} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';

const StartScreen = () => {
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({
headerTitle: 'Start',
} as Partial);
}, []);

return (

StartScreengg

);
};

export default StartScreen;
```

## Screenshot
Image

## Current Behavior
- **With react-native-safe-area-context**: Extra spacing between header and content
- **With react-native**: No extra spacing (works correctly)

## Root Cause
`react-native-safe-area-context` applies SafeArea insets even when React Navigation headers already handle the top SafeArea, causing duplicate spacing.

## Solution
Use conditional SafeArea edges to exclude top inset when header is present:

```typescript

Content

```

```
"dependencies": {
"@expo/metro-config": "~0.20.0",
"@gorhom/bottom-sheet": "^5",
"@gorhom/portal": "^1.0.14",
"@hackler/react-native-sdk": "^3.22.0",
"@kesha-antonov/react-native-action-cable": "^1.1.5",
"@react-native-community/netinfo": "11.4.1",
"@react-navigation/native": "^7.1.14",
"@react-navigation/stack": "^7.4.2",
"@sentry/react-native": "~6.14.0",
"axios": "^1.8.3",
"buffer": "^6.0.3",
"expo": "~53.0.20",
"expo-application": "~6.1.5",
"expo-brightness": "~13.1.4",
"expo-file-system": "~18.1.11",
"expo-image-manipulator": "~13.1.7",
"expo-keep-awake": "~14.1.4",
"expo-linear-gradient": "~14.1.5",
"expo-screen-orientation": "~8.1.7",
"expo-splash-screen": "~0.30.10",
"expo-system-ui": "~5.0.10",
"expo-updates": "~0.28.17",
"i18next": "^23.16.8",
"immer": "^10.1.1",
"jotai": "^2.12.5",
"jotai-effect": "^2.0.2",
"lottie-react-native": "7.2.2",
"moti": "^0.30.0",
"react": "19.0.0",
"react-i18next": "^13.5.0",
"react-native": "0.79.5",
"react-native-agora": "^4.5.3",
"react-native-appsflyer": "^6.16.2",
"react-native-check-version": "^1.4.0",
"react-native-compressor": "^1.12.0",
"react-native-gesture-handler": "~2.24.0",
"react-native-get-random-values": "~1.11.0",
"react-native-localize": "^3.4.1",
"react-native-mmkv": "^3.3.0",
"react-native-reanimated": "~3.17.4",
"react-native-restart": "^0.0.27",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-svg": "15.11.2",
"react-native-url-polyfill": "^2.0.0",
"react-native-vision-camera": "^4.7.1",
"react-native-webview": "13.13.5",
"react-native-worklets-core": "^1.6.0",
"rxjs": "^7.8.2",
"uuid": "^9.0.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/eslint-parser": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "18.0.0",
"@react-native-community/cli-platform-android": "18.0.0",
"@react-native-community/cli-platform-ios": "18.0.0",
"@react-native/babel-preset": "0.79.2",
"@react-native/eslint-config": "0.79.2",
"@react-native/metro-config": "0.79.2",
"@react-native/typescript-config": "0.79.2",
"@testing-library/react-native": "^12.9.0",
"@types/jest": "^29.5.14",
"@types/lodash": "^4.17.16",
"@types/react": "~19.0.10",
"@types/react-test-renderer": "19.0.0",
"@types/uuid": "^9.0.8",
"babel-plugin-module-resolver": "^5.0.2",
"eas-cli": "^15.0.15",
"eslint": "^8.57.1",
"eslint-plugin-prettier": "^5.2.3",
"eslint-plugin-react-native": "^4.1.0",
"jest": "^29.7.0",
"prettier": "^3.4.2",
"react-native-oss-license": "^0.7.0",
"react-native-svg-transformer": "^1.5.0",
"react-test-renderer": "19.0.0",
"typescript": "~5.8.3"
},
```

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.