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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 17, 2019 at 19:56 Guilherme FagaGuilherme Faga 14811 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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