React-navigation dynamic child screens

I'm in the process of creating a social media app and I've the following diagram of screen transition:

Main -> Profile -> Followers -> John's Profile -> John's Followers -> Emily's Profile -> ....

How can I implement a flow like this? Currently my router implementation is buggy, I can not go nested, it returns the previous screen.

Here is the part of the router to express my problem:

const appStack = createStackNavigator(
  {
    [PROFILE_STACK]: { screen: profileStack },
    [PROFILE_FOLLOWERS_STACK]: { screen: profileFollowersStack },
    [PROFILE_FOLLOWINGS_STACK]: { screen: profileFollowingsStack }
  },
  {
    initialRouteName: PROFILE_STACK,
    headerMode: "none"
  }
);

const profileStack = createStackNavigator(
  {
    [PROFILE]: {
      screen: UserProfileScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  {
    initialRouteName: PROFILE
  }
);

const profileFollowersStack = createStackNavigator(
  {
    [PROFILE_FOLLOWERS]: {
      screen: UserFollowersScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  {
    initialRouteName: PROFILE_FOLLOWERS
  }
);

const profileFollowingsStack = createStackNavigator(
  {
    [PROFILE_FOLLOWINGS]: {
      screen: UserFollowingsScreen,
      navigationOptions: () => ({
        header: null
      })
    }
  },
  {
    initialRouteName: PROFILE_FOLLOWINGS
  }
);

export const goUserProfile = function(navigation, userId) {
  const { navigate } = navigation;
  navigate(PROFILE_STACK, {
    userId: userId
  });
};

export const goUserFollowers = function(navigation, userId) {
  const { push } = navigation;
  push(PROFILE_FOLLOWERS_STACK, {
    userId: userId
  });
};

export const goUserFollowings = function(navigation, userId) {
  const { push } = navigation;
  push(PROFILE_FOLLOWINGS_STACK, {
    userId: userId
  });
};

1 answer