React Native hide top navigation from stack navigator

0
votes

I'm new to RN and I have the following setup.

                const stackNavBudget = createStackNavigator({
                Budget: {screen: Budget,
                    navigationOptions: {
                        header: null,
                    },
                },
                Details: {screen: Details},
            });

            //hide bottom nav
            stackNavBudget.navigationOptions = ({ navigation }) => {
                let tabBarVisible = true;
                if (navigation.state.index > 0) {
                    tabBarVisible = false;
                }
                return {
                    tabBarVisible,
                };
            };
            const TabNavigatorSub = createBottomTabNavigator({
                Budget: {screen:stackNavBudget,
                    navigationOptions: {
                        header: null,
                        tabBarVisible: true,
                    },
                },
                Transactions:Transactions,
            });

            const TabNavigatorComp = createAppContainer(TabNavigatorSub);

            ///////////////////////////////////////////////////

            const TabNavigator = createMaterialTopTabNavigator({
                Home: OverView,
                Spending: TabNavigatorComp,
                Facilities: Facilities,    
                },
                {
                    tabBarOptions: {
                        scrollEnabled: true
                    },
                });

So I am able to hide the bottom navigator when i am in the "Details" screen but i can't hide the main top one. It's like the "tabBarVisible" only has a view of the most immeidiate tab navigator which is the bottom one.

The hierarchy is as follows

Details page  --> Budget --> Bottom Navigator --> Top Navigator

When i click on an item in the details page. All I would like to see the stack navigator back button.

Not the top navigator options.

2
react-nativereact-navigation

2 Answers

0
votes

There are two ways to hide the headers. You can use headermode in Navigator Settings.

 const stackNavBudget = createStackNavigator({
                Budget: {screen: Budget,
                    navigationOptions: {
                        headerMode: 'none',
                    },
                },
                Details: {screen: Details},
            });

Or you can give a price directly to the screen.

class Budget extends React.Component {
  static navigationOptions = {
    header: null,
  };

  /* render function, etc */
}
0
votes

try like this

 navigater_page: {
            screen: navigater_page,
            navigationOptions: ({navigation}) => ({
                header: null,
            }),
        }

navigater_page = obj of your stacknavigater page which initialise in App.js