Q:

Navigate after Facebook Login

Facebook login window 
I was wondering how to navigate to the next page after I press "continue" (check the image). I'm currently using the code below, but it gives me an error "Cannot read property 'navigation' of undefined"
  fbAuth() {
        LoginManager.logInWithReadPermissions(['public_profile']).then(function(result){
          if (result.isCancelled){
            console.log('Login Cancelled')
          } else {
            this.props.navigation.navigate('Home')
          }
        }, function(error){
          console.log('Error occurred' + error);
        })
      }

My render function is the code below (TouchableHighlight with the image "Button.png" is the Facebook login button that pops up the login window)
render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="light-content"/>
        <TouchableHighlight onPress={this.fbAuth}
          underlayColor="white">
          <Image style={{width: 218, height: 37}}
            source={require('../../images/Button.png')}/>
        </TouchableHighlight>
        <Image style={styles.orLine}
          source={require('../../images/OrLine.png')}/>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('Signin')}
          underlayColor="white">
          <Image style={{width: 60, height: 20}}
            source={require('../../images/SignInButton.png')}/>
        </TouchableHighlight>
        <Image style={styles.toolBar}
          source={require('../../images/ToolBar.png')}/>
        <TouchableHighlight onPress={() => this.props.navigation.navigate('Signup')} underlayColor="white"
          style={styles.signUpButton}>
        <Image style={styles.signUpButton}
          source={require('../../images/SignUpButton.png')}/>
        </TouchableHighlight>
      </View>
    );
  }
}

Also how do I change the status bar barStyle when the login window pops up? (so that when the window closes it changes back to the original barStyle).
Thank you so much.

A:

Going off the error message you posted, the issue is that the correct "this" object is not being passed into the "fbAuth" function in your first "TouchableHighlight" component. This is occurs when you pass the function directly as input to an "onPress" or other event handlers. To pass the correct "this" object, you can use an anonymous function using arrow notation like you're doing in the other "onPress" functions.
The relevant code block is:
    <TouchableHighlight onPress={() => this.fbAuth()}
      underlayColor="white">
      <Image style={{width: 218, height: 37}}
        source={require('../../images/Button.png')}/>
    </TouchableHighlight>

To answer your other question, you'll have to include the color of the statusBar in the app's state and then update the state when the log-in window pops up. 

