title: React Native - Cannot read property '_root' of undefined when using NativeBase Drawer
body: <p>I'm trying to use <a href="https://nativebase.io/" rel="nofollow noreferrer">NativeBase</a> <a href="https://docs.nativebase.io/Components.html#Drawer" rel="nofollow noreferrer"><code>Drawer</code></a> component but getting this error:</p>
  
  <blockquote>
    <p>Cannot read property '_root' of undefined</p>
  </blockquote>
  
  <p>I followed the instructions from their <a href="https://docs.nativebase.io/Components.html#Drawer" rel="nofollow noreferrer">documentation</a> and my <code>App</code> component is wrapped under NativeBase <code>Root</code> component.</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>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&lt;Props&gt; {
    render() {
      return (
        &lt;Root&gt;
          &lt;AppStackNavigator /&gt;
        &lt;/Root&gt;
      );
    }
  }
  
  const AppStackNavigator = createStackNavigator({
    Home: HomeScreen
  });
  </code></pre>
  
  <p><strong>HomeScreen.js:</strong></p>
  
  <pre><code>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 }) =&gt; {
      return {
        title: "Home",
        headerLeft: (
          &lt;Button onPress={navigation.getParam("openDrawer")}&gt;
            &lt;Icon name="menu" /&gt;
          &lt;/Button&gt;
        )
      };
    };
  
    componentDidMount() {
      this.props.navigation.setParams({ openDrawer: this._openDrawer });
    }
  
    closeDrawer() {
      this.drawer._root.close();
    }
    _openDrawer() {
      this.drawer._root.open();
    }
  
    render() {
      return (
        &lt;Container&gt;
          &lt;Drawer
            ref={ref =&gt; {
              this.drawer = ref;
            }}
            content={&lt;SideBar navigator={this.navigator} /&gt;}
            onClose={() =&gt; this.closeDrawer()}
          &gt;
            &lt;Content&gt;
            &lt;Text&gt;Home&lt;/Text&gt;
            &lt;/Content&gt;
          &lt;/Drawer&gt;
        &lt;/Container&gt;
      );
    }
  
  }
  
  export default HomeScreen;
  </code></pre>