Hide drawer in custom drawer component in React Native

Question

SideMenu is my custom drawer component and it has X button in it.

When I press the X button, I want the drawer to be closed.

How can I do this?

Answer 1

You can use this.props.navigation.closeDrawer() or this.props.navigation.toggleDrawer() for this.

<Button onPress={()=>this.props.navigation.closeDrawer()} />

or

<Button onPress={()=>this.props.navigation.toggleDrawer()} />

Read this doc

Answer 2

You want to use toggleDrawer(). Very basic example:

render() {
  const { navigator } = this.props

  return (
    <Button
      onPress={() => navigator.toggleDrawer({ side: 'right', animated: true })} />
  )
}