CODEWITHSUNDEEP
reactjsreact-nativereact-navigationstack-navigatortabnavigator
JAM
JAM

Reputation: 770

React-navigation: nesting stack navigator and tab navigator inside switch navigator results in 2 headers

I am using a combination of tab navigator, stack navigator, and switch nagivator in my react native app with react-navigation. Note that I have to put each screen of the tab navigator inside its own stack navigator in order to use the built in header feature.

The functionalities work. But I end up getting 2 headers for Feed and Profile pages, like this:

screenshot

I just want each screen to have its own header and the comment screen to have a back button. I know the code is not very clean and putting all these navigators inside each other uses a lot of overhead. So what is the best way to achieve this?

App.js

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const AppStack = createStackNavigator({ 
  Tab: TabStack,
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

Upvotes: 0

Views: 4195

Answers (2)

Mervzs
Mervzs

Reputation: 1154

Try to modify AppStack Like this:

Edited:

i forgot to include it inside navigationOptions. try.

const AppStack = createStackNavigator({ 
  Tab: {
    screen:TabStack,
    navigationOptions: () => ({
      headerMode: 'none',

      // or this

      header: null
     })
  },
  Comments: {
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
},
);

Upvotes: 0

mstiggle
mstiggle

Reputation: 195

You said that you want the Comments screen to have its own header (like all the other screens) and a back button. What specifically should it go back to? Understanding the structure of the navigation will make it easier to design.

It would be cleaner to have your AppStack actually just be your TabStack. Adding in the Comments screen on the same level as TabStack likely isn't helping your multiple header issue.

Here I show how you could cut out AppStack entirely and nest Comments in either the Profile of Feed tabs, depending on your need.

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  },
  // if you want Comments to go back to "Feed"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  },
  // if you want Comments to go back to "Profile"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

However, if you want Comments to in fact live above Profile and Feed, you should either make it its own tab, or change it into a Modal on the top level. Let me know if this is more like what you need and I can post more specifics!

Upvotes: 1

Related Questions