CODEWITHSUNDEEP
androidreact-nativereact-navigation
I am a Student
I am a Student

Reputation: 1590

React Native - Combine 2 Navigation Type in single apps

I trying to implement 2 type of Navigation in my apps, Tab Navigation and Stack Navigation.

My Desire Output:

But so far with my code, I only able to implement one of them.

const App = TabNavigator({
  HomeScreen: { screen: HomeScreen },
  ProfileScreen: { screen: ProfileScreen },
}, {
  tabBarOptions: {
    activeTintColor: '#7567B1',
    labelStyle: {
      fontSize: 16,
      fontWeight: '600',

    }
  }
});

const Go = StackNavigator({
  First: { screen: ProfileScreen },
  Second: { screen: SecondActivity } },

});

export default rootNav;

What change should I make to my code to implement these 2 Navigation in my Apps?

Thank you.

Upvotes: 2

Views: 2562

Answers (2)

I am a Student
I am a Student

Reputation: 1590

const rootNav = StackNavigator({
     app: {screen: App},
     go: {screen: Go},
});

Method above can achieve the desire result however it may cause some issue, such as when perform Navigation to Screen, there will pop out 2 Header on Top of the Screen.

Improvement for Code above:

const rootNav = StackNavigator({
         app: {screen: App},
         First: { screen: ProfileScreen },
         Second: { screen: SecondActivity },

});

Upvotes: 1

kolbma
kolbma

Reputation: 350

You need a root StackNavigator, which has one route to your TabNavigator and one to your other StackNavigator. Then you can navigate from the TabNavigator to your other StackNavigator.

const rootNav = StackNavigator({
     app: {screen: App},
     go: {screen: Go},
});

Upvotes: 2

Related Questions