callstack / callstack/react-native-bottom-tabs

Tab bar does not respect KeyboardAvoidingView on iOS (Liquid glass) - Renders on top of it

Đang mở
#505 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.