Stack same screen multiple times with React Navigation

Question

I have 3 screen on a StackNavigator : MainSearch, MonsterPage, ItemPage. And I want to stack MonsterPage and ItemPage multiple times (from MonsterPage you can go to ItemPage and vice versa)

Is possible to instantiate the screens?

const AppNavigator = createStackNavigator(
    {
        Home: MainSearch,
        MonsterPage: MonsterPage,
        ItemPage: ItemPage
    },
    {
        initialRouteName: "Home"
    }
);

export default createAppContainer(AppNavigator);

What I want:

MainSearch -> ItemPage(1) -> MonsterPage(1) -> ItemPage(2) -> etc...

or

MainSearch -> MonsterPage(1) -> ItemPage(1) -> MonsterPage(2) -> etc...

What I get:

MainSearch -> MonsterPage(1) -> ItemPage(1) ->(goes back to) MonsterPage(1)

Gif showing what happens

MainSearch

onPress={() => { this.props.navigation.navigate(`${r._source.super_cat === 'monster' ? 'MonsterPage' : 'ItemPage'}`, { item: r._source }) }}

MonsterPage

onPress={() => { this.props.navigation.navigate('ItemPage', { item: {id: drop.item_id, NameZh_ragmobile: drop.item_name_EN, super_cat: 'item'} }) }

ItemPage

onPress={() => { this.props.navigation.navigate('MonsterPage', { item: {id: mob.mob_id, NameZh_ragmobile: mob.mob_name_EN, super_cat: 'monster'} }) }

Answer 1

I got it... just change this.props.navigation.navigate(...) to this.props.navigation.push(...)