Tooltip Content Not Positioned Correctly with Navigation Header

[himanimodi1906]

trafficstars

My navigation flow is as follows:

Tab Navigation (headerShown: false) → Stack Navigation (headerShown: true) → First screen

On the first screen, I set a button in the HeaderRight and attach a tooltip with the placement set to bottom. However, only the background is visible, and the tooltip content doesn't appear correctly. When I set top: 0, the content is shown, but it's not in the correct position.

I need to calculate the top space of the button and use that value for positioning the tooltip, instead of using top: 0. The issue also occurs with placement: top. On the other hand, placement: left and placement: right work as expected.

The main issue is that the top and bottom spaces relative to the header in the navigation stack are not being calculated properly, which causes incorrect tooltip positioning.

Expected Behavior:

The tooltip should be positioned correctly below the button when placement is set to bottom, and above the button when placement is set to top. The positioning should be based on the actual location of the button within the header, considering the header's top and bottom space. We shouldn't have to manually pass the top space in tooltipStyle.

Steps to Reproduce:

• Set up a Tab Navigation with a nested Stack Navigation.
• On the first screen of the Stack Navigation, add a button in the HeaderRight.
• Attach a tooltip to the button with placement set to bottom.
• Observe that only the background of the tooltip is shown, but the content is not positioned correctly.
• Try setting top: 0, and notice that the content is displayed but not at the correct position.
• The same issue occurs with placement: top, but placement: left and placement: right work as expected.

Environment:

• @react-navigation/native: "^7.0.14"
• @react-navigation/native-stack: "^7.2.0"
• @react-navigation/bottom-tabs: "^7.2.0"
• react-native-walkthrough-tooltip: "^1.6.0"

Additional Information:

The positioning issue seems related to the way the navigation header’s top and bottom spaces are being calculated.