react native programmatically open DrawerLayoutAndroid

Question

I am using the DrawerLayoutAndroid and struggling to work out how to programmatically open and close it.

I see that you are supposed to use

openDrawer(0)but how do you reference the DrawerLayoutAndroid

I have a drawer that I have made exactly like in the docs, then I have a button on my View that if you press it I want it to open the DrawerLayoutAndroid

I created this function

toggleDrawer(){
  openDrawer(0);
};

but that obviously doesnt work, and just throws an error.

Answer 1

You should use refs for this. I am pasting the example here for your reference

    var DrawerExample = React.createClass({

        openDrawer:function() {
            this.refs['myDrawer'].openDrawer();
        },

        closeDrawer:function() {
            this.refs['myDrawer'].closeDrawer();
        },

        render: function() {
            var navigationView = (
                <View style={{flex: 1, backgroundColor: '#fff'}}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>

                    <TouchableHighlight onPress={this.closeDrawer}>
                        <Text>{'Close Drawer'}</Text>
                    </TouchableHighlight>

                </View>
            );
            return (
                <DrawerLayoutAndroid ref="myDrawer"
                    drawerWidth={300}
                    drawerPosition={DrawerLayoutAndroid.positions.Left}
                    renderNavigationView={() => navigationView}>
                    <View style={{flex: 1, alignItems: 'center'}}>
                        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
                        <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>

                        <TouchableHighlight onPress={this.openDrawer}>
                            <Text>{'Open Drawer'}</Text>
                        </TouchableHighlight>

                    </View>
                </DrawerLayoutAndroid>
            );
        },
    });