Is there anyway to hide ui-kitten bottom tabs on keyboard? react native

Question

I can't find anyway to hide ui-kitten bottom tabs, its is always showing even on keyboard input. Is there a way to hide it?

Please help, thank you!

I've tried with tabBarOptions={{ keyboardHidesTabBar: true }} with no luck

Answer 1

I share with you a workaround. I don't think it's the most optimal solution. I started with expo and UI Kitten not long ago so I don't know if there is a better way but I hope it helps!

I used for this a Keyboard listener.

Custom hook: useKeyboard.tsx

import { useEffect, useState } from "react";
import { Keyboard } from "react-native";

export default function useKeyboard() {
    const [isKeyboardVisible, setKeyboardVisibility] = useState(false);
    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisibility(true));
        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisibility(false));

        return () => {
            keyboardDidHideListener.remove(); keyboardDidShowListener.remove();
        };
    }, []);
    return [isKeyboardVisible, setKeyboardVisibility] as const
}

Then you can import it within a component and use it with the display property of style.

const UiKittenBottomTabNav = ({ navigation, state }: BottomTabBarProps) => {
    const [isKeyboardVisible] = useKeyboard()
    const indicatorColor = '#303136'

    const HomeTitle = () => <Text style={{ color: indicatorColor, fontSize: 10 }}>Inicio</Text>;
    const BookStoreTitle = () => <Text style={{ color: indicatorColor, fontSize: 10 }}>Librería</Text>;
    const UserTitle = () => <Text style={{ color: indicatorColor, fontSize: 10 }}>Usuario</Text>;

    return (
        <BottomNavigation
            style={{ display: isKeyboardVisible ? 'none' : 'flex' }} // <--
            indicatorStyle={{ backgroundColor: indicatorColor, height: 2 }}
            selectedIndex={state.index}
            onSelect={(index) => {
                if (index === 2 && Keyboard.isVisible()) {
                    Keyboard.dismiss();
                    setTimeout(() => {
                        if (!Keyboard.isVisible()) navigation.navigate(state.routeNames[index])
                    }, 100)
                } else navigation.navigate(state.routeNames[index])
            }}
        >
            <BottomNavigationTab
                title={HomeTitle}
            />
            <BottomNavigationTab
                title={BookStoreTitle}
            />
            <BottomNavigationTab
                title={UserTitle}
            />
        </BottomNavigation>
    );
};

const Tab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomNav() {
    return (
        <Tab.Navigator initialRouteName="Home" tabBar={(props) => <UiKittenBottomTabNav {...props} />} screenOptions={{ headerShown: false}}>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="BookStore" component={BookStore} />
            <Tab.Screen name="UserNav" component={UserNav} />
        </Tab.Navigator>
    )
}