Brownified.jsx

class LoggedInWrap extends Component {
  state = {
    route: {
      routeName: "Home",
    },
  };
  openDrawer = () => {
    this.drawer.openDrawer();
  };

  closeDrawer = () => {
    this.drawer.closeDrawer();
  };

  handleNavigate = (location, params) => {
    const navigateAction = NavigationActions.navigate({
      routeName: location,
      params,
    });
    this.closeDrawer();
    this.nav.dispatch(navigateAction);
  };
  onNavigationStateChange = (prevState, newState, action) => {
    this.setState({
      route: newState.routes[newState.index],
    });
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Drawer
          ref={drawer => (this.drawer = drawer)}
          drawerWidth={width - 50}
          renderNavigationView={() =>
            <DrawerComponent activeItem={this.state.route} navigate={this.handleNavigate} />}
          hitSlop={{ top: 0, bottom: 0, left: 0, right: 20 }}
        >
          <LoggedInNav
            ref={nav => (this.nav = nav)}
            screenProps={{ openDrawer: this.openDrawer }}
            onNavigationStateChange={this.onNavigationStateChange}
          />
        </Drawer>
      </View>
    );
  }
}