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

Question

I want to navigate to to the same screen but with different params.
so imagine
navigate to MyRouteName
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)

Answer 1

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;