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'} }) }

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'} }) }

• javascript
• react-native
• react-navigation
• react-navigation-stack

2 Answers 2

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

In addition to the accepted answer, maybe check your import path too so that you are not pointing to the same screen multiple times like shown below.

import CategoriesScreen from './screens/CategoriesScreen'   <--- Same
import MealsScreen from './screens/CategoriesScreen'        <--- Path