Hide Tab Bar on invoking keyboard for createMaterialTopTabNavigator as a Bottom Tab Navigator implementation - react-native

Question

Heyy everyone, I was using the React Navigation 5 createMaterialTopTabNavigator for a Bottom Navigation setup as I needed the swipe transition that Material Top Navigator offers as well, but unlike createBottomTabNavigator, the Material Top doesn't have a keyboardHidesTabBar so that I can make sure that tab bar is hidden when the keyboard opens, but thats something I'm trying to achieve (https://material.io/components/bottom-navigation#placement).
Any other way to get something like this done?
Here's the current snack to play around: https://snack.expo.io/qTDqLo1eb
Here's the code:
import * as React from 'react';
import { Text, View, TextInput } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import { MaterialCommunityIcons } from '#expo/vector-icons';
function HomeScreen() {
const [text, onChangeText] = React.useState("Useless Text");
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<TextInput
onChangeText={onChangeText}
value={text}
/>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createMaterialTopTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator tabBarPosition='bottom'
tabBarOptions={{
// style: { position: 'absolute', bottom:0 },
activeTintColor: '#e91e63',
inactiveTintColor: '#ee11ff',
showIcon: true,
indicatorStyle:{
height:0
}
}}>
<Tab.Screen
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={24} />
),
}} name="Home" component={HomeScreen} />
<Tab.Screen
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account" color={color} size={24} />
),
}} name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}