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

Guilherme Faga · Accepted Answer · 2019-03-17 20:04:08Z

11

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

answered Mar 17, 2019 at 20:04

Guilherme Faga

1481 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prince · Accepted Answer · 2022-06-01 11:44:09Z

0

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

answered Jun 1, 2022 at 11:44

Prince

20.9k7 gold badges46 silver badges62 bronze badges

Collectives™ on Stack Overflow

Stack same screen multiple times with React Navigation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related