Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#505 1 comentário 0 reações 0 responsáveis Ver no GitHub

@thiagobrez já está trabalhando nisso.

Desde 5/9/2026.

  • #569 de @thiagobrez — aberto

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
38/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
ios, react-native
Domínio
mobile-dev

Direção de pesquisa

Reproduza o problema no iOS usando a configuração fornecida de KeyboardAvoidingView, createNativeBottomTabNavigator e barra de abas liquid glass. Compare o comportamento com e sem a solução alternativa de margem tabBarHeight e, em seguida, rastreie o layout de bottom-tabs e a interação com a evitação do teclado. Considera-se concluído quando o conteúdo permanecer visível acima da barra de abas translúcida sem exigir essa solução alternativa.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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,
  },
});
Linguagem predominante
TypeScript
Estrelas
1.5k
Forks
110
Merge médio
2d 18h
PRs com merge (30d)
2

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-bottom-tabs

Todas as issues de callstack/react-native-bottom-tabs

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.