react-navigation / react-navigation/react-navigation
Ghost bottom tabs nav button when Iconify is used and bottom tabs are hidden on AVD
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
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
- 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
- I've removed the packages that I don't use
| 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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository on an Android API 34 Pixel 5 AVD, using the provided lockfile and the @react-navigation/bottom-tabs package. Reproduce the ghost tab activation when bottom tabs are hidden and when an Iconify icon is enlarged, then trace the bottom-tabs Android touch handling. Done means taps in the top-left area no longer activate hidden or distant tab buttons while normal tab presses still work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100