Sample DrawerLayout opened by clicking in a TouchableHighlight component

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  DrawerLayoutAndroid,
  TouchableHighlight,
} = React;

var DrawerTest = React.createClass({
  openDrawer:function() {
    this.refs['DRAWER'].openDrawer()
  },
  render: function() {
    var navigationView = (
        <View style={{flex: 1, backgroundColor: '#fff'}}>
          <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
        </View>
    );
    return (
          <DrawerLayoutAndroid
              drawerWidth={300}
              ref={'DRAWER'}
              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>
    );
  }
});

AppRegistry.registerComponent('DrawerTest', () => DrawerTest);

hi, I wanted to implement same functionality as above but I am getting error of an object.

Error: undefined is not an object (evaluating 'this.refs['DRAWER]')

Here is my code snippet:

class LoginPage extends Component {

    openDrawer() {
        this.refs['DRAWER'].openDrawer()
    }
    render() {
        var navigationView = (
            <SideBarMenu />
        );
        return (
            <DrawerLayoutAndroid
              drawerWidth={300}           
              ref={'DRAWER'}
              drawerPosition={DrawerLayoutAndroid.positions.Left}
              renderNavigationView={() => navigationView}>               
              <View style={{flex: 1, alignItems: 'center'}}>                
                <TouchableHighlight onPress={this.openDrawer}>
                  <Text>{'Open Drawer'}</Text>
                </TouchableHighlight>
              </View>
              <ComponentDemo />
            </DrawerLayoutAndroid>
        );
    }
}

Can you please guide me where am I am wrong.

I had the same issue.
Just Try <TouchableHighlight onPress={()=>this.openDrawer()}> instead of <TouchableHighlight onPress={this.openDrawer}>.
This will fix your issue......

This question is a little old now, but I just got into the same problem. A few notes:

Using ref with string is deprecated, you should use a callback function. Also, with classes, you should bind the function in the constructor so it gets the correct scope.

Didn't test, but I believe below code should work:

class LoginPage extends Component {
    constructor() {
        super();
        this.openDrawer = this.openDrawer.bind(this);
    }

    openDrawer() {
        this.drawer.openDrawer();
    }

    render() {
        return (
            <DrawerLayoutAndroid
              drawerWidth={300}           
              ref={(_drawer) => this.drawer = _drawer}
              drawerPosition={DrawerLayoutAndroid.positions.Left}
              renderNavigationView={() => <SideBarMenu />}>               
              <View style={{flex: 1, alignItems: 'center'}}>                
                <TouchableHighlight onPress={this.openDrawer}>
                  <Text>{'Open Drawer'}</Text>
                </TouchableHighlight>
              </View>
              <ComponentDemo />
            </DrawerLayoutAndroid>
        );
    }
}

Thanks @lalkmim! It worked!

Sad we can't 👍 on gist! Thanks @lalkmim for your clean solution.

Thanks @lalkmim for the solution!

Thanks @Ialkmim -- but in order to make it work, I had to change this.drawer.openDrawer() to this._drawer.openDrawer()...

@ajeshekl Thanks. Worked for me. Is it due to change in ES standard ?

Thanks @yashvekaria for raising the issue and @lalkmim and @ajeshekl for the solution!

I got an issue, it shows only shadows when clicking the bottom
but shows navigation view when swiped from left

I got an issue, it shows only shadows when clicking the bottom
but shows navigation view when swiped from left

same issue