Adapter for Drawer (native-base uses react-native-drawer under the hood)

Adapter for Drawer

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Drawer } from 'native-base';
import { noop } from '../utils';

const drawerStyles = {
  drawer: {
    shadowColor: '#000000', shadowOpacity: 0.5, shadowRadius: 3, shadowOffset: { width: 1, height: 5 },
  },
  main: { paddingLeft: 3 },
};
const DRAWER_WIDTH = 304;

export default class SidebarAdapter extends Component {
  static propTypes = {
    content: PropTypes.any, // eslint-disable-line
    onOpen: PropTypes.func,
    onClose: PropTypes.func,
    isOpen: PropTypes.bool,
    type: PropTypes.string,
    tapToClose: PropTypes.bool,
    openDrawerOffset: PropTypes.func,
    closedDrawerOffset: PropTypes.number,
    panCloseMask: PropTypes.number,
    panOpenMask: PropTypes.number,
    elevation: PropTypes.number,
    styles: PropTypes.any, // eslint-disable-line
    tweenHandler: PropTypes.func,
    side: PropTypes.string,
    negotiatePan: PropTypes.bool,
    captureGestures: PropTypes.bool,
  }

  static defaultProps = {
    isOpen: false,
    type: 'overlay', // type of drawer
    tapToClose: true, // boolean Close drawer on tap
    openDrawerOffset: viewport => viewport.width - DRAWER_WIDTH,
    closedDrawerOffset: -4, // number Defines left hand margin when drawer closed
    panCloseMask: 0.2, // number Defines the screen width for the start of pan close action
    panOpenMask: 0.2, // number Defines the screen width for the start of pan open action
    content: false,
    onClose: noop,
    onOpen: noop,
    elevation: 16,
    styles: drawerStyles, // without styles drawer breaks icons on navbar
    tweenHandler: ratio => ({
      /* Takes in the pan ratio (decimal 0 to 1) that represents the tween percent.
      Returns an object of native props to be set on the constituent
       views { drawer: {/native props/}, main: {/native props/}, mainOverlay: {/native props/} } */
      main: { opacity: (2 - ratio) / 2 },
    }),
    side: 'left', // right || top || bottom
    negotiatePan: true,
    captureGestures: true,
  }

  componentWillReceiveProps(nextProps) {
    const { isOpen } = this.props;
    if (isOpen !== nextProps.isOpen) {
      this.toggleSidebar(nextProps.isOpen);
    }
  }

  toggleSidebar = (isOpen) => {
    if (this.drawer) {
      if (isOpen) {
        this.drawer._root.open();
      } else {
        this.drawer._root.close();
      }
    }
  }

  render() {
    const {
      type,
      tapToClose,
      openDrawerOffset,
      panOpenMask,
      closedDrawerOffset,
      content,
      onClose,
      onOpen,
      elevation,
      styles,
      tweenHandler,
      side,
      negotiatePan,
      children,
      captureGestures,
      windowWidth,
      drawerWidth,
    } = this.props;
    const panCloseMask = windowWidth
      ? (windowWidth - DRAWER_WIDTH) / windowWidth
      : this.props.panCloseMask;
    return (
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        type={type}
        content={content}
        tapToClose={tapToClose}
        onClose={onClose} // without that props not working
        onOpen={onOpen} // without that props not working
        elevation={elevation}
        panOpenMask={panOpenMask}
        openDrawerOffset={openDrawerOffset} // 20% gap on the right side of drawer
        panCloseMask={panCloseMask}
        closedDrawerOffset={closedDrawerOffset}
        styles={styles}
        tweenHandler={tweenHandler}
        side={side}
        negotiatePan={negotiatePan}
        captureGestures={captureGestures}
      >
        {children}
      </Drawer>
    );
  }
}
// ... usage

<SidebarAdapter
  content={menu}
  isOpen={showSidebar}
  onOpen={this.openSidebar}
  onClose={this.closeSidebar}
  windowWidth={width}
>
// inner code
</SidebarAdapter>