Hide createBottomTabNavigator Tabbar in React Native

Question

In React Native 0.62 is it possible to hide on scroll the tabbar created with createBottomTabNavigator from reactnavigation.org ?

I'm curious if it's possible in a similar way that LinkedIn has, when you scroll down the page the tabbar disappears and when you scroll back up it reappears. Or it's only possible with a custom tabbar?

Suffice

may be you can do with animation. check this [github.com/react-navigation/react-navigation/issues/888] – Radiance

@ShanAlam did you check my answer https://mcmap.net/q/1606236/-hide-createbottomtabnavigator-tabbar-in-react-native – Pneumectomy

yes I did @MuhammadNuman thank you for clarifying this! – Suffice

Answer 1

yes, it is possible to hide bottomtabbar.

it is possible with both custom and default tab bar

we can use tabBarVisible option to hide and show. we can use onScroll and inside on scroll we can use dispatch to show and hide

here is demo: https://snack.expo.io/@nomi9995/tab-navigation-%7C-bottom-tab-hide

const getTabBarVisible = (route) => {
  const params = route.params;
  if (params) {
    if (params.tabBarVisible === false) {
      return false;
    }
  }
  return true;
};

<Tab.Screen
          name="Home"
          component={HomeScreen}
          options={({ route }) => ({
            tabBarVisible: getTabBarVisible(route),
         })}
 />

Full Code:

  import * as React from "react";
  import { Text, View, ScrollView, Dimensions } from "react-native";
  import { NavigationContainer } from "@react-navigation/native";
  import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  import { CommonActions } from "@react-navigation/native";

  const height = Dimensions.get("window").height;
  const width = Dimensions.get("window").width;

  class HomeScreen extends React.Component {
    offset = 0;
    onScrollHandler = (e) => {
      const currentOffset = e.nativeEvent.contentOffset.y;
      var direction = currentOffset > this.offset ? "down" : "up";
      this.offset = currentOffset;
      if (direction === "down") {
        this.props.navigation.dispatch(
          CommonActions.setParams({
            tabBarVisible: false,
          })
        );
      } else {
        this.props.navigation.dispatch(
          CommonActions.setParams({
            tabBarVisible: true,
          })
        );
      }
    };
    render() {
      return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <ScrollView
            showsVerticalScrollIndicator={false}
            scrollEventThrottle={16}
            onScroll={this.onScrollHandler}
          >
            <View
              style={{
                alignItems: "center",
                height: height * 2,
                width: width,
                backgroundColor: "red",
              }}
            >
              <View
                style={{
                  backgroundColor: "blue",
                  width: 100,
                  height: height * 2,
                }}
              />
            </View>
          </ScrollView>
        </View>
      );
    }
  }

  function SettingsScreen() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings!</Text>
      </View>
    );
  }

  const Tab = createBottomTabNavigator();

  const getTabBarVisible = (route) => {
    const params = route.params;
    if (params) {
      if (params.tabBarVisible === false) {
        return false;
      }
    }
    return true;
  };

  class MyTabs extends React.Component {
    render() {
      return (
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={({ route }) => ({
              tabBarVisible: getTabBarVisible(route),
            })}
          />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      );
    }
  }

  export default function App() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }

Pneumectomy

what if the Home screen and bottom tab are on different screens? how to communicate between them? – Mythos

Answer 2

Any change this might work on a stack navigator nested inside a tab navigator. I did what you proposed, and it hides the navbar, but it leaves an empty space in it's place ( on IOS, on Android it seems to work ) . Tha empty space is fixed, so the rest of the page content goes under it.

Quittor

"The empty space is fixed" How did you solve it? I'm struggling with this blank space issue now. I'd appreciate if you could tell me how to fix that. – Scat

Answer 3

 <Tab.Navigator
        screenOptions={{
            headerShown: false,
            tabBarHideOnKeyboard: true,
            showLabel: false,
            tabBarStyle: {
                elevation: 0,
                backgroundColor: '#F1F1F1',
                height: 70,
                /*display: 'none',*/ <-- you ca
                ...styles.shadow
            },
            tabBarLabelStyle: {
                display: 'none'
            },

        }}

    >

Lehmbruck

Answer 4

In the latest React navigation tabBarVisible prop is not available. It's good if you animat the height of bottom Bar Onscroll event like this.

  var currentPos = 0;
  const onScroll = (event: any) => {
    const currentOffset = event.nativeEvent.contentOffset.y;

    const dif = currentOffset - currentPos;
    if (Math.abs(dif) < 3) {
    } else if (dif < 0) {
      Animated.timing(height, {
        toValue: 1,
        duration: 100,
        useNativeDriver: false,
      }).start()
    } else {
      Animated.timing(height, {
        toValue: 0,
        duration: 100,
        useNativeDriver: false,
      }).start()
    }
    currentPos = currentOffset;
  }; 

In the end, Interpolate Height like this inside Animated.View
height.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 60],
    extrapolate: Extrapolate.CLAMP,
})
 
 

Twoway