React native navigate to same page with different props

Question

I am working on a RN app that uses a side-drawer.(RN version: 0.59.8)

const DrawerNavigator = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Poems: {
            screen: PoemsScreen
        },
        Contest: {
            screen: ContestScreen
        },
        AboutMe: {
            screen: AboutMeScreen
        }
    },
    DrawerConfig
);

export default createAppContainer(DrawerNavigator);

The react-navigation version in use is 3.11.0. In the menu, multiple subitems point to the same page, a ViewPager, but with different params (the page index). The problem is that none of the below worked:

trying to use push instead of navigate (returned _this2.props.navigation.push is not a function)
trying to reset the respective stack.

const resetAction = StackActions.reset({
   index: 0,
   key: 'Poems',
   actions: [NavigationActions.navigate({ routeName: 'Poems' })]
})
this.props.navigation.dispatch(resetAction)

(also tried with key: null)

Any help is much appreciated!

@GokulKulkarni thanks for your insight but it is not working :( — Sen Alexandru, Jun 25 '19 at 17:19
I could not understand your question correctly, please help understand. You want to navigate to the same page with different params? — Gokul Kulkarni, Jun 26 '19 at 05:23

score 14 · Answer 1 · answered Jun 26 '19 at 02:46

14

Try reading https://reactnavigation.org/docs/en/navigating.html#navigate-to-a-route-multiple-times

you need to use navigation.push() to run copies of your component with different params.

answered Jun 26 '19 at 02:46

Harry Moreno

10,231
7
64
116

1

This did not work for me as I'm using the SwitchNavigator. The props.navigation.push() method can only be used if you are using the StackNavigator. Otherwise, this will result in an error saying props.navigation.push is undefined or not a function. Check this : https://reactnavigation.org/docs/en/navigation-prop.html – i_code Dec 30 '19 at 14:42

score -2 · Answer 2 · answered Jun 27 '19 at 04:50

-2

add data to to navigate function

this.props.navigation.navigate('routeName', { data })

eg: this.props.navigation.navigate('BookDetails', { book: this.props.book })

answered Jun 27 '19 at 04:50

Vinil Prabhu

1,279
1
10
22

React native navigate to same page with different props

2 Answers2