How to Create Drawer menu without Navigation?

Question

I am looking to create a drawer, similar to a drawer navigator, but without the routes/navigation requirement.

I plan on placing some other components there that update a query. Any recommendations? Specifically the drawer would be used to display picklists, sliders, and date range components that would update the state and variables used in updating markers rendered on a map shown on the home page.

Answer 1

With Redux

You can use the contentComponent of the createDrawerNavigator to create your own custom drawer and bind it to redux-store.

By dispatching the actions with relevant queries you can update the variables as they are passed from the store to your Component.

Without Redux

You can either create a CustomDrawer component with similar animation and render it in your Component or use this react-native-drawer.

import Drawer from 'react-native-drawer'

class Application extends Component {  
  closeControlPanel = () => {
    this._drawer.close()
  };
  openControlPanel = () => {
    this._drawer.open()
  };
  render () {
    return (
      <Drawer
        ref={(ref) => this._drawer = ref}
        content={<DrawerContentComponent {...// Your Updater props}/>}
        >
        <Component />
      </Drawer>
    )
  }
})