How do I hide the tabbar programmatically on Android in React Native with React Navigation?

Question

I'm using Create React Native App with Expo to build an app. I need to hide the bottom tabbar in a specific view when a TextInput is pressed. Android pushes up the tabbar by default.

I wan't to trigger the tabbar to hide because the tabbar has to be in the view when the keyboard is not shown.

"expo": "^31.0.2",
"react": "16.5.0",
"react-navigation": "^2.18.2"

I have various stacks exported as a createBottomTabNavigator.

const SearchStack = createStackNavigator({
  Search: SearchScreen,
  Details: DetailsScreen,
  Tag: TagScreen,
  Category: CategoryScreen,
});

SearchStack.navigationOptions = {
  tabBarLabel: 'Søg',
  tabBarOptions: {
    activeTintColor: Colors.themeColor,
    showLabel: true,
  },
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  InformationStack,
  SearchStack,
});

I can hide the tabbar from the navigator but I want to be able to do it in the specific view with a dynamic navigationOptions / state. If I use tabBarVisible: false in the screen component it does not work.

export default class SearchScreen extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      text: '',
      showClearTextIcon: false,
    };
  }

  static navigationOptions = {
    header: null,
    title: 'Search',
  };

  /**
  * Lifecycle function.
  */
  componentDidMount() {
    this.load()
    this.props.navigation.addListener('willFocus', this.load)
  }

Do you have any ideas on how to hide the tabbar when keyboard is present on Android or with the click of a button?

Answer 1

Sometime setting android:windowSoftInputMode to adjustPan or adjustResize is not ideal idea because it effects whole application.

so that is my idea to solve that error.

React Navigation 5

BottomTabBar.js

import React, { useEffect, useState } from 'react';
import { Platform, Keyboard } from 'react-native';
import { BottomTabBar } from '@react-navigation/bottom-tabs';

const CustomBottomTabBar = props => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    let keyboardEventListeners;
    if (Platform.OS === 'android') {
      keyboardEventListeners = [
        Keyboard.addListener('keyboardDidShow', () => setVisible(false)),
        Keyboard.addListener('keyboardDidHide', () => setVisible(true)),
      ];
    }
    return () => {
      if (Platform.OS === 'android') {
        keyboardEventListeners &&
          keyboardEventListeners.forEach(eventListener => eventListener.remove());
      }
    };
  }, []);

  const render = () => {
    if (Platform.OS === 'ios') {
      return <BottomTabBar {...props} />;
    }
    if (!visible) return null;
    return <BottomTabBar {...props} />;
  };

  return render();
};

export default CustomBottomTabBar;

AppNavigator.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const bottomTabNavigator = createBottomTabNavigator();

<BottomNavigator
    screenOptions={bottomTabScreenOptions}
    tabBarOptions={bottomTabBarOptions}
    tabBar={props => <CustomBottomTabBar {...props} />}
>
    ......
</BottomNavigator>