Search code examples
androidreact-nativenavigation-drawerstack-navigator

React Native - Unable to get params that have been passed through navigator(from stack navigator to drawer navigator). Recieving: Object is undefined

The params have been passed and I can see them in the logs but I cannot access them. Screen one is the login screen and is within the stack navigator and screen two is the profile screen which is within the drawer navigator.

Within screen one:

this.props.navigation.navigate('ProfileRoute', {name: data.name});

The line above works and the correct data is picked to be passed. The params are successfully passed, I can see this within the logs.

Within screen two:

There are various ways which I have tried to "catch" or "call" the params passed.

1.

<Text style={styles.name}>{this.props.navigation.params.name}</Text>

2.

<Text style={styles.name}>{this.props.navigation.state.params.name}</Text>

3.

 <Text style={styles.name}>{this.naviation.params.name}</Text>

I have looked it up and the 1st way seems to be the most recommended but I still receive the undefined object error directed to the first part of the line this.props.navigation.params

I have read that the undefined object error occurs when the parameter being requested for has no value. However I can see within the logs that this param has a value.

Is there a specific way one passes data and calls params between the two different kinds of navigators?

Solution

  • This is what worked for me in the end....

    Inside the previous page/screen

    this.props.navigation.navigate('ScreenOneRoute', {name: data.name});

    Inside the next screen 

    var {params} = this.props.navigation.state; 
let name = params.name;

    inside the return

    <Text>{name}</Text>

    Note: data is what I call the information I get from a response from my db