Skip to content
This repository has been archived by the owner on Feb 15, 2019. It is now read-only.

Conditional routing example #479

Open
clipsmm opened this issue May 28, 2017 · 1 comment
Open

Conditional routing example #479

clipsmm opened this issue May 28, 2017 · 1 comment

Comments

@clipsmm
Copy link

clipsmm commented May 28, 2017

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
Copy link

@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 (

<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 (

<Text style={[cs.jcCenter,{padding:15}]}
onPress={() => this.closePressed()}>
<FontAwesome name='close' size={27} style={[cs.transparentBackground, cs.colorA8,cs.selfCenter]}/>


);
};

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>
    );
};

}`

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants