Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#505 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@thiagobrez ya está trabajando en esto.

Desde el 5/9/2026.

  • #569 de @thiagobrez — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
ios, react-native
Área
mobile-dev

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.

Descripción

bug
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

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();

<KeyboardAvoidingView
  behavior="padding"
  style={{ marginBottom: Platform.OS === "ios" ? tabBarHeight : 0 }}>
  {/* content */}
</KeyboardAvoidingView>
Library version

1.1.0

Environment info
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
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
      behavior="padding"
      style={styles.container}
      // Workaround: Uncomment the line below to fix the issue
      // style={{ flex: 1, marginBottom: Platform.OS === 'ios' ? tabBarHeight : 0 }}
    >
      <View style={styles.content}>
        <Text style={styles.title}>KeyboardAvoidingView + Bottom Tabs Bug</Text>
        <View style={styles.spacer} />
        <TextInput
          style={styles.input}
          placeholder="Tap here to open keyboard"
          placeholderTextColor="#999"
        />
      </View>
    </KeyboardAvoidingView>
  );
}

function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text>Settings</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: () => require('./assets/home-icon.png'),
          }}
        />
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarIcon: () => require('./assets/settings-icon.png'),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

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,
  },
});
Lenguaje dominante
TypeScript
Estrellas
1.5k
Forks
108
Merge medio
22 h 32 min
PR fusionados (30 d)
8

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de callstack/react-native-bottom-tabs

Todos los issues de callstack/react-native-bottom-tabs

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.