Conditional routing example

[clipsmm]

Hi, would you kindly provide an example for conditional routing. Example Dashboard (TabView) Login (Stackview) The idea is when the app is launched we start with login the if success we change route to the dashboard

Please help

[anny1895]

@mitajunior , you can initialize with the stackNavigator with login component as inital and then push tab or drawer page with its tab initalized with the initial page you want like this:(You can use tabNavigator instead)

`

            <StatusBar
                hidden={true}
            />
            <StackNavigation initialRoute={Router.getRoute('login')}
                             navigatorUID="mainNav"
                             defaultRouteConfig={{
                                     navigationBar: {
                                         visible: false,
                                     }
                                 }}/>

        </NavigationProvider>
            </Provider>`

'then on login button you can push drawer screen. Here is my drawer screen:

`export default class DrawerNavigationLayout extends React.Component { constructor(props){ super(props); } static route = { navigationBar: { visible: false, } }; closePressed = () => { const { navigation } = this.props; const navigator = navigation.getNavigator('mainDrawer'); navigator.toggleDrawer() }; render() { return ( <DrawerNavigation id='mainDrawer' navigatorUID="drawerNav" initialItem='home' drawerWidth={Constant.screenWidth} renderHeader={this._renderHeader}

<DrawerNavigationItem id='home' selectedStyle={styles.selectedItemStyle} renderTitle={isSelected => this._renderTitle('Home', isSelected)}

<StackNavigation id='home' initialRoute={Router.getRoute('homeScreen')} />

            <DrawerNavigationItem
                id='Updates'
                selectedStyle={styles.selectedItemStyle}
                renderTitle={isSelected => this._renderTitle('Updates', isSelected)}
            >
                <StackNavigation
                    id='Updates'
                    initialRoute={Router.getRoute('AllUpdates')}
                />
            </DrawerNavigationItem>
            <DrawerNavigationItem
                id='Payments'
                selectedStyle={styles.selectedItemStyle}
                renderTitle={isSelected => this._renderTitle('Payments', isSelected)}
            >
                <StackNavigation
                    id='Payments'
                    initialRoute={Router.getRoute('AllPayments')}
                />
            </DrawerNavigationItem>
            <DrawerNavigationItem
                id='Services'
                selectedStyle={styles.selectedItemStyle}
                renderTitle={isSelected => this._renderTitle('Services', isSelected)}
            >
                <StackNavigation
                    id='Services'
                    initialRoute={Router.getRoute('AllServices')}
                />
            </DrawerNavigationItem>
            <DrawerNavigationItem
                id='Account'
                selectedStyle={styles.selectedItemStyle}
                renderTitle={isSelected => this._renderTitle('Account', isSelected)}
            >
                <StackNavigation
                    id='Account'
                    initialRoute={Router.getRoute('Account',{navData: this.props.navigator})}
                />
            </DrawerNavigationItem>
            <DrawerNavigationItem
                id='Support'
                selectedStyle={styles.selectedItemStyle}
                renderTitle={isSelected => this._renderTitle('Support', isSelected)}
            >
                <StackNavigation
                    id='Support'
                    initialRoute={Router.getRoute('Support')}
                />
            </DrawerNavigationItem><DrawerNavigationItem
            id='Refer'
            selectedStyle={styles.selectedItemStyle}
            renderTitle={isSelected => this._renderTitle('Refer A Friend', isSelected)}
        >
            <StackNavigation
                id='Refer'
                initialRoute={Router.getRoute('Refer')}
            />
        </DrawerNavigationItem>
        </DrawerNavigation>
    );
}

_renderHeader = () => { return (

this.closePressed()}>

    );
};

getIcon = (title) =>{
    if (title === "Home"){
        return <FontAwesome name='home' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }else if(title === "Updates"){
        return <FontAwesome name='bell' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }else if(title === "Payments"){
        return <FontAwesome name='money' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }else if(title === "Services"){
        return <FontAwesome name='cubes' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }else if(title === "Account"){
        return <FontAwesome name='user' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }else if(title === "Support"){
        return <FontAwesome name='handshake-o' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }else if(title === "Refer A Friend"){
        return <FontAwesome name='user-plus' size={25} style={[cs.transparentBackground, cs.colorA8]} />
    }
};

_renderTitle(text: string, isSelected: boolean) {
    return (
        <Row style={{paddingLeft: 20,paddingRight: 0,paddingTop: 0,paddingBottom: 0,marginLeft: 10}}>
            <Col size={1} style={[cs.jcCenter]}>
                <Text style={[cs.jcCenter]}>
                    {this.getIcon(text)}
                </Text>
            </Col>
            <Col size={4} style={[cs.pl1,cs.jcCenter]}>
                <Text style={[cs.colorA8,cs.fontKorolevBold, csFont.TITLE_FONT]}>{text}</Text>
            </Col>
        </Row>
    );
};

}`