Login fail with error: TypeError: Cannot read property 'navigation' of undefined

Question

I'd like to activate Facebook login by react native firebase. My purpose is to move to Signin screen to Main Screen.

I use,

react-native: 0.52.2 react-native-firebase: ^3.2.4 react-navigation: ^1.0.0-beta.28

LoginScreen.js

const facebookLogin = () => {

  return LoginManager
.logInWithReadPermissions(['public_profile', 'email'])
.then((result) => {

  if (!result.isCancelled) {
    console.log(`Login success with permissions: ${result.grantedPermissions.toString()}`)
    // get the access token
    return AccessToken.getCurrentAccessToken()
  }
})
.then(data => {
  if (data) {
    // create a new firebase credential with the token
    const credential = firebase.auth.FacebookAuthProvider.credential(data.accessToken)
    // login with credential
    return firebase.auth().signInAndRetrieveDataWithCredential(credential)
  }
})
.then((currentUser) => {
  if (currentUser) {
    console.log(currentUser);
    return this.props.navigation.navigate('Main');
  }
})
.catch((error) => {
  console.log(`Login fail with error: ${error}`)
})
}

After (currentUser), I added following that. this.props.navigation.navigate('Main');

But that doesn't work! I have already set up Router, and that did work at out of Auth Component.

I checked at console.log and that shows me:

Login fail with error: TypeError: Cannot read property 'navigate' of undefined"

So I tried to move const { navigation } = this.props; from Auth Component to other SigninScreen Component. But I can't see successful login.

Thanks for your answer. And I have defined already in Parent component.

I defined navigation here.

class SignInScreen extends React.Component {
  render() {
   const { navigate } = this.props.navigation;

    return (
      <View style={styles.containerStyle}>
        <TouchableOpacity onPress={facebookLogin}>
          <Text style={styles.textStyle}>Facebook</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Damsith Karunaratna Damsith Karunaratna · Accepted Answer · 2018-02-05T12:53:57

It seems that the navigation object is undefined. Check the parent component to see if navigation is defined before it is passed as props to this component

It could also be due to the way javascript handles the this keyword. see this answer You could try binding the navigate method to the Class by adding

this.navigate = this.props.navigation.navigate.bind(this) inside the constructor,

and change

.then((currentUser) => {
  if (currentUser) {
    console.log(currentUser);
    return this.props.navigation.navigate('Main');
  }

to

.then((currentUser) => {
  if (currentUser) {
    console.log(currentUser);
    return this.navigate('Main');
  }

Login fail with error: TypeError: Cannot read property 'navigation' of undefined

1 Answers