undefined is not an object (evaluating _this2_.drawer.open) when using ref prop

Question

I have been trying to get react-native-drawer working by using the ref prop as suggested by these docs but I am getting the following error: undefined is not an object (evaluating _this2_.drawer.open) I have combed through similar problems on stack overflow and had a hard time connecting this error text to any one problem, why is this happening?

import React, { Component } from 'react';
import Drawer from 'react-native-drawer'
import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   Button
 } from 'react-native';


 class Project extends Component {
   closeDrawer = () => {
     this._drawer.close()
   };
   openDrawer = () => {
    this._drawer.open()
   };
   render () {
      return (
       <Drawer
         ref={(ref) => this._drawer = ref}
         content={<Menu
                    close={this.closeDrawer()}
                    />}
          >
        <Main
          open={() => {this.openDrawer()}}
          />
        </Drawer>
      )
    }
  }

  class Menu extends Component {
    render() {
      return (
        null
      );
    }
  }

  class Main extends Component {
    render() {
      return (
      <View>
         <Button
           title='Open'
           onPress={this.props.open}
           />
       </View>
     )
   }
 }
 AppRegistry.registerComponent('Project', () => Project);

Irfan Ayaz · Answer 1 · 2017-06-19T04:39:44.203

0

You cannot use 'this' inside callbacks. You should define the methods in your class and then call them.

  closeControlPanel = () => {
    this._drawer.close()
  };
  openControlPanel = () => {
    this._drawer.open()
  };

and then something like

<Drawer
     ref={(ref) => this._drawer = ref}
     content={<Menu
                close={this.closeControlPanel()}
                />}
      >
    <Main
      open={() => {this.openControlPanel()}
      />
    </Drawer>

Also,

class Main extends Component {
    render() {
      return (
      <View>
         <Button
           title='Open'
           onPress={this.props.open}
           />
       </View>
     )
   }
 }

edited Jun 19 '17 at 04:39

answered Jun 19 '17 at 00:29

Irfan Ayaz

797
8
16

I still get an error, it reads: `undefined is not an object (evaluating _this_.drawer.open)` instead of `_this2_`, it now says `_this_` which honestly makes sense to me, since I don't understand where the _drawer is being declared. – Sean Clancy Jun 19 '17 at 00:53
I still have the same problem, I updated the question to reflect the current code, the changes made to that code are based on your recommendations. – Sean Clancy Jun 19 '17 at 04:55

undefined is not an object (evaluating _this2_.drawer.open) when using ref prop

1 Answers1