Snap Sheet

A bottom sheet with snap points. Drag the handle: release picks the nearest stop, a flick carries it to the next, and pulling past the lowest stop dismisses it. The sheet draws inside its parent, so it works in a screen, a tab or a Modal. The handle is also an adjustable control for screen readers. 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 snap-sheet

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/snap-sheet.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 { SnapSheet } from "@/components/ui/snap-sheet";

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

  return (
    <View style={{ flex: 1 }}>
      <Button title="Details" onPress={() => setOpen(true)} />
      <SnapSheet open={open} onClose={() => setOpen(false)} title="Delivery details">
        <Text>Arrives Thursday</Text>
      </SnapSheet>
    </View>
  );
}

The parent must fill the area the sheet should cover, because the sheet and its backdrop are sized to it.

Props