react-navigation / react-navigation/react-navigation
Custom tabBar function + position: absolute is not clickable on Android
Open
Nobody has claimed this yet.
bug
package:bottom-tabs
platform:android
repro provided
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
<Tab.Navigator
tabBar={props => <CustomTabBar {...props} />}
screenOptions={{
tabBarStyle: {
position: "absolute",
}
}}>
Android cannot click on any bottom tab.
iOS and web can click on both.
Expected behavior
All platforms behave the same.
Reproduction
https://snack.expo.dev/@mike_tt/bottom-tabs---absolute
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/bottom-tabs | 6.3.1 |
| react-native-safe-area-context | 3.3.2 |
| react-native-screens | 3.8.0 |
| expo | 43.0.0 |
| @react-navigation/native | 6.0.10 |
| @react-navigation/drawer | 6.4.1 |
| @react-navigation/material-bottom-tabs | 6.2.1 |
| @react-navigation/material-top-tabs | 6.2.1 |
| @react-navigation/stack | 6.2.1 |
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 by reproducing the Android behavior in the linked Expo Snack with @react-navigation/bottom-tabs, a custom tabBar, and position: "absolute". Compare it with iOS and web, then trace the bottom-tabs implementation responsible for tab interaction. Done means all bottom tabs are clickable on Android as they are on the other reported platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- 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