React-native-router-flux: How to set initial route

[haabnaseem]

How to set initial route based on state ? let's say if user is logged in select another route, how to switch between them, i have seen a switch feature but it is using with tabs ? anyone can show example code.

[kaenry]

need too.

[sithobog]

Hi!:P
I have needed the same feature. So i did something:P
I'm using 'loading' in state because in other way component will be rendered twice (because i have async action in componentWillMount).
I have authentication by token, so if i have token in storage so user can be logged and MainVIew is initial scene. If i don't have token LoginView is initial scene.

You can use any condition to check if user 'logged in' or whatever you want. You can change ugly loading for some epic animation:D

  constructor(props, context) {
    super(props, context);
    this.state = {
      logged: false,
      loading: true,
    };
  };

  componentWillMount(){
    self = this;
    AsyncStorage.getItem('token')
    .then( (value) =>{
        if (value != null){
          this.setState({
            logged: true,
            loading: false,
          });
        } else{
          this.setState({
            loading: false,
          })
        }
      }
    );
  };

  render() {
    if (this.state.loading) {
      return <View><Text>Loading...</Text></View>;
    }
    return (
      <Router>
        <Scene key='root'>
          <Scene key='login' component={LoginView} title='Login' initial={!this.state.logged} />
          <Scene key='main' component={MainView} title='Main' initial={this.state.logged} />
        </Scene>
      </Router>
    )
  }

[rturk]

@haabnaseem @kaenry @sithobog Check this code. It's from Facebook code. It's a simple elegant approach. If the user is not logged it will show login screen, otherwise when authorized the full app. Works really well.

https://github.com/fbsamples/f8app/blob/master/js/F8App.js#L80

[haabnaseem]

@rturk Thanks will check it out too!, @sithobog 👍 the code you shared
works well, thank you very much

On Thu, Jul 14, 2016 at 1:03 AM, Rafael Turk [email protected]
wrote:

@haabnaseem https://github.com/haabnaseem @kaenry
https://github.com/kaenry @sithobog https://github.com/sithobog Check
this code. It's from Facebook code. It's a simple elegant approach. If the
user is not logged it will show login screen, otherwise when authorized the
full app. Works really well.

https://github.com/fbsamples/f8app/blob/master/js/F8App.js#L80

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/913#issuecomment-232470089,
or mute the thread
https://github.com/notifications/unsubscribe/AG9jBm19AjyX5QSUTFroEk_s5-MRY-Noks5qVUSOgaJpZM4JIkTr
.

[cridenour]

Another approach is to have the initial screen be the login screen as it checks for the AsyncStorage token and on finding that token, calling Actions.main or whatever your other screen should be.

[ZainabShakeel]

Using React-native-router-flux.... i initialized my initial scenes with the access of user login...
export default class Routes extends Component{
constructor(props, context) {
super(props, context);
this.state = {
logged: false,
loading: true,
};
};

componentWillMount(){

var user = firebase.auth().currentUser;
console.log(user);
if(user!=null)
{
  this.setState({
    logged: true,
    loading: false,
  });
}

};

render() {
return (







);
}
}

[Moji0098]

dear @sithobog , this post is for 2016 , did we have any resolve for this now ? for example how to we implement this with switch in RNRF ?