Hide createBottomTabNavigator Tabbar in React Native - 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?

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>
);
}

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.

Answer 3

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,
})

Answer 4

<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'
},
}}
>