Drawer

<Toggle>
  {({ on, toggle }) => (
    <>
      <Button onPress={toggle} title="Open bottom drawer" />
      <Drawer space="30%" isVisible={on} onRequestClose={toggle}>
        <Box width="100%" height="100%" backgroundColor="white" />
      </Drawer>
    </>
  )}
</Toggle>
<Toggle>
  {({ on, toggle }) => (
    <>
      <Button onPress={toggle} title="Open top drawer" />
      <Drawer
        space="30%"
        position="top"
        isVisible={on}
        onRequestClose={toggle}
      >
        <Box width="100%" height="100%" backgroundColor="white" />
      </Drawer>
    </>
  )}
</Toggle>
<Toggle>
  {({ on, toggle }) => (
    <>
      <Button onPress={toggle} title="Open left drawer" />
      <Drawer
        space="30%"
        position="left"
        isVisible={on}
        onRequestClose={toggle}
      >
        <Box width="100%" height="100%" backgroundColor="white" />
      </Drawer>
    </>
  )}
</Toggle>
<Toggle>
  {({ on, toggle }) => (
    <>
      <Button onPress={toggle} title="Open right drawer" />
      <Drawer
        space="30%"
        position="right"
        isVisible={on}
        onRequestClose={toggle}
      >
        <Box width="100%" height="100%" backgroundColor="white" />
      </Drawer>
    </>
  )}
</Toggle>