React-Native Undefined is not an object (evaluating 'this.refs.['DRAWER'])

Question

How do I resolve this error? I've tried but still error ..

DrawerLayoutAndroid

and this is my code root.js :

<DrawerLayoutAndroid
    drawerWidth={250}
    drawerPosition={DrawerLayoutAndroid.positions.Left}
    renderNavigationView={() => navigationView}
    ref={'DRAWER'}>
      <Navigator
        renderScene={this.renderScene}
        initialRoute={{component: Home}}
        ref={(nav) => { this.appNav = nav; }}  />
  </DrawerLayoutAndroid>

and this is my code in Home.js :

handleMenuPress() {
this.refs['DRAWER'].openDrawer();

}

<Header searchBar rounded>
     <Item>
         <Icon name="menu" onPress={this.handleMenuPress}/>
         <Input placeholder="Cari Rumah Sakit" />
         <Icon active name="search" />
      </Item>
      <Button transparent>
          <Text>Search</Text>
       </Button>
 </Header>

Answer 1

Probably this is not in scope of handleMenuPress. Try changing handleMenuPress to an arrow function.

handleMenuPress = () => {
  this.refs['DRAWER'].openDrawer();
}

Answer 2

You should bind the method inside the constructor (it is the best way).

constructor(props){
    super(props)
    this.handleMenuPress = this.handleMenuPress.bind(this)
}