callstack / callstack/react-native-bottom-tabs
Tab bar does not respect KeyboardAvoidingView on iOS (Liquid glass) - Renders on top of it
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.5k
- Forks
- 109
- Merge medio
- 11 h 44 min
- PR fusionados (30 d)
- 8
Descripción
### 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,
},
});
```
Guía de contribución
Línea de trabajo
Reproduce el problema en iOS usando la configuración proporcionada de KeyboardAvoidingView, createNativeBottomTabNavigator y la barra de pestañas liquid glass. Compara el comportamiento con y sin la solución alternativa del margen de tabBarHeight y, después, sigue el diseño de bottom-tabs y su interacción con la evitación del teclado. Se considera terminado cuando el contenido permanece visible por encima de la barra de pestañas translúcida sin requerir esa solución alternativa.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- ios, react-native
- Área
- mobile-dev
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 38/100