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

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

Offen
#650 6 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
2.8k
Forks
258
Ø Merge
3 T. 1 Std.
Gemergte PRs (30 T.)
2

Beschreibung

## 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"
},
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.