Savad
Savad

Reputation: 1316

Cannot read property 'navigation' of undefined - react native

I am developing a react native app. In that app When I am calling the following function I am getting an error

Cannot read property 'navigation' of undefined

      handleForgotPassword = (email) => {
        firebase.auth().sendPasswordResetEmail(email)
        .then(function (user) {
          console.log("Inner");
          this.props.navigation.navigate("Login") //not working
        }).catch(function (e) {
          console.log(e)
        })

      }

But on the same page, I am using this following code and it is working fine.

<TouchableOpacity onPress={() => this.props.navigation.navigate("Login")}> //but this is working
      <Image  source={require('../src/Assets/close.png')} />
      </TouchableOpacity> 

Can anyone please tell me what is the problem

Upvotes: 0

Views: 78

Answers (1)

Hend El-Sahli
Hend El-Sahli

Reputation: 6752

Anonymous function has it's own context (that's why navigation is undefined) ... but arrow function is automatically bound to it's parent

       firebase.auth().sendPasswordResetEmail(email)
        .then((user) =>  {
          console.log("Inner");
          this.props.navigation.navigate("Login") // Will work
        })

Upvotes: 3

Related Questions