search

react-navigation / react-navigation

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

Ghost bottom tabs nav button when Iconify is used and bottom tabs are hidden on AVD #11691

Open nathantew14 opened 10 months ago

nathantew14 commented 10 months ago

Current behavior

https://github.com/react-navigation/react-navigation/assets/40333518/14fa8eca-3374-4579-99de-052d1e4f9173

Using an AVD (Pixel 5) running API 34, if I use Iconify icons for my bottom tab, on screens where the bottom tab is hidden, clicking the top left corner of the screen can register a click on the last (right-most) tab button (page 3 in my example).

Additionally, if another tab in the bar has an Iconify icon with increased size (page 2 in my example), it can also be triggered by clicking somewhere in the top left corner of the screen.

I can verify this does not happen on my iOS device, but I do not have an android device to test on.

On a side note, if you start a new expo project then npm i using the package.json I provided, you might get a different behaviour where the AVD's top status bar is overlapping with my app screen due to lockfile differences. Use the provided lockfile instead.

Expected behavior

That should not happen.

Reproduction

https://github.com/nathantew14/ghost-btm-tab-nav-btn

Platform

Packages

Environment

package version
@react-navigation/native ^6.1.9
@react-navigation/bottom-tabs ^6.5.11
react-native-safe-area-context 4.6.3
react-native-screens ~3.22.0
react-native 0.72.4
expo ~49.0.5
npm or yarn 9.6.2
github-actions[bot] commented 10 months ago

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

nathantew14 commented 10 months ago

I can confirm that the issue persists and have updated the github repo