react navigation 5 hide bottom tab nav in nested navigation

Question

The structure of my react navigation is like this : BottomTabNavigator => Navigator => Components

This is the skeleton of the App.js. The whole application is wrapped up in a bottom tab navigation.

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

const BottomTab = createBottomTabNavigator();

function App() {
  return (  
    <NavigationContainer>     
      <BottomTab.Navigator >
        <BottomTab.Screen
          name="Main"
          component={MyVeranda}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: //...some icon,
          }}
        />
        //...some other screens
      </BottomTab.Navigator>          
    </NavigationContainer>  
  );
}

export default App;

As you can see, inside the bottom tab i have screen name "Main" that uses MyVeranda component. MyVeranda itself is a stack navigator, which have 2 screens components : MyHome and BuyForm

import { createStackNavigator } from '@react-navigation/stack';

const HomeStack = createStackNavigator();

function MyVeranda({ route,navigation }) {
  //..some states, props, etc

  return (
    <HomeStack.Navigator>
        <HomeStack.Screen
            name="MyHome"
            component={MyHome}
            options={{/*...some options*/ }}
        />  
        <HomeStack.Screen
            name="BuyItem"
            component={BuyForm}
            options={{/*...some options*/}}
        />
    </HomeStack.Navigator>
  );
}

export defaul MyVeranda;

MyVeranda is a parent of MyHome and BuyForm, both are just 2 simple functional components

function MyHome({navigation}){  
    //..some states, props, etc

    return (
        <ScrollView contentContainerStyle={{/*...some styling*/}}>
            //...some components
        </ScrollView>
    );  

}

function BuyForm({navigation}){ 
    //..some states, props, etc

    return (
        <ScrollView contentContainerStyle={{/*...some styling*/}}>
              //...some components
        </ScrollView>
    );              
}

My question is : how to hide the root bottom tab navigator when navigating to BuyForm component, but not when go to MyHome component?

Based from answer of this question, i know that i can hide the bottom tab if i put this line navigation.setOptions({ tabBarVisible: false }) in MyVeranda component

function MyVeranda({ route,navigation }) {
      //..some states, props, etc
      navigation.setOptions({ tabBarVisible: false })//this hide the bottom tab navigator

      return (
       //...
      )
}

But this hide the bottom tab entirely when i am at both MyHome and BuyForm component.

Calling navigation.setOptions({ tabBarVisible: false }) in BuyForm seems to do nothing

function BuyForm({ route,navigation }) {
      //..some states, props, etc
      navigation.setOptions({ tabBarVisible: false }) //this do nothing

      return (
         //...
      )
}

So my guess is i have to call navigation.setOptions({ tabBarVisible: false }) inside MyVeranda when BuyForm is the active screen, but i cannot the proper syntax to get the current active screen from a stack navigator component?

https://reactnavigation.org/docs/hiding-tabbar-in-screens – satya164 Jun 19 '20 at 10:55 — satya164, Jun 19 '20 at 10:55

Chathuranga Kasthuriarachchi · Answer 1 · 2021-06-28T07:29:31.507

1

Here is the answer

React Navigation how to hide tabbar from inside stack navigation

edited Jun 28 '21 at 07:29

answered Nov 10 '20 at 18:39

Chathuranga Kasthuriarachchi

1,221
10
13

score 0 · Answer 2 · answered Jun 19 '20 at 08:42

Indeed you can use setOptions on the navigation to set custom options. Although it's recommended to rather reorganize the navigation structure. This might be possible if you create a StackNavigator not nested with the TabBar.

  React.useLayoutEffect(() => {
    navigation.setOptions({ tabBarVisible: false });
  }, [navigation]);

react navigation 5 hide bottom tab nav in nested navigation

2 Answers2

Linked