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

Question

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

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>

score 1 · Answer 1 · answered Mar 21 '17 at 08:41

1

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

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

answered Mar 21 '17 at 08:41

Hariks

1,852
1
19
34

can you console 'this.refs' in handleMenuPress, see if it has drawer in it – Hariks Mar 21 '17 at 08:59
error 'cannot read property 'openDrawer' of undefined , how to fix this sir ? – Zakky Muhammad Fajar Mar 21 '17 at 09:09
Please check whether you gave ref properly to DrawerLayoutAndroid. You can try this syntax ref={(drawer) => { this.drawer = drawer; }} And instead of this.refs['DRAWER'].openDrawer(); use this.drawer.openDrawer(); – Hariks Mar 21 '17 at 09:15

score 0 · Answer 2 · answered Mar 21 '17 at 10:37

0

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

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

answered Mar 21 '17 at 10:37

Ayberk Anıl Atsız

743
6
7

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

2 Answers2