router root

app.js

import React, { Component } from 'react';
import { Text, StyleSheet,BackHandler,Alert,View,AsyncStorage,ActivityIndicator } from 'react-native';
import {
  Scene,
  Router,
  Actions,
  Reducer,
  ActionConst,
  Overlay,
  Tabs,
  Modal,
  Drawer,
  Stack,
  Lightbox,
} from 'react-native-router-flux';
import RNExitApp from 'react-native-exit-app';
import Toast from 'react-native-simple-toast';
import HomeScreen from './components/HomeScreen';
import LoginScreen from './components/LoginScreen';


import TabsIcon from './Styles/TabsIcon';
import SuratMasukScreen from './components/SuratMasukScreen';
import Placeholder from './components/Placeholder';
import ProfileScreen from './components/ProfileScreen';
import TaskOpenScreen from './components/TaskOpenScreen';
import TaskCloseScreen from './components/TaskCloseScreen';
import TaskDetailScreen from './components/TaskDetailScreen';



const AppScene = () => (
  <Router>
    <Stack key="rootLogin">
      <Scene key="login" component={LoginScreen} title="Login"/>
      <Scene key="home" component={HomeScreen}/>
    </Stack>
  </Router>
);

const TabScene = () => (
  <Tabs
  key="tabbar"
  showLabel={false}
  tabBarStyle={styles.tabBarStyle}
  activeBackgroundColor="#d63031"
  inactiveBackgroundColor="rgb(255, 255,255)"
  tabBarPosition={'bottom'}>

     <Scene key="home"  hideNavBar
      component={HomeScreen}  initial={this.state.hasToken}
      menuName="Home"  titleStyle={styles.title}  
      navigationBarStyle={styles.navBar} 
      iconName="ios-home-outline" icon={TabsIcon} />

       <Scene key="add"  hideNavBar
      component={SuratMasukScreen}  initial={this.state.hasToken}
      menuName="Add"  titleStyle={styles.title}  
      navigationBarStyle={styles.navBar} 
      iconName="ios-add-circle-outline" icon={TabsIcon} />


  </Tabs>
);

class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      isLoggedIn: '',
      hasToken: false, isLoaded: false,temp_jabatan:''
    }

  }

  componentDidMount() {
    AsyncStorage.getItem('id_token').then((token) => {
      this.setState({ hasToken: token !== null, isLoaded: true })

      console.log(token)
    });
  }

  componentWillMount() {
    AsyncStorage.getItem('@loginUser', (error, result) => {
      if (result) {
          let resultParsed = JSON.parse(result)
          this.setState({
              temp_api_token : resultParsed.temp_api_token,
              temp_email:resultParsed.temp_email,
              temp_name:resultParsed.temp_name,
              temp_kecamatan:resultParsed.temp_kecamatan,
              temp_jabatan:resultParsed.temp_jabatan,
              isLoggedIn:true
          })

      }
  })

  }

    render() {
      if (!this.state.isLoaded) {
        return (
          <ActivityIndicator />
        )
      } else {
        let Jabatan = this.state.temp_jabatan  ?  this.state.temp_jabatan : 100
      
          // camat =1 , sekcam = 2 , agendaris = 3 , 100 belum login
        console.log(' jabatan ', Jabatan)
        switch (Jabatan)
        { 
            case 100:
                  return (
                      <Router>
                        <Stack key="root">
                          <Scene key="root">
                              <Scene key="placeholder" component={Placeholder} />
                          </Scene>
                          <Scene key="auth">
                                <Scene key="login" hideNavBar component={LoginScreen}  initial={!this.state.hasToken} />
                          </Scene>
                          <Scene key="main">
                                   <Scene key="home"  hideNavBar on={this.authenticate}
                                    component={HomeScreen}  initial={this.Access}
                                    menuName="Home"  titleStyle={styles.title}  
                                    navigationBarStyle={styles.navBar} 
                                    iconName="ios-home-outline" icon={TabsIcon} />

                          </Scene>
                          
                        </Stack> 
                     </Router>
                  )
                  break;
            
            case 1:
                  // camat nih
                  return (
                    <Router backAndroidHandler={() => Actions.pop()}>
                        <Stack key="root">           
                           <Scene key="root">
                              <Scene key="placeholder" component={Placeholder} />
                          </Scene>
                           <Scene key="auth">
                                <Scene key="login" hideNavBar component={LoginScreen}  initial={!this.state.hasToken} />
                           </Scene>
        
                          <Scene key="main">
                              <Tabs
                                key="tabbar"
                                showLabel={false}
                                tabBarStyle={styles.tabBarStyle}
                                activeBackgroundColor="#5067FF" 
                                inactiveBackgroundColor="rgb(255, 255,255)"
                                tabBarPosition={'bottom'}>
                                  
                                  <Scene key="home"  hideNavBar on={this.authenticate}
                                    component={HomeScreen}  initial={this.Access}
                                    menuName="Home"  titleStyle={styles.title}  
                                    navigationBarStyle={styles.navBar} 
                                    iconName="ios-home-outline" icon={TabsIcon} />
    
                                    <Scene key="profile"  hideNavBar
                                      component={ProfileScreen}  initial={this.state.hasToken}
                                      menuName="Profil"  titleStyle={styles.title}  
                                      navigationBarStyle={styles.navBar} 
                                      iconName="ios-person-outline" icon={TabsIcon} />
                                      
                                      
                                  </Tabs>
                            </Scene>
                        </Stack> 
                    </Router>
                  )
                  break;
            case 2:
                    
            break;

            case 3:
            console.log('case 3 ',this.state )

            return (
               <Router>
              <Stack key="root">
                 
                 <Scene key="root">
                    <Scene key="placeholder" component={Placeholder} />
                </Scene>
                
                 <Scene key="auth">
                      <Scene key="login" hideNavBar component={LoginScreen}  initial={!this.state.hasToken} />
                 </Scene>

                 <Scene key="main">
                    <Tabs
                      key="tabbar"
                      showLabel={false}
                      tabBarStyle={styles.tabBarStyle}
                      activeBackgroundColor="#5067FF" 
                      inactiveBackgroundColor="rgb(255, 255,255)"
                      tabBarPosition={'bottom'}>

                          
                        
                        <Scene key="home"  hideNavBar
                          component={HomeScreen}  initial={this.state.hasToken}
                          menuName="Home"  titleStyle={styles.title}  
                          navigationBarStyle={styles.navBar} 
                          iconName="ios-home-outline" icon={TabsIcon} />

                          <Scene key="add"  hideNavBar direction="vertical"
                          component={SuratMasukScreen}  initial={this.state.hasToken}
                          menuName="Add"  titleStyle={styles.title}  
                          navigationBarStyle={styles.navBar} 
                          iconName="ios-add-circle-outline" icon={TabsIcon} />

                          <Stack key="tab1"  navigationBarStyle={styles.navBar}>
                            <Scene key="taskopen" hideNavBar 
                            component={TaskOpenScreen}  initial={this.state.hasToken}
                            menuName="Task"  titleStyle={styles.title}  
                            navigationBarStyle={styles.navBar} 
                            iconName="ios-list-box-outline" icon={TabsIcon} />

                             <Scene key="detailtask" hideNavBar
                              component={TaskDetailScreen} navigationBarStyle={styles.navBar}
                              iconName="ios-list-box-outline" icon={TabsIcon} menuName="Task"

                              />


                          </Stack>
                        
                           <Scene key="taskdone"  hideNavBar
                          component={TaskCloseScreen}  initial={this.state.hasToken}
                          menuName="Task Done"  titleStyle={styles.title}  
                          navigationBarStyle={styles.navBar} 
                          iconName="ios-list-outline" icon={TabsIcon} />

                          <Scene key="profile"  hideNavBar
                          component={ProfileScreen}  initial={this.state.hasToken}
                          menuName="Profil"  titleStyle={styles.title}  
                          navigationBarStyle={styles.navBar} 
                          iconName="ios-person-outline" icon={TabsIcon} />
                          

                        </Tabs>
                    </Scene>
                </Stack> 
              </Router>
            )
                  break;
        
                } //end switch

        

        } //else

  }
}



const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
     
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
    tabBarStyle: {
      backgroundColor: '#eee',
    },
    tabBarSelectedItemStyle: {
      backgroundColor: '#ddd',
    },
    navBar: {
      backgroundColor: '#5067FF', 
      justifyContent: 'center',
      flexDirection: 'row',
      
    },
    title: {
      color: 'white',
      fontWeight: '300',
      justifyContent: 'center',
      alignItems: 'center',
      fontFamily: 'Poppins-SemiBold',
    }
  
  });
  
  export default App;