react-navigation: Navigate to same RouteName but with different params

1.8k Views Asked by At

I want to navigate to to the same screen but with different params. so imagine

  1. navigate to MyRouteName
  2. on this screen click a button which should navigate me to MyRouteName but with different params.

currently I've tried
this.props.navigation.navigate('MyRouteName', {param1: 'new val'})
and

const setParamsAction = NavigationActions.setParams({
      params: { param1: 'new val'},
      key: 'mrn-new_val',
    })
this.props.navigation.dispatch(setParamsAction)

Neither work. Neither the docs nor github issues I found provide clear guidance on this.

How do i accomplish this?


Update: in response to comment below

I'm using a stacked Navigator as my root, which leads to a DrawerNavigator

// MyDrawer.js
// ...
const MyDrawer = DrawerNavigator(
  {
    MyRouteName: {
      screen: MyScreen,    
    },    
  },
  {
    initialRouteName: 'MyRouteName',    
    contentOptions: {
      activeTintColor: '#e91e63',
    },
    contentComponent: props => <DrawerScreen {...props}/>,
  }
);
export default MyDrawer;



// MyScreen.js
class MyScreen extends React.Component{
    //..
    //.. stuff goes here
    //..
    drillDown(newVal){      
        const setParamsAction = NavigationActions.setParams({
          params: { param1: newVal },
          key: 'ms-${newVal}',
        })
        this.props.navigation.dispatch(setParamsAction)
    }
    //..
    //.. more stuff
    //..
}

My final implementation based on @benneygenel's answer below.

const MyDrawer = DrawerNavigator({
    MyRouteName: {
      screen: StackNavigator({
        DrillDown:{
          screen: MyScreen,
        },
      }, {
        headerMode: 'none',
      }),
    },
});

(MyScreen defines it's own header)

1

There are 1 best solutions below

0
On BEST ANSWER

You can use a StackNavigator inside the Drawer and navigate like a normal StackNavigator.

const MyDrawer = DrawerNavigator({
  MyRouteName: {
    screen: StackNavigator({
      DrillDown: { 
        screen: MyScreen
      }
    }),    
  },
});
export default MyDrawer;