CODEWITHSUNDEEP
react-nativereact-native-navigation
Anamul Haque
Anamul Haque

Reputation: 7309

react-native-navigation drawer not opening

Clicking on the navbar button the drawer is not opening. Here is code i have used for button press

if (event.type === 'NavBarButtonPress') {
        if (event.id === 'sideDrawerToggle') {
            this.props.navigator.toggleDrawer({
                side: 'left',
                animated: true,
            });
        }
    }

Here is the drawer set up

Navigation.startTabBasedApp({
        tabs: [
            {
                label: 'Find Place',
                screen: 'places.FindPlace',
                title: 'Find Place', 
                icon: source[0],
                navigatorButtons: {
                    leftButtons: [
                        {
                            icon : source[2],
                            title : 'Menu',
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
            },
            {
                label: 'Share Place', 
                screen: 'places.SharePlace', 
                title: 'Share Place', 
                icon: source[1],
                navigatorButtons: {
                    leftButtons: [
                        {
                            icon: source[2],
                            title: 'Menu',
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
            }
        ],
        drawer: {
            left: { 
                screen: 'places.SideDrawer'
            }
        }
    });

And this is what my drawer looks like 

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


class SideDrawer extends Component {
    render() {
        return(
            <View style={[
                styles.container,
                {width: Dimensions.get('window').width * 0.8}
            ]}>
                <Text>Drawer</Text>
            </View>
        );
    }
}

const styles = {
    container: {
        backgroundColor : 'white',
        paddingTop: 22,
        flex: 1
    }
};


export default SideDrawer;

By searching a lot i found that giving a fixed width to drawer solves the problem. But its not solving in my case. I don't know what is wrong with the code, It was working fine.

Upvotes: 4

Views: 9673

Answers (4)

Adarsh
Adarsh

Reputation: 2269

You can simply use 

this.props.navigation.openDrawer();

in your screen .

please check official doc and example from the following link

https://reactnavigation.org/docs/en/drawer-based-navigation.html

https://reactnavigation.org/blog/#drawer-routes-have-been-replaced-with-actions

Upvotes: 6

SkyzohKey
SkyzohKey

Reputation: 813

You can specify a built-in button in your navigatorButtons with id: 'sideMenu' and it will do the magic for you. ie. 

...
navigatorButtons: {
  leftButtons: [
    {
      id: "sideMenu"
    }
  ]
},
...

Upvotes: 2

Chanoch
Chanoch

Reputation: 593

Are you using an iPhone? It seems there's a bug to this in the wix one which affects them but not Android.

Deep links might work https://wix.github.io/react-native-navigation/#/deep-links

Upvotes: 0

William Matias
William Matias

Reputation: 354

I don't think that is the right way of setting up the drawer navigation. Check out the oficial documentation here: https://reactnavigation.org/docs/navigators/drawer. It shows that each component that the drawer will navigate to is a scene that you define and set up in the Main Component of the app.

I also recommend using the Drawer from NativeBase.io https://docs.nativebase.io/Components.html#Drawer. Which gives you a better look and feel on both iOS and Android, it looks more native to both.

Upvotes: 0

Related Questions