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

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 (
   <DashboardStack.Navigator
      screenOptions={{
        header: () => <View style={{ backgroundColor: 'red', height: 100, width: '100%' }} />,
      }}>
)

https://github.com/user-attachments/assets/b01506af-0798-4465-bec1-7f1f7932b551

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 (
   <DashboardStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: 'red',
        },
        title: '',
        headerBackVisible: false,
      }}>
)

https://github.com/user-attachments/assets/2938470e-3b01-478d-bd8c-2f88d2700940

Original issue react-navigation: https://github.com/react-navigation/react-navigation/issues/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

Start by reproducing the custom header transition in the linked repository with @react-navigation/native-stack on an iOS 26 device, then compare it with the default native header behavior. Trace the native-stack header transition path and identify where the custom header is rounded or clipped; done means custom headers remain fully rectangular without top clipping during navigation.