CODEWITHSUNDEEP
javascriptreact-native
Ganesh Kanna
Ganesh Kanna

Reputation: 2275

How to change Navigator left button in react-native at run time?

I have initiated Navigtor with Login.js as route component. On log in I used push method to navigate to dashboard screen where sliding menu present. I have implemented sliding menu using react-native-drawer-layout. Dashbord.js is another file. Now i want to control the navigation bar left button. Thanks in advance.

Upvotes: 1

Views: 987

Answers (1)

BK19
BK19

Reputation: 1534

For this, you have to manage different cases for every route in App.js

App.js

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Dashboard':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
           case 'Page1':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
            case 'Page2':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {navigator.pop()}}>
                        <Icon name='arrow-back' size={25} color={'white'} /> //you can change icon as your requirements
                    </TouchableOpacity>
                )
            default:
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('back')}}>
                        <Icon name='chevron-left' size={25} color={'white'} />
                    </TouchableOpacity>
                )
        }
    },

    RightButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity
                style={styles.navBarRightButton}>
                <Icon name='more-vert' size={25} color={'white'} />
            </TouchableOpacity>
        )
    },

    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

You can able to change left button icon as I have added menu icon on Page1 and arrow-back icon on Page2.

Refer to this link for full implementation of Drawer in react-native: Navigation Drawer

Upvotes: 1

Related Questions