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

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

Abierto
#650 6 comentarios 10 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
2.8k
Forks
258
Merge medio
3 d 1 h
PR fusionados (30 d)
2

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.