Hide BottomNavigation on active keyboard

[Rubioli]

In my login page I've used BottomNavigation and I want to hide the bottom navigation when the keyboard is active. I've tried with tabBarOptions={{ keyboardHidesTabBar: true }} with no luck.

Below is my complete page code:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Register from '../pages/register';
import Login from '../pages/login';
import { LoginIcon, RegsiterIcon } from '../assets/icons';
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';

const { Navigator, Screen } = createBottomTabNavigator();
const screenOptions = {
  headerShown: false,
};

const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    indicatorStyle={{backgroundColor: '#e86f01'}}
    selectedIndex={state.index}
    onSelect={index => navigation.navigate(state.routeNames[index])}
    style={[styles.navigation_shadow, { height: 65 }]}
    tabBarOptions={{
      keyboardHidesTabBar: true
    }} 
    >
    <BottomNavigationTab
      title="Already a Member?"
      icon={LoginIcon} />
    <BottomNavigationTab
      title="Need a New Account?"
      icon={RegsiterIcon} />
  </BottomNavigation>
);

const GuestNavigator = () => (
  <Navigator
    {...{ screenOptions }}
    tabBar={props => <BottomTabBar {...props} />}>
    <Screen
      name="Already a Member?"
      component={Login} />

    <Screen
      name="Need a New Account?"
      component={Register} />
  </Navigator >
);

export default GuestNavigator;

Any help is much appreciated!

Packages versions:

"@ui-kitten/components": "^5.1.2",
"@ui-kitten/eva-icons": "^5.1.2",

[codebymaribel]

I'm also having this issue, did you find a work around?

[Rubioli]

nope still waiting for any response or any answers somewhere out there

[alwye]

You can try using something like this. I'm using it in my app to hide the header instead.

If you know how to add an easing transition here, please share :)

import * as React from 'react';
import { Keyboard } from 'react-native';

const ScreenHidingHeader = ({ navigation }) => {

  const [isKeyboardOn, setKeyboardOn] = React.useState(false);

  React.useEffect(() => {

    const showSubscription = Keyboard.addListener("keyboardWillShow", () => {
      setKeyboardOn(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardWillHide", () => {
      setKeyboardOn(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  return (
  <>
  {!isKeyboardOn ? <Text>this will be hidden</Text> : null }
  <Text>this will stay</Text>
  </>
  )
};