CODEWITHSUNDEEP
reactjsreact-nativereact-navigationnavigatortabnavigator
JAM
JAM

Reputation: 770

React native - how to keep TabNavigator in every screen

I am using a combination of tab navigator, stack navigator, and switch nagivator in my react native app with react-navigation.

This works well, except I'd like to keep the bottom tabs in every screen. Currently if I navigate to UserProfile screen, then the bottom tabs go away.

App.js:

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

const UserStack = createStackNavigator(
  { 
    UserProfile: { screen: userProfile },
    Comments: { screen: comments }
  }
);

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

To solve this, I tried making a component out of the tab navigator and just importing it in userProfile.js, like <BottomTab />.

bottomTab.js:

const BottomTab = createBottomTabNavigator({
    Feed: { screen: FeedScreenStack },
    MyProfile: { screen: ProfileScreenStack },
})

export default BottomTab

but this doesn't work because in react-navigation 3 I have to set up the app container directly and I am not sure how to get around it. The only other solution I can think of is to create a custom component that is just a bar with buttons pointing to different pages, but I wonder if I can just use TabNavigator?

Upvotes: 4

Views: 6193

Answers (1)

Christian
Christian

Reputation: 4641

The recommended way is that a TabNavigation is the Top Item in your navigation stack. In each of the tabs you might have a different StackNavigation. If you use the SwitchNavigation for Auth which probably means a Login-Screen, you might put the SwitchNavigation at top with the two children Auth and Tab and include Home, User, Feed, etc. in different StackNavigations that are children of the TabNavigation. You could change for example as following: 

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  User: { screen: UserStack },
});

const UserStack = createStackNavigator({ 
  UserProfile: { screen: userProfile },
  Comments: { screen: comments },
  MyProfile: { screen: ProfileScreenStack },
});

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

Upvotes: 3

Related Questions