help with routing

[texas697]

how can I remove the drawer icon if i am at my login screen? I would assume you do this with the current route state?

[Ehesp]

In the Toolbar, an icon is only rendered if you pass a prop string: https://github.com/react-native-material-design/react-native-material-design/blob/master/lib/Toolbar.js#L71

Simply don't pass in the prop and it shouldn't show - the margins should also work if there isn't an icon present.

[texas697]

trying to see where I would not pass in any props. I do not have listed in the drawer

export default {
    login: {
        initialRoute: true,
        title: 'Login',
        component: require('./scenes/Login').default
    },
    home: {
        title: 'Home',
        component: require('./scenes/Home').default
    },
    subdivisions: {
        title: 'Subdivisions',
        component: require('./scenes/Subdivisions').default
    },
    map: {
        title: 'Map',
        component: require('./scenes/Map.js')
    },
    trips: {
        title: 'Trips',
        component: require('./scenes/Trips.js')
    },
    themes: {
        title: 'Logout',
        component: require('./scenes/Logout').default
    }
}

'use strict';

import React, {
    Component,
    PropTypes,
    View,
    Text,
    Image } from 'react-native';

import { Drawer, Divider, COLOR, TYPO } from 'react-native-material-design';
import BackgroundGeolocation from 'react-native-background-geolocation-android';

global.bgGeo = BackgroundGeolocation;

export default class Navigation extends Component {

    //noinspection JSUnusedGlobalSymbols
    static contextTypes = {
        drawer: PropTypes.object.isRequired,
        navigator: PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.state = {
            route: null
        }
    }

    changeScene = (path, name) => {
        const { drawer, navigator } = this.context;

        this.setState({
            route: path
        });
        navigator.to(path, name, { locationManager: BackgroundGeolocation });
        drawer.closeDrawer();
    };

    render() {
        const { route } = this.state;

        return (
            <Drawer theme='light'>
                <Drawer.Header image={<Image source={require('./../img/nav.jpg')} />}>
                    <View style={styles.header}>
                        <Text style={[styles.text, COLOR.googleRed700, TYPO.paperFontSubhead]}>Metro Track</Text>
                    </View>
                </Drawer.Header>

                <Drawer.Section
                    items={[{
                        icon: 'home',
                        value: 'Home',
                        active: !route || route === 'home',
                        onPress: () => this.changeScene('home'),
                        onLongPress: () => this.changeScene('home')
                    }]}
                />
                <Drawer.Section
                    items={[{
                        icon: 'list',
                        value: 'Subdivisions',
                        active: route === 'subdivisions',
                        onPress: () => this.changeScene('subdivisions'),
                        onLongPress: () => this.changeScene('subdivisions')
                    }, {
                        icon: 'map',
                        value: 'Map',
                        active: route === 'map',
                        onPress: () => this.changeScene('map'),
                        onLongPress: () => this.changeScene('map')
                    }, {
                        icon: 'list',
                        value: 'Trips',
                        active: route === 'trips',
                        onPress: () => this.changeScene('trips'),
                        onLongPress: () => this.changeScene('trips')
                    }]}
                />
                <Divider style={{ marginTop: 8 }} />
                <Drawer.Section
                    items={[{
                        icon: 'exit-to-app',
                        value: 'Logout',
                        active: route === 'logout',
                        onPress: () => this.changeScene('logout'),
                        onLongPress: () => this.changeScene('logout')
                    }]}
                />

            </Drawer>
        );
    }
}

const styles = {
    header: {
        paddingTop: 16
    },
    text: {
        marginTop: 100
    }
};

[Ehesp]

Do you mean the drawer icon on the Toolbar, or do you mean menu icons in the drawer?

In the demo app (I assume you're using that?) the Toolbar is injected into every route with the native Navigator https://github.com/react-native-material-design/demo-app/blob/master/index.android.js#L61 (https://github.com/react-native-material-design/demo-app/blob/master/src/components/Toolbar.js#L54). You'd need some way of letting the Toolbar know that this particular route doesn't need the icon.

[texas697]

yes i am using the demo app. I am referring to the hamburger icon on the toolbar. sorry about saying it was the drawer. ok, i was just making sure there wasnt something already there that could do it. thanks

[Ehesp]

Yeah the demo app was built up trying to show a way of easily navigating around the app, since I don't think the native router makes it easy, especially if you want your own Toolbar.

You're probably best using a flux store to store the current route you're on, and then in the Toolbar component do something like (roughly):

// arrayOfRoutes = routes which allow the drawer icon
const enableIcon = arrayOfRoutes.includes(currentRoute);

<Toolbar
    icon={enableIcon ? 'menu' : null}
 />