React Native FBSDK onLoginFinished push to new screen

Question

I'm somewhat new to using react native and I'm trying to implement Facebook login with my app using the react native fbsdk.

I've gotten it to the point where it will ask for permissions from the user's Facebook profile, then return to the app with a success alert message. Instead of displaying the alert onLoginFinished, I want to push to a new screen.

This is my login button code in the main constructor class:

constructor(props){
 super(props);
 this.goToNewPage = this.goToNewPage.bind(this);
 const infoRequest = new GraphRequest(
  '/me',
  {parameters: {
          fields: {
            string: 'email,first_name,last_name,id,gender' // what you want to get
          }
  }},
  this._responseInfoCallback,
 );
 Login = React.createClass({
  render: function() {
    return (
      <View >
        <LoginButton
          navigator={this.props.navigator}
          style = {{marginLeft:55, marginRight:55, height:50, width:300}}

          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + result.error);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
                new GraphRequestManager().addRequest(infoRequest).start();
                this.goToNewPage;

              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}
          />
      </View>
    );
  }
 });
} //closes constructor 

_responseInfoCallback(error: ?Object, result: ?Object) {
if (error) {
  alert('Error fetching data: ' + error.toString());
} else {
  alert('Success fetching data: ' + result.toString());
  console.log(result);
 }
}

goToNewPage(){
console.log("Hello from go to new page function");
this.props.navigator.push({
  id: 'newPage',
  name: 'Going To New Page',
});
}

But after the success alerts are displayed, it does not push to the new page. It seems like this.props.navigator is not recognized in my Login class, and I'm not sure why. Any help at all would be greatly appreciated

Answer 1

Turns out the problem was that I declared the login class in my constructor. Moving it to a componentWillMount function fixed it for me!

Answer 2

Currently you are calling goToNewpage() method in error, result block of LoginButton component and in any kind of block we can't access current class reference "this" directly because it loses its reachability.

Then you should create a global variable for this component as

var _this;

and assign current reference of class in component constructor like:

_this = this;

and should use _this.props.navigator.push in place of this.props.navigator.push within your goToNewpage() method. Thanks!