Sheet

WEB APPROXIMATION — Sheet wraps @gorhom/bottom-sheet, whose pan gestures and spring physics are built for native.

It presents here (the provider is wired in .storybook/preview.tsx) but the drag behaviour, backdrop timing and keyboard avoidance are not representative. Verify on a simulator.

It is imperative: nothing shows until present() is called on the ref that useSheetRef() hands back.

Open interactive workbenchWorkbench ↗

{
  function Demo() {
    const ref = useSheetRef();

    return (
      <View className="items-start gap-4">
        <Button onPress={() => ref.current?.present()}>
          <Text>Open sheet</Text>
        </Button>
        <Sheet ref={ref} snapPoints={[300]}>
          <View className="gap-2 p-6">
            <Text variant="title3">Filter items</Text>
            <Text color="tertiary">
              Narrow the list by group, type or status.
            </Text>
            <Button className="mt-4" onPress={() => ref.current?.dismiss()}>
              <Text>Done</Text>
            </Button>
          </View>
        </Sheet>
      </View>
    );
  }

  return <Demo />;
}

Import

import { Sheet } from '@simal/ui/nativewindui';

Props

Prop	Values	Default	Description
`children`	—	—	Sheet contents. Rendered eagerly, so anything expensive should be gated on the sheet being open.
`snapPoints`	—	—	Rest positions, as percentages or pixels. Defaults to one full-height stop.
`ref`	—	—	The only way to open it: call `present()` on the ref. There is no `visible` prop.

Import

Props

On this page