Set initial state on react-native-router-flex
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;