React Native

Drawer

The Drawer component renders a view that can be pulled out from the left or right edge of a scene. The Navigation Bar automatically displays a hamburger icon that toggles the drawer open and closed. In our example email application, we add a 'sent' button inside a Drawer so the user can switch from their 'inbox' to their 'sent' email.

import {Drawer} from 'navigation-react-native';

<Drawer view={<Menu />}>
  <ScrollView />
</Drawer>

const Menu = () => (
  <View>
    <Button onPress={() => setSent(true)} />
  </View>
);

By default the Drawer is uncontrolled, where only the user can open and close it (by dragging or tapping the hamburger icon). But it can also be controlled so you can programmatically open and close it. In our email example, when the user presses the 'sent' button we close the Drawer so they can select an email to read.

const [open, setOpen] = useState(false);

<Drawer open={open} onChangeOpen={setOpen} view={<Menu setOpen={setOpen} />}>
  <ScrollView />
</Drawer>

const Menu = ({setOpen}) => (
  <View>
    <Button onPress={() => {
      setSent(true);
      setOpen(false);
    }} />
  </View>
);