hide tab bar when navigating via stack navigator

1
votes

I have a problem with react-navigation, hiding the tab bar on specific screens.

I have a bottom tabs navigator with 3 screens:

  • Mainscreen
  • Camerascreen
  • Postscreen

I also have a second (stack) navigator with 2 screens:

  • Mainscreen
  • Camerascreen

It should be possible to navigate from the Mainscreen to the Camerascreen via the tabs at the bottom of the screen, but I also need a button at the top of the screen to navigate to the Camerascreen. That's why I created the stack navigator.

My code on Camerascreen.js to hide the tab bar (this works when I navigate through the bottom tabs):

CameraScreen.navigationOptions = NavigationData => ({
    header: null,
    tabBarVisible: false
});

What is the problem?

The problem is that when I navigate from the Mainscreen to the Camerascreen via the button (so not the bottom tabs), the bottom tabs are not hidden on the Camerascreen. When I navigate from the Mainscreen to the Camerascreen via the bottom tabs, the are hidden. I want them also to be hidden when I navigate via the stack navigator (and not only via the bottom tabs navigator).

I've checked the following question: https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens, but I cannot get it to work.

1
react-native

1 Answers

0
votes

You can use this logic to hide the tabBar on specific screens.

navigationOptions: ({navigation}) => {
        let tabBarVisible = true;
        if (navigation.state.routes.length > 1) {
          tabBarVisible = false;
        }
        return {
          tabBarVisible,
        };
      },

as a example, in your stackNavigater

const HomeNavigation = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => {
          return {
            headerTitle: (
              <Header
                navigate={navigation.navigate}
              />
            ),
            headerStyle: {
              backgroundColor: '#d63921',
            },
            headerRight: (
              <HeaderRight
                navigate={navigation.navigate}
              />
            ),
          };
        },
      },
    },
    **{
      navigationOptions: ({navigation}) => {
        let tabBarVisible = true;
        if (navigation.state.routes.length > 1) {
          tabBarVisible = false;
        }
        return {
          tabBarVisible,
        };
      },**
      initialRouteName: 'Home',
      mode: 'card',
      lazy: false,
    },
  );

Feel free for doubts