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

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