callstack / callstack/react-native-bottom-tabs
Tab bar does not respect KeyboardAvoidingView on iOS (Liquid glass) - Renders on top of it
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 109
- Avg merge
- 11h 44m
- Merged PRs (30d)
- 8
Description
### 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,
},
});
```
Contributor guide
Assessment
This issue has not been assessed yet.