12

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

5 Answers 5

17

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}}],
  });
Sign up to request clarification or add additional context in comments.

Comments

10

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);
}

Comments

10

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;
...
}

Comments

2

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, 
}

4 Comments

Hi, I have edit as you mentioned, but I still receive the same error message
Are you using redux structure?
Hi I think no, the guide I follow is from: reactnavigation.org/docs/navigators/navigation-actions . Redux is within the advance guide, and I'm not familiar with that.
Hi, I have edited the code. However, I still received this msg: undefined is not an object (evaluating '_this.props.navigation.state.params.username') in the Console log
2

This works for me:

  1. Pass param:

NavigationActions.navigate({ routeName: 'Location', params: { username: 'Luchi' }}),

  1. Get them:

const params = this.props.navigation.state.params || {}; if (!(params && params.username)) { alert('hi '+params.username) }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.