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

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,
  },
});