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

Answer 1

This might help if you'r using expo and would like to hide tab conditionally.

<MaterialBottomTabs.Screen
  name="admin"
  options={{
     title: `Admin`,
  }}
  redirect={ !isAdmin}
/>

Answer 2

Hide Keyboard In Any of the Tab from Bottom-Tabs Using createMaterialTopTabNavigator

Salam Everyone, As I have searched: Hide Bottom-Tab Bar Created By Using createMaterialTopTabNavigator By Giving Position to Bottom, As this Provide smooth Gesture handling to Switch Between tabs

But What If You want to hide Keyboard In Any of the Tab from Bottom-Tabs

It does Not provide feature To Hide Bottom Tab on keyBoard opens (Till Now)

I Developed Solution, Which Worked For everyone(No Limitations of versions)

import React, {useState, useEffect} from 'react';
import {Image, StyleSheet, Keyboard} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

import Images from '../../Assets/Images';
import Fonts from '../../Assets/Fonts';
import colors from '../../Utils/colors';
import DashBoard from '../../Screens/Dashboard';
import Payments from '../../Screens/Payments';
import Claims from '../../Screens/Claims';
import Locations from '../../Screens/Locations';

const BottomTab = createMaterialTopTabNavigator();

const BottomTabs = () => {
  const [keyboardStatus, setKeyboardStatus] = useState(undefined);

  const _keyboardDidShow = () => setKeyboardStatus(true);
  const _keyboardDidHide = () => setKeyboardStatus(false);

  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
    Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

    return () => {
      Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
    };
  }, []);

  return (
    <BottomTab.Navigator
      tabBarPosition="bottom"
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.white,
        tabBarInactiveTintColor: '#F8BCBE',
        tabBarLabelStyle: {fontFamily: Fonts.Medium},
        tabBarLabelStyle: {fontSize: 12},
        tabBarStyle: {
          height: keyboardStatus ? 0 : 80,   `== SOLUTION lIES HERE ==`
          backgroundColor: colors.appRed,
        },
      }}
      tabBarOptions={{
        indicatorStyle: {
          backgroundColor: '#F8BCBE',
        },
      }}
      initialRouteName="DashBoard">
      <BottomTab.Screen name="POLICIES" component={DashBoard}/>
      <BottomTab.Screen name="PAYMENTS" component={Payments}/>
    </BottomTab.Navigator>

)}

Add comments For any Update OR Query...