Android vs. iOS different top insets for Safe Area View (SDK 52, old arch)

[peterpme]

Hello!

Using the following:

• react navigation v7
• native stack navigator
• react-native-safe-area-context
• SDK 52
• I copied the Blue Sky

On Android, when I build with react-native-edge-to-edge, I'm getting a ton of extra padding. This only appears if I'm using edge-to-edge. Otherwise the padding is gone. There is no problem on iOS. See left vs. right.

As soon as I remove edge-to-edge, everything continues to work as intended. Has anyone run into this problem? Am I doing something wrong?

Thanks!

[zoontek]

@peterpme Hello! react-native-edge-to-edge does not add any padding, so here it might come from somewhere else (another library, or specific react-native-screens / react-navigation config).

I'm trying to reproduce, but not sure how. Can you reduce the issue to the minimum amount of code possible?

[peterpme]

Hey @zoontek !!

I was able to put together a minimal recreation here:
https://github.com/peterpme/edge-to-edge-demo

As you can see from the screenshots, as soon as I enable it, there is extra padding.

Thanks!

[zoontek]

Thanks, I will check as soon as I can!

[zoontek]

@peterpme Just checked it, it appears there's no need for paddingTop: insets.top here, as it's automatically handled by react-navigation.

const topInset =
  isParentHeaderShown || // false
  (Platform.OS === 'ios' && isModal) || // false 
  (isIPhone && isLandscape) // false
    ? 0
    : insets.top; // so topInset = safe area insets.top

const headerTopInsetEnabled =
  typeof statusBarTranslucent === 'boolean' // false
    ? statusBarTranslucent
    : topInset !== 0; // true, so headerTopInsetEnabled = true

Sources:

• NativeStackView.native.tsx#L181
• NativeStackView.native.tsx#L237

There's no need to set insets.top on your side:

function NavLayout({ children }) {
- const insets = useSafeAreaInsets();
- return <View style={{ flex: 1, paddingTop: insets.top }}>{children}</View>;
+ return <View style={{ flex: 1 }}>{children}</View>;
}

Works on iOS and Android:

---

Note that topInsetEnabled will be enforced directly at react-native-screens level soon (with react-native-edge-to-edge detection), allow react-navigation to tackle a bunch of hacky code in this file.