Dropdown and popover components opening at incorrect position in iOS when using default header in React Navigation 6 stack

[ManiTWIndia]

Current behavior

When opening the select component, the dropdown list appears shifted upwards. It positions itself above its expected location by the exact height of the header.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-03-13.at.15.59.43.mp4

React Native version: 0.73.6
@react-navigation/stack version: 6.3.28
React Native new architecture: Fabric
Device/OS: iOS

The issue happens in React native new architecture and it is not happening only for the above mentioned Select component (react-native-modal-dropdown) but also happens in Popover component (react-native-popover-view)

Expected behavior

The dropdown should open right below the select component as in below video. This works when we pass headerShown: false in options or custom header is passed. Issue happens when using default header from react-navigation-stack.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-03-13.at.15.59.14.mp4

Reproduction

https://github.com/ManiTWIndia/stack-navigation-header-issue

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

package	version
@react-navigation/native	6.1.16
@react-navigation/stack	6.3.28
react-native-safe-area-context	4.9.0
react-native-screens	3.29.0
react-native-gesture-handler	2.15.0
react-native-reanimated	3.8.0
react-native	6.1.16
node	v20.11.1
npm or yarn	10.2.4

[satya164]

Open an issue in the dropdown library.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.