How to callback function result initial route determined in react native.?

Question

Login is the first route each time.

I want to show the tabpage if user login. Otherwise, I want to navigate to the login page.

class blabla extends Component {
  constructor(props) {
      super(props);
      this.state = {
        user: null
      }
  }
  componentDidMount(){
     var _this = this;
      FBLoginManager.getCredentials(function(error, data){
        if (!error) {
          _this.setState({ user : data.credentials });
        } else {
          _this.setState({ user : null });
        }
      });
  }
  render() {
  console.log(this.state.user)
  // 1. render -> null 
  // 2. render -> data 
    return (
      <NavigatorIOS ref="navigator"
        style={styles.nav}
        initialRoute={{
          title: "blabla",
          component: this.state.user != null  ? TabPage : Login,
        }} />
    );
  }
}

Solved this problem , I use twice statement and replace the code es6 syntax to es5 because I don't know use if( !_this.isMounted() ) return; in es6 syntax .

getInitialState: function(){
    return {
      credentials: undefined,
      load:true
    };
  },


  componentDidMount: function(){
    var _this = this;
    FBLoginManager.getCredentials(function(error, data){
      if( !_this.isMounted() ) return;
      if (!error) {
        _this.setState({ credentials : data.credentials,load:false });
      } else {
        _this.setState({ credentials : false,load:false });
      }
    });
  },

  render: function() {
    if (this.state.load) {
      return <View style={{flex:1,justifyContent:"center"}}><Text style={{textAlign:"center"}}>loading...</Text></View>
    }
    return <NavigatorIOS ref="nav"
        style={{flex:1}}
        navigationBarHidden={false}
        rightButtonTitle="Profile"
        onRightButtonPress= {() => this.left()}
        initialRoute={{
          title: "AnsApp",
          component: this.state.credentials != undefined && this.state.credentials != false ? TabPage : Profile ,
        }} />
  },

Answer 1

Hope this helps you. It's saturday and I'm working hard on my portfolio, but I did some improvements and clarified some parts. Feel free to ask me if you have questions :smiley:

 class blabla extends Component {
  constructor(props) {
      super(props);
      this.state = {
        user: null ,
        loggedInn: !true
      }
  }
  componentDidMount(){
     var _this = this;
      FBLoginManager.getCredentials(function(error, data){
        if (this.state.loggedInn = !true) {
          _this.setState({ user : data.credentials });
        }
           return this.state;
      });
  },
  Logon () {
   // your this.state validation 
  }
  render() {
  console.log(this.state.user)
  // 1. render -> null 
  // 2. render -> data 
    return (
      <NavigatorIOS ref="navigator"
        style={styles.nav}
        initialRoute={{
          title: "blabla",
          component: this.state == Logon ? TabPage : Login,
        }} />
    );
  }
}