Navigation back within react navigation from one stack to another stack

Question

There are 2 ways to get to a Player screen.

1. You click on the 'More' tab which has a link for 'Teams' which displays all the teams available. Then you click on a Team and it brings you to the TeamStack.

In the TeamStack the default is the Team Home and then bunch of other screens, one is Roster, which lists all the players of the team. From there you get to the PlayerStack which brings you to the player home screen.

Now, when you get to the player screen you can swipe to go back, which will bring you back from where you came... to the Roster, then the team Home, then to the More page.

So far so good!

2. You click on the 'Stats' tab which links to the StatsStack. The default StatsStack screen lists the players leading the leaderboard. From there you can click on a player. From there you can click on the player's team, which brings you to the TeamStack. You can then click on the 'roster' again. If you go back from there everything works properly. Back to team home, back to player, back to stats. Still so far, so good!

Here is the problem...

Let's go back to the Stats tab, then click a player, then go to a team, then go to the roster. Now, if you click on a new player, then go back, it goes back directly to the Stats screen, instead of going back to the Roster, then to the Team Home, then to the original Player, then to the Stats.

Somehow, because the PlayerStack is already open, when you go to a Player from within the Team Roster in the Route 2 option it brings you back to the originally open PlayerStack, instead of adding a new screen to the stack.

Does this make sense? How do I make is so that the when you follow Route 2 to get to a new player, when you go back it brings you back in the proper sequence of screens?

const MainStackNavigator = createStackNavigator(
  {
    MainTabNavigator: MainTabNavigator,

    Team: {
      screen: TeamStack,
      navigationOptions: ({ navigation }) => {
        return {
          header: null,
        }
      }
    },

    Player: {
      screen: PlayerStack,
      navigationOptions: ({ navigation }) => {
        return {
          header: null,
        }
      }
    },
)

const MainTabNavigator = createBottomTabNavigator(
    ...

    Stats: {
        screen: StatsStack,
        navigationOptions: {
          tabBarIcon: ({ focused }) => {
            return <Icon
              name="ios-stats"
              iconStyle={{}}
              color={focused ? '#000' : '#ccc'}
              size={28} />;
          },
        },
      },

    More: {
        screen: MoreStack,
        navigationOptions: {
          tabBarIcon: ({ focused }) => {
            return <Icon
              name="ios-more"
              iconStyle={{}}
              color={focused ? '#000' : '#ccc'}
              size={28} />;
          },
        },
      },
)

Answer 1

I could delete this question because I just figured it out after writing all that out, but the answer is that in the Roster page, instead of getting to the Player screen with Navigation.navigate('Player') I had to use Navigation.push('Player').

According to the docs, if the screen is already open it won't add another duplicate screen to the stack, it will just go back to the open screen. In order to force the screen onto to the stack you have to use the push method.

This will work in either of my two cases above.