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

[kkkkYoungJae]

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

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<StackNavigationOptions>);
  }, []);

  return (
    <SafeAreaView>
      <Text>StartScreengg</Text>
    </SafeAreaView>
  );
};

export default StartScreen;

Screenshot

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:

<SafeAreaView edges={['bottom', 'left', 'right']}>
  <Text>Content</Text>
</SafeAreaView>

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

[Prajwaltechversant]

+1
I have the same issue in ios and android.In my case the extra space is there in bottom too

[jerome-coinmarketcal]

Same here

[ahernandezhn]

I am having the same issue. Your work around fixed it.

[JanSzewczyk]

+1