How to set initial scene in react-native-router-flux with checking the state of the user?

Question

How to set initial scene in react-native-router-flux based upon the user logged in state. Here is my code that I want to achieve this functionality. I want scene 2 if user logged in and scene 1 if user not logged in.

I'm facing an issue with this code it always return a first screen rather than scene 2 I have the user logged in state.

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Scene1 from '../Scene1';
import Scene2 from '../Scene2';

// localization strings
import strings from '../config/localization';

import styles from './Styles';

class Routes extends Component {
  state = {
    isUserLogin: false
  }
  async componentDidMount() {
    await AsyncStorage.getItem('user', (err, result) => {
      if (result != null) {
        this.setState({ isUserLogin: JSON.parse(result).isUserLoggedIn });
      }
      if (__DEV__) {
        console.log('routes', this.state); // return trur or false if user logged in or not
      }
    });
  }
  render() {
    return {
      <Router
        backAndroidHandler={() => Actions.pop()}
        sceneStyle={styles.sceneStyle}
        >
          <Scene key="root">
            <Scene
              key="merchants"
              component={Scene1}
              title={strings.selectBusiness}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              initial={!this.state.isUserLogin}
            />
            <Scene
              key="initializeStore"
              component={Scene2}
              hideNavBar
              initial={this.state.isUserLogin}
            />
            <Scene
              key="login"
              component={Login}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              back
              renderBackButton={renderBackButton}
            />
          </Scene>
      </Router>
    }
  }
}

export default Routes;

Cheriecherilyn

Which version of RNRF are you using? – Wifeless

"react-native-router-flux": "^4.0.0-beta.22" – Cheriecherilyn

Answer 1

This can be accomplished with the use of the on, success, and failure props provided to each Scene via RNRF V4

Below is how you can add to your code:

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Scene1 from '../Scene1';
import Scene2 from '../Scene2';

// localization strings
import strings from '../config/localization';

import styles from './Styles';

class Routes extends Component {
  state = {
    isUserLogin: false
  }
  async componentDidMount() {
    await AsyncStorage.getItem('user', (err, result) => {
      if (result != null) {
        this.setState({ isUserLogin: JSON.parse(result).isUserLoggedIn });
      }
      if (__DEV__) {
        console.log('routes', this.state); // return trur or false if user logged in or not
      }
    });
  }

// HELPER FUNCTION FOR AUTH
  authenticate = () => {
    this.state.isUserLogin ? true : false
  }

  render() {
    return {
      <Router
        backAndroidHandler={() => Actions.pop()}
        sceneStyle={styles.sceneStyle}
        >
          <Scene key="root">
            <Scene 
              key="Launch" 
              component="Launch"
              initial
              on={this.authenticate}
              success="Scene2"
              failure="Scene1"
            />
            <Scene
              key="merchants"
              component={Scene1}
              title={strings.selectBusiness}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              initial={!this.state.isUserLogin}
            />
            <Scene
              key="initializeStore"
              component={Scene2}
              hideNavBar
              initial={this.state.isUserLogin}
            />
            <Scene
              key="login"
              component={Login}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              back
              renderBackButton={renderBackButton}
            />
          </Scene>
      </Router>
    }
  }
}

export default Routes;

The added Launch scene is just a placeholder scene that appears while RNRF does its logic. You can make this scene simple and just add your logo or whatever you'd like as it will not be appearing for long.

Food for thought

Your Router will have a hard time getting to Login this way. Wrapping each section, "logged in scenes" & "logged out scenes", in a stack or scene will allow the on redirects to flow better.

If you'd like to see how I handle this, check out my repo here!

Wifeless

Just to check, since there's a suggested edit to this effect: are the success and failure attributes meant to have the <Scene /> keys as their values, or the components? – Snood

Answer 2

I also have the same issue, you have to check on the welcome screen instead of navigation screen if the user is logged in.

please check here : enter link description here

and add this

type={ActionConst.RESET}

in your <Scene> which u want to come first if user is logged in.

Schottische