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:

1. trying to use push instead of navigate (returned _this2.props.navigation.push is not a function)
2. 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!

Answer 1

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.