React-native - passing props undefined

Question

I'm trying to pass a username between two files but it remains undefined. Where am I going wrong? Thanks!

//Login file

      constructor(props){
        super(props);
        this.state={
          credentials: {
            username: "",
            password:"",

          }
        }
        this.navigate = this.props.navigation.navigate;
    }


      signIn(){
          {....}
          this.navigate("main", {
                username: this.state.username,
              });
        }

  }

In Main:

constructor(props) {
        super(props);
    this.navigate = this.props.navigation.navigate;
    this.params = this.props.navigation.state.params;
}
{...}
    render() {
    console.log(this.params.username);
    //here it's undefined

Answer 1

You are accessing the params incorrectly in Main component, you need to access from this.props.navigation.state.params , you would get it like

constructor(props) {
        super(props);
    this.navigate = this.props.navigation.navigate;
    this.params = this.props.navigation.state.params;
}
{...}
render() {
console.log(this.props.navigation.state.params.username);

Answer 2

Use params while navigate() to pass the parameters.

this.navigate({
   routeName: 'main',
   key: 'main',
   params: { 
      username: this.state.username
   }
});

To access it use this.props.navigation.state.params.username .

Hope this will help!