callstack / callstack/react-native-bottom-tabs
Tab bar does not respect KeyboardAvoidingView on iOS (Liquid glass) - Renders on top of it
- Ngôn ngữ chính
- TypeScript
- Star
- 1.5k
- Fork
- 109
- Merge trung bình
- 11 giờ 44 phút
- Pull request đã merge (30 ngày)
- 8
Mô tả
### Before submitting a new issue
- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] I checked for possible duplicate issues, with possible answers.
### Bug summary
When using KeyboardAvoidingView with react-native-bottom-tabs on iOS with the new "liquid glass" tab bar style, the keyboard-avoiding content is rendered underneath the tab bar. The KeyboardAvoidingView's padding/height calculation doesn't account for the translucent tab bar height, causing the bottom portion of the content to be obscured.
Current workaround:
const tabBarHeight = useBottomTabBarHeight();
```
{/* content */}
```
### Library version
1.1.0
### Environment info
```shell
System:
OS: macOS 15.7.1
CPU: (10) arm64 Apple M4
Memory: 144.44 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 25.2.1
Yarn: Not Found
npm:
version: 11.6.2
Watchman:
version: 2025.10.27.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.2
- iOS 26.2
- macOS 26.2
- tvOS 26.2
- visionOS 26.2
- watchOS 26.2
Android SDK: Not Found
IDEs:
Android Studio: 2025.2 AI-252.25557.131.2521.14344949
Xcode:
version: 26.2/17C52
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.17
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.1.2
wanted: latest
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.81.5
wanted: 0.81.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
```
### Steps to reproduce
1. Set up a screen with bottom tabs using react-native-bottom-tabs
2. Wrap content in a KeyboardAvoidingView with behavior="padding"
3. Use a view inside it with 100% height or flex 1.
4. The tab bar renders on top of it.
### Reproducible sample code
```js
import React from 'react';
import {
KeyboardAvoidingView,
Platform,
TextInput,
View,
StyleSheet,
Text,
} from 'react-native';
import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { useBottomTabBarHeight } from 'react-native-bottom-tabs';
const Tab = createNativeBottomTabNavigator();
function HomeScreen() {
const tabBarHeight = useBottomTabBarHeight();
return (
KeyboardAvoidingView + Bottom Tabs Bug
);
}
function SettingsScreen() {
return (
Settings
);
}
export default function App() {
return (
require('./assets/home-icon.png'),
}}
/>
require('./assets/settings-icon.png'),
}}
/>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
},
content: {
flex: 1,
padding: 20,
justifyContent: 'flex-end',
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
},
spacer: {
flex: 1,
},
input: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
padding: 15,
fontSize: 16,
},
});
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Tái hiện vấn đề trên iOS bằng thiết lập KeyboardAvoidingView, createNativeBottomTabNavigator và thanh tab liquid glass được cung cấp. So sánh hành vi khi có và không có workaround margin tabBarHeight, sau đó theo dõi layout của bottom-tabs và tương tác với cơ chế tránh bàn phím. Được xem là hoàn tất khi nội dung vẫn hiển thị phía trên thanh tab trong suốt mà không cần workaround đó.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- ios, react-native
- Lĩnh vực
- mobile-dev
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 38/100