iOS 26: Custom Native-Stack Header Gets Rounded/Clipped During Navigation Transition

[Jonas-Bostoen]

Description

On iOS 26, custom header components rendered through @react-navigation/native-stack are being visually cut off during the new navigation animation introduced in this iOS version. This only affects screens using a custom React component as the header.

Details:

When using the native-stack navigator with a custom header, the top portion of the header becomes clipped during the transition animation on iOS 26. This behavior does not occur on earlier iOS versions.

const DashboardStack = createNativeStackNavigator<DashboardStackParamList>();

return (
   <StoreDashboardStack.Navigator
      screenOptions={{
        header: () => <View style={{ backgroundColor: 'red', height: 100, width: '100%' }} />,
      }}>
)

Simulator.Screen.Recording.-.iPhone.Air.-.2025-12-11.at.09.26.49.mov

Expected behavior

The custom header should behave the same as the default native-stack header on iOS 26—that is, no rounded corners should appear during navigation transitions. The header should remain fully rectangular and should not be visually clipped or masked at the top.

The following example shows the default native header, which demonstrates the expected behavior:

const DashboardStack = createNativeStackNavigator<DashboardStackParamList>();

return (
   <StoreDashboardStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: 'red',
        },
        title: '',
        headerBackVisible: false,
      }}>
)

Simulator.Screen.Recording.-.iPhone.Air.-.2025-12-11.at.10.13.11.mov

Original issue react-navigation: react-navigation/react-navigation#12894

Steps to reproduce

1. Have a screen with a custom header header component
2. Navigate to another screen

Snack or a link to a repository

https://github.com/Jonas-Bostoen/react-native-navigation-native-stack-headers

Screens version

4.18.0

React Native version

0.81.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

All iPhones running iOS26 in debug and release mode

Acknowledgements

Yes

[jpancotti]

This patch has been working for me, but my header is black. I was seeing those artifacts around all the edges on transitions. This should probably be transparent, but if your app background is black, this works as a hack:

diff --git a/node_modules/react-native-screens/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm b/node_modules/react-native-screens/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
index 1a2b3c4..5e6f7g8 100644
--- a/node_modules/react-native-screens/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
+++ b/node_modules/react-native-screens/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm
@@ -67,7 +67,7 @@
   // This is a temporary workaround to avoid UIScrollEdgeEffect glitch
   // when changing tabs when ScrollView is present.
   // TODO: don't hardcode color here
-  self.backgroundColor = [UIColor whiteColor];
+  self.backgroundColor = [UIColor blackColor];
 
   [self resetProps];
 }

[Jonas-Bostoen]

That patch does not work for us.