React Native - Cannot read property '_root' of undefined when using NativeBase Drawer

Question

I'm trying to use NativeBase Drawer component but getting this error:

Cannot read property '_root' of undefined

I followed the instructions from their documentation and my App component is wrapped under NativeBase Root component.

App.js:

import React, { Component } from "react";
import { Root } from "native-base";
import { createStackNavigator } from "react-navigation";
import HomeScreen from "./screens/HomeScreen/HomeScreen";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Root>
        <AppStackNavigator />
      </Root>
    );
  }
}

const AppStackNavigator = createStackNavigator({
  Home: HomeScreen
});

HomeScreen.js:

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Drawer } from "native-base";
import SideBar from "../../components/SideBar";

class HomeScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: "Home",
      headerLeft: (
        <Button onPress={navigation.getParam("openDrawer")}>
          <Icon name="menu" />
        </Button>
      )
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ openDrawer: this._openDrawer });
  }

  closeDrawer() {
    this.drawer._root.close();
  }
  _openDrawer() {
    this.drawer._root.open();
  }

  render() {
    return (
      <Container>
        <Drawer
          ref={ref => {
            this.drawer = ref;
          }}
          content={<SideBar navigator={this.navigator} />}
          onClose={() => this.closeDrawer()}
        >
          <Content>
          <Text>Home</Text>
          </Content>
        </Drawer>
      </Container>
    );
  }

}

export default HomeScreen;

Answer 1

You should change your _openDrawer to (cause your function doesn't know about context this)

_openDrawer = () => {
   this.drawer._root.open();
}

Answer 2

Try this:

In componentDidMount add these lines:

this.closeDrawer = this.closeDrawer.bind(this);
this._openDrawer = this._openDrawer.bind(this);