When using both: Stack Navigator and BottomTab Navigator how do I hide the bottom tab when inside a Stack Navigation Screen?

Question

I am having a Bottom Navigation with 2 Tabs so far (Home & Messages). When inside Messages I can press on a User to get navigated to the ChatScreen which is a Screen from the Stack Navigator. In that ChatScreen I want to hide the BottomTab. I know that it is possible to hide it by adding tabBarStyle: { display: "none" } to the <Tab.Screen /> but this doesn't work for the ChatScreen since it is not a Tab.Screen

import * as React from 'react';
import {View, Text} from 'react-native';
import {NavigationContainer, StackActions} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Home from './app/Screens/Home';
import CommentSection from './app/Screens/CommentSection';
import MessageScreen from './app/Screens/MessageScreen';
import ChatScreen from './app/Screens/ChatScreen';
import NavigationHeader from './app/global/headers/NavigationHeader';
import SendOffer from './app/Screens/SendOffer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import ChatScreenHeader from './app/Screens/ChatScreen/ChatScreenHeader';

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator initialRouteName="Home">
      <HomeStack.Screen
        name="HomeScreen"
        component={Home}
        options={{
          // header: AppBar,
          headerShown: false,
        }}
      />
      <HomeStack.Screen
        name="CommentSection"
        component={CommentSection}
        options={{
          headerTitle: 'Home',
          // animationTypeForReplace: 'push',
          animation: 'slide_from_bottom',
        }}
      />
      <HomeStack.Screen
        name="SendOffer"
        component={SendOffer}
        options={{
          headerTitle: 'Home',
          animation: 'slide_from_right',
        }}
      />
      <HomeStack.Screen
        name="ChatScreen"
        component={ChatScreen} //HIDE BottomTab INSIDE THIS COMPONENT
        options={{
          headerTitle: 'Messages',
          animation: 'slide_from_right',
        }}
      />
    </HomeStack.Navigator>
  );
};

const MessageStack = createNativeStackNavigator();

const MessageStackScreen = () => {
  return (
    <MessageStack.Navigator>
      <MessageStack.Screen
        name="MessageScreen"
        component={MessageScreen}
        options={{
          headerTitle: 'Messages',
          animation: 'slide_from_right',
        }}
      />
      <MessageStack.Screen
        name="ChatScreen"
        component={ChatScreen} //HIDE BottomTab INSIDE THIS COMPONENT
        options={{
          headerTitle: 'Messages',
          headerShown: false,
          animation: 'slide_from_right',
        }}
      />
    </MessageStack.Navigator>
  );
};

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Messages">
        <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          headerShown: false,
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
        }}
        />
        <Tab.Screen
        name="Messages"
        component={MessageStackScreen}
        options={{
          headerShown: false,
          tabBarLabel: 'Messages',
          tabBarIcon: ({ color }) => (
            <Icon name="chat" color={color} size={26} />
          ),
          // tabBarStyle: { display: "none" }
        }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

score 2 · Accepted Answer · answered Mar 10 '22 at 14:00

2

Used solution by @Escaper from another question

useEffect(() => {
    navigation.getParent()?.setOptions({ tabBarStyle: { display: "none" }});
    return () => navigation.getParent()?.setOptions({ tabBarStyle: undefined });
  }, [navigation]);

answered Mar 10 '22 at 14:00

alobre

85
7

please check this one https://stackoverflow.com/questions/75287020/how-to-use-stack-navigation-or-tab-bar-navigation-in-react-native – Gattu Jan 30 '23 at 16:37

score 0 · Answer 2 · answered Mar 10 '22 at 12:42

You could use createNavigationContainerRef to check the current route name via the getCurrentRoute() function inside the component that creates the BottomTabNavigator and then use tabBarStyle conditionally as you have suggested.

This could look as follows.

import { createNavigationContainerRef } from "@react-navigation/native"

const ref = createNavigationContainerRef();

const Tab = createBottomTabNavigator();

export default function App() {
  const hide = "ChatScreen" === ref.current?.getCurrentRoute()?.name
   
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Messages">
        <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          headerShown: false,
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
        }}
        />
        <Tab.Screen
        name="Messages"
        component={MessageStackScreen}
        options={{
          headerShown: false,
          tabBarLabel: 'Messages',
          tabBarIcon: ({ color }) => (
            <Icon name="chat" color={color} size={26} />
          ),
          tabBarStyle: { display: hide ? "none" : "flex" }
        }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Thanks, this looked promising but ref.current always returned null. Tried to figure out how to make this solution working but instead I found a great solution that worked for me from another post (https://stackoverflow.com/questions/56745881/how-to-hide-bottom-navigation-bar-on-a-specific-screen-in-react-native) by @Escaper (https://stackoverflow.com/a/70153935/12029941) — alobre, Mar 10 '22 at 13:55
Interesting, I have a project in which we are doing this. Well, maybe there is a difference that I haven't understood yet. I'm glad you have found a solution that works for you! +1 — David Scholz, Mar 10 '22 at 14:06

When using both: Stack Navigator and BottomTab Navigator how do I hide the bottom tab when inside a Stack Navigation Screen?

2 Answers2