While using login button, how to customise the landing page after login using react-native-fbsdk?

Question

Using this react-native wrapper, I implemented the solution for Login in the documentation using Login Button + Access Token.

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
  AccessToken
} = FBSDK;

var Login = React.createClass({
  render: function() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    alert(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
}); 

The result is a screen with fb login button, on login navigates to a page with logout button.First where is this logout button coming from if I have not written code for it.Plus I don't want the logout button. Instead want to show homepage for my app? Where am I going wrong ?

Answer 1

If you want to show a homepage after login (and presumably show the login page only when you're not logged in) you'll have to track the login status yourself in your state (or in a store).

Simple example:

var Login = React.createClass({

  getInitialState() {
    return {isLoggedIn: false}
  },

  render: function() {

    if (this.state.isLoggedIn) {
      return (
        <Text> I'm Logged In! </Text>
      )
    } else {
      return (
        <View>
          <LoginButton
            publishPermissions={["publish_actions"]}
            onLoginFinished={
              (error, result) => {
                if (error) {
                  alert("login has error: " + result.error);
                } else if (result.isCancelled) {
                  alert("login is cancelled.");
                } else {
                  AccessToken.getCurrentAccessToken().then(
                    (data) => {
                      this.setState({isLoggedIn: true})
                      alert(data.accessToken.toString())
                    }
                  )
                }
              }
            }
            onLogoutFinished={() => alert("logout.")}/>
        </View>
      );
    }        
  }
}); 

For more complex (and real) functionality you'll probably want to use Navigator