react-navigation / react-navigation/react-navigation
Header too tall when tabs are nested on Android
Open
Nobody has claimed this yet.
bug
platform:android
repro provided
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
Header too tall when tabs are nested on Android. See screen shots when using Expo Snack.
Android:
iOS:
Expected behavior
Expect the tab heights to be similar between iOS and Android.
Reproduction
https://snack.expo.dev/@charlie-cliftonbaygroup/repo-for-stacked-tabs-issue
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-drawer-layout
- react-native-tab-view
Environment
"expo-blur": "~14.1.5",
"expo-font": "~13.3.2",
"expo-router": "~5.1.3",
"expo-haptics": "~14.1.4",
"expo-linking": "~7.1.7",
"expo-symbols": "~0.4.5",
"expo-constants": "~17.1.7",
"expo-system-ui": "~5.0.10",
"expo-dev-client": "~5.2.4",
"expo-status-bar": "~2.2.3",
"expo-web-browser": "~14.2.0",
"@expo/vector-icons": "^14.1.0",
"expo-splash-screen": "~0.30.10",
"react-native-paper": "4.9.2",
"react-native-ble-plx": "^3.5.0",
"react-native-screens": "~4.11.1",
"react-native-webview": "13.13.5",
"react-native-keychain": "^10.0.0",
"react-native-reanimated": "~3.17.4",
"@react-navigation/native": "^7.1.6",
"react-native-permissions": "^5.4.1",
"react-native-numeric-input": "^1.9.1",
"react-native-modal-selector": "^2.1.2",
"react-native-gesture-handler": "~2.24.0",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/native-stack": "^7.3.21",
"react-native-safe-area-context": "5.4.0",
"react-native-tracking-transparency": "^0.1.2",
"react-native-keyboard-aware-scrollview": "^2.1.0"
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 Expo Snack reproduction and compare the nested @react-navigation/bottom-tabs and @react-navigation/native-stack behavior on Android and iOS. Trace the header and tab sizing involved in that combination, then verify that the Android tab heights are similar to iOS in the reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100