callstack / callstack/react-native-bottom-tabs

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

Abierto
#505 1 comentario 0 reacciones 0 asignados Ver en GitHub
bug
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.