React Navigation Reset Can add parameters?

Question

I am still new to react navigation. I wish to reset the route information after login successfully. However there is some parameters like login information I wish to pass to the main page.

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
        NavigationActions.navigate({ routeName: 'Profile',
                params:{user:this.state.username}})
      ]
  })
    this.props.navigation.dispatch(resetAction)

In the Profile page, I want to get access to the params, so I use this:

constructor(props){
super(props)
this.state = { username: this.props.navigation.state.params.user, 
  }

but I received: undefined is not an object (evaluating '_this.props.navigation.state.params.user') in the Console log. May I know how should I get the parameters? Thank you

Answer 1

Yes it can. React Navigation 5+ let's us easily use the navigation prop reset the routes history, then it allows us to pass a params property into the targeted route object.

navigation.reset({
    index: 0,
    routes: [{name: 'DriveInfosAdded', params: {data}}],
  });

Answer 2

You can pass the params in reset action of react-native stack navigator like this:-

const resetAction = NavigationActions.reset({
            index: 0,
            actions: [ 
                NavigationActions.navigate({ 
                    routeName: 'ScreenName',      // name of the screen you want to navigate
                    params: {
                        paramsKey: paramsValue   // this second parameter is for sending the params
                    } 
                })
            ],
});
this.props.navigation.dispatch(resetAction);

And get the parameter value in second screen from the navigation state params like this:-

static navigationOptions = ({navigation, screenProps}) => {
    const params = navigation.state.params || {};   // You can get the params here as navigation.state.params.paramsKey

    console.log("CompareScreen product_id:", params.paramsKey);
}

Answer 3

This is working for me on React Navigation 5:

To reset the state of navigation, navigate to the screen 'OrderDetails' and pass the parameter 'orderCode' to this screen:

navigation.reset({index: 0, routes: [{ name: 'OrderDetails', params: { orderCode: 'whatever' } }] })

To retrieve the parameter orderCode in the new route 'OrderDetails':

function OrderDetails({theme, route, navigation}) {
const { orderCode } = route.params;
...
}

Answer 4

You are passing parameters by using username as key. So when you are retrieving it your code should look like this

Step 1: Pass params

this.props.navigation.navigate('Your-Screen_name',{ username: 'Lucy' })

Step2: Get Params

this.state = { 
    username: this.props.navigation.state.params.username, 
}