[Android] Content doesn't resize when tab bar visibility changes (tabBarHidden)
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 35/100
调研方向
首先阅读 android/src/main/java/com/th3rdwave/safeareacontext/RCTTabView.kt，并通过切换 tabBarHidden 复现提供的 Android 示例。当标签栏隐藏时，React 内容和底部锚定的视图调整为完整的可用高度，并在标签栏显示时正确恢复，即表示完成。
由索引模型根据 Issue 内容生成。
描述
Before submitting a new issue
- I tested using the latest version of the library, as the bug might be already fixed.
- I tested using a supported version of react native.
- I checked for possible duplicate issues, with possible answers.
Bug summary
On Android, when tabBarHidden is toggled to true, the native bottom navigation view is set to GONE and its space is reclaimed at the native level, but the React content does not grow to fill it. The screen keeps its old height, leaving a blank strip at the bottom exactly the height of the tab bar. Bottom-anchored elements (position: 'absolute', bottom: 0) end up floating ~80dp above the actual bottom of the screen. Toggling back to visible has the same problem in reverse until something else triggers a relayout.
I tracked it down to the layout listener in RCTTabView.kt. The size-change guard compares the bounds of the whole container (ReactBottomNavigationView), but when only the tab bar visibility changes, the container keeps the exact same size — only the inner layoutHolder grows or shrinks:
post {
addOnLayoutChangeListener { _, left, top, right, bottom, _, _, _, _ ->
val newWidth = right - left // container size — unchanged when tab bar is hidden
val newHeight = bottom - top
onTabBarMeasuredListener?.invoke(...)
if (newWidth != lastReportedSize?.width || newHeight != lastReportedSize?.height) {
// never reached in this case, so onNativeLayoutListener doesn't fire
onNativeLayoutListener?.invoke(dpWidth, dpHeight)
lastReportedSize = Size(newWidth, newHeight)
}
}
}
Two problems compound here:
- The guard compares the container size, while the value actually reported to JS is the
layoutHoldersize. When the tab bar is hidden, the container stays the same butlayoutHolderchanges, so the guard filters the update out. - The listener is attached to the container, and
OnLayoutChangeListeneronly fires when that view's own bounds change — which they don't in this scenario. So even the callback itself may not run.
As a result onNativeLayout never reaches the JS side, setMeasuredDimensions keeps the stale height, and the children rendered by TabView stay at the old size.
Verified on an emulator with uiautomator dump: after hiding the tab bar, the native layoutHolder grows to full screen height (2400px on my device), while the React subtree inside it stays at the previous 2126px.
iOS is not affected.
Library version
1.4.0
Environment info
System:
OS: macOS 26.5.2
CPU: (18) arm64 Apple M5 Pro
Binaries:
Node: 24.13.0
Yarn: 3.6.4
npm: 11.6.2
npmPackages:
react: 19.2.3
react-native: 0.86.0
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Steps to reproduce
- Android app using
createNativeBottomTabNavigator(New Architecture). - Render a screen with a bottom-anchored view, e.g. an action bar with
position: 'absolute', bottom: 0. - Toggle
tabBarHiddentotrue(typical case: entering a selection/edit mode). - The tab bar disappears, but the bottom-anchored view stays where the tab bar's top edge used to be, with an empty strip below it.
Tested on an Android 16 emulator (arm64), RN 0.86, and reproduced consistently.
Reproducible sample code
const [hidden, setHidden] = useState(false);
<TabView tabBarHidden={hidden} ...>
{/* screen content */}
<View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 56 }}>
<Button title="toggle" onPress={() => setHidden(v => !v)} />
</View>
</TabView>
I have a fix working locally (report the layoutHolder size instead, and also listen to layoutHolder layout changes so the visibility-toggle case is caught). Will open a PR.
- 主要语言
- TypeScript
- 星标
- 1.5k
- 派生
- 110
- 平均合并
- 2 天 18 小时
- 30 天内合并 PR
- 2
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
callstack/react-native-bottom-tabs 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 75/100
-
[iOS] Fabric: SIGABRT on tab press when tab key contains non-ASCII characters (kCFStringEncodingUTF8 passed to -cStringUsingEncoding:)可能已有人在做 @thiagobrez 于 51 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 75/100
-
bug
难度 3/5 1-2 天 新手友好度 72/100
-
难度 4/5 3-5 天 新手友好度 48/100
-
难度 4/5 3-5 天 新手友好度 68/100
callstack/react-native-bottom-tabs#591 · 1 条评论 ·
查看 callstack/react-native-bottom-tabs 的全部 Issue
相似的 Issue
-
streams:add
难度 2/5 1 小时以内 新手友好度 70/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
apache/rocketmq-dashboard#6872 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
interledger/publisher-tools#931 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
ARTPARK-SAHAI-ORG/calibrate-frontend#727 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 70/100
fab-geocommuns/RNB-site#539 ·
维护者通常 2 天内回复