(React-Native) Possible Unhandled Promise Rejection FBSDK

Question

So I have this code:

export default class Login extends Component {

  constructor(props){
    super(props);
    this._fbAuth = this._fbAuth.bind(this);
    this.login = this.login.bind(this);
  }

  login(){
      this.props.navigator.push({
        id: "Home",
      });
  }

  _fbAuth(){
    LoginManager.logInWithReadPermissions(['public_profile']).then(
      function(result) {
        if (result.isCancelled) {
          alert('Login cancelled');
        } else {
alert('Login success with permissions: '+result.grantedPermissions.toString());
          this.login();
        }
      },
      function(error) {
        alert('Login fail with error: ' + error);
      }
    );
  }

  render() {
    return (
      <View style={styles.container}>
              <View style={styles.botbuttoncontainer}>
                <Text style={styles.otherlogintext}>Or log in using</Text>
                <View style={styles.otherloginbutton}>
                <TouchableOpacity style={styles.facebookbutton} activeOpacity={0.5} onPress={()=>this._fbAuth()}>
                  <Icons name="logo-facebook" size={20} color="white"/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.twitterbutton} activeOpacity={0.5}>
                  <Icons name="logo-twitter" size={20} color="white"/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.googlebutton} activeOpacity={0.5}>
                  <Icons name="logo-googleplus" size={20} color="white"/>
                </TouchableOpacity>
                </View>
              </View>
      </View>
    );
  }
}

Every time I try to login with facebook it's successful. but I always get a warning says

"Possible Unhandled Promise Rejection(id:0): TypeError: undefined is not a function (evaluating 'this.login()')"

I try to bind both function _fbAuth and login on constructor but it's still give the same warning.

Answer 1

You need to bind inner function of then call.

Example

LoginManager.logInWithReadPermissions(['public_profile']).then(
  function (result) {
    if (result.isCancelled) {
      alert('Login cancelled');
    }
    else {
      alert('Login success with permissions: ' + result.grantedPermissions.toString());
      this.login();
    }
  }.bind(this),
  function (error) {
    alert('Login fail with error: ' + error);
  }
);

Or you can use arrow functions

LoginManager.logInWithReadPermissions(['public_profile']).then(
  (result) => {
    if (result.isCancelled) {
      alert('Login cancelled');
    }
    else {
      alert('Login success with permissions: ' + result.grantedPermissions.toString());
      this.login();
    }
  },
  function (error) {
    alert('Login fail with error: ' + error);
  }
);

Another good practice is using catch when using Promise

Example

LoginManager.logInWithReadPermissions(['public_profile']).then(
  (result) => {
    if (result.isCancelled) {
      alert('Login cancelled');
    }
    else {
      alert('Login success with permissions: ' + result.grantedPermissions.toString());
      this.login();
    }
  },
  function (error) {
    alert('Login fail with error: ' + error);
  }
).catch((error) => console.error(error)); // error handling for promise