Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
like image 330
Shubham Avatar asked Dec 27 '17 18:12

Shubham


People also ask

How to use React Native router flux in Android?

We will use the React Native Router Flux in this chapter. You can run the following command in terminal, from the project folder. Since we want our router to handle the entire application, we will add it in index.ios.js. For Android, you can do the same in index.android.js. Now we will create the Routes component inside the components folder.

What is routing in React Native?

React Native Router Introduction to React Native Router Routing as the name suggests, it’s a process for creating a pathway. In Mobile Applications, Routing means to create a path for the user through which the user can switch between the different scenes of an application and perform different things.

How to implement navigation in React Native?

There are some options in React Native which helps in the navigation part of an application. We will implement it through the most used React Native Router Flux. Given below are the different features: It identifies the screen and animations at a location. The syntaxes for performing different transitions between the screens are quite simple.

How to switch between different scenes in a router?

Each scene will need key, component and title. Router uses the key property to switch between scenes, component will be rendered on screen and the title will be shown in the navigation bar. We can also set the initial property to the scene that is to be rendered initially.


1 Answers

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!

like image 131
richTheCreator Avatar answered Sep 28 '22 02:09

richTheCreator