Side Drawer

A panel that slides in from the left or right edge of its parent. Drag it toward its edge to close it, tap the backdrop, or press Escape on the web. Give it onOpen and a swipe that starts at the screen edge pulls it open, following your finger, then settles open or shut by how far and how fast you went. It is drawn inside the screen it belongs to, so the parent must fill that screen. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add side-drawer

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/side-drawer.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { Button, Text, View } from "react-native";
import { SideDrawer } from "@/components/ui/side-drawer";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <Button title="Menu" onPress={() => setOpen(true)} />
      <SideDrawer open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
        <Text style={{ padding: 20 }}>Drawer content</Text>
      </SideDrawer>
    </View>
  );
}

Props