react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.33k stars 4.98k forks source link

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

Closed ManiTWIndia closed 2 months ago

ManiTWIndia commented 2 months ago

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.

https://github.com/react-navigation/react-navigation/assets/104359410/cf30327a-852e-4d86-a1e0-ac7f4161ffcb

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.

https://github.com/react-navigation/react-navigation/assets/104359410/c65acde1-1696-4717-b1e8-6c8a30d46665

Reproduction

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

Platform

Packages

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 commented 2 months ago

Open an issue in the dropdown library.

github-actions[bot] commented 2 months ago

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.