CODEWITHSUNDEEP
react-native
Galih laras prakoso
Galih laras prakoso

Reputation: 699

React Native - React Navigation - How to Communicate with StackNavigator from component inside TabNavigator Inside that StackNavigator

I have a problem. Maybe i just don't know how it works. I have something like this :

-| SwitchNavigator 
   -> Login
   -> Main
      -> BottomTabNavigator
         -> Home
            -> StackNavigator
               -> DetailMerchant
               -> DetailMenu 
         -> Order
         -> Account

The problem is that i want to Have a StackNavigator inside my BottomTabNavigator. but when i do that, the BottomTabNavigator is appear. How to hide the BottomTabNavigator, how to communicate with that?

Upvotes: 0

Views: 136

Answers (1)

HAK
HAK

Reputation: 2081

If I understand it correctly you want to do something like this:

-| SwitchNavigator 
   -> Login
   -> Main
      -> BottomTabNavigator
         -> Home <configure nav options here>
            -> StackNavigator
               -> DetailMerchant
               -> DetailMenu <hide bottom nav here>
         -> Order
         -> Account

If you want to do this, then you need to provide navigation options in Home where you are setting your stack navigator.

It would be something like this:

const HomeStack = createStackNavigator({
  DetailMerchant: DetailMerchantScreen,
  DetailMenu: DetailMenuScreen,
});

HomeStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

Upvotes: 1

Related Questions