React Navigation how to hide tabbar from inside stack navigation
For React Navigation 5, you can do this inside of the stack component:
props.navigation.dangerouslyGetParent().setOptions({
tabBarVisible: false
});
https://reactnavigation.org/docs/en/navigation-prop.html#setoptions---update-screen-options-from-the-component
Be careful with using this though, you'll want to reset the tabBarVisible to true once unmounting the component.
For example, with React hooks inside the Stack component:
useEffect(() => {
const parent = props.navigation.dangerouslyGetParent();
parent.setOptions({
tabBarVisible: false
});
return () =>
parent.setOptions({
tabBarVisible: true
});
}, []);
Or you can reset the tabBarVisible in the Stack.Screen component with the back button press like this:
const StackNav = (props) => (
<Stack.Screen
name='name'
component={Name}
options={{
headerTitle: 'Name',
headerLeft: () => (
<Text
onPress={() =>
props.navigation.setOptions({
tabBarVisible: true
})
}
>
on back
</Text>
)
}}
/>
}
(The second approach works better.)
To hide the tab bar in one of the screens, this works for React Navigation v4:
HomeStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
let routeName = navigation.state.routes[navigation.state.index].routeName
if ( routeName == 'ProductDetails' ) {
tabBarVisible = false
}
return {
tabBarVisible,
}
}
For v5, and v6 please check @Chathuranga Kasthuriarachchi's answer here
This is how I hide the tab bar in a specific screen in a stack (React Nav 5.x & 6.x)
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
const ProfileStack = createStackNavigator();
const ProfileNavigator = ({ navigation, route }) => {
React.useLayoutEffect(() => {
const routeName = getFocusedRouteNameFromRoute(route);
if (routeName === "Group"){
navigation.setOptions({tabBarVisible: false});
}else {
navigation.setOptions({tabBarVisible: true});
}
}, [navigation, route]);
return(
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={ProfileScreen} />
<ProfileStack.Screen name="Group" component={GroupScreen} />
</ProfileStack.Navigator>
)};
If you guys have number of screens that need to hide the tabbar use a string array of those route names and hide tabbar if focused route name includes in that array
const tabHiddenRoutes = ["Group","Map"];
if(tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))){
navigation.setOptions({tabBarVisible: false});
}else{
navigation.setOptions({tabBarVisible: true});
}
[Edit] - In case of v6, use display
because tabBarVisible
is deprecated in the favour of tabBarStyle
-
if(tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))){
navigation.setOptions({tabBarStyle: {display: 'none'}});
} else {
navigation.setOptions({tabBarStyle: {display: 'flex'}});
}
first let's creat a stack navigator and call it StackHome
const StackHome = createStackNavigator(
{
Home: Home,
CustomHide: CustomHide,
});
// This code let you hide the bottom app bar when "CustomHide" is rendering
StackHome.navigationOptions = ({ navigation }) => {
let tabBarVisible;
if (navigation.state.routes.length > 1) {
navigation.state.routes.map(route => {
if (route.routeName === "CustomHide") {
tabBarVisible = false;
} else {
tabBarVisible = true;
}
});
}
return {
tabBarVisible
};
};
export default StackHome;