'react-native-navigation: how to hide bottomTabs when keyboard is shown?

I am using the bottomTabs navigator from react-native-navigaton to navigation within my app. However, each time I have for example a TextInput field, the bottomTabs are being pushed up.

What is a possible way to hide the bottomTabs whenever the keyboard is being shown?

react-native react-native-navigation

Solution 1:^[1]

You can programmatically hide the bottom tab when the keyboard is open using React hooks

  const _keyboardDidShow = useCallback(() => {
    navigation.setOptions({
      tabBarVisible: false,
    });
  }, [navigation]);

  const _keyboardDidHide = useCallback(() => {
    navigation.setOptions({
      tabBarVisible: true,
    });
  }, [navigation]);

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

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

Solution 2:^[2]

just add tabBarHideOnKeyboard: true to screenOptions

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	U.A
Solution 2	Alex Skotner

'react-native-navigation: how to hide bottomTabs when keyboard is shown?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]