Sheet

A bottom sheet that slides up.

Features

  • Lightweight implementation with dragging support.

  • Multiple snap point points and a handle.

  • Automatically adjusts to screen size.

  • Accepts animations, themes, size props and more.

Anatomy

import { Sheet } from '@tamagui/sheet' // or from 'tamagui'
export default () => (
<Sheet>
<Sheet.Overlay />
<Sheet.Frame>
<Sheet.Handle />
{/* ...inner contents */}
</Sheet.Frame>
</Sheet>
)

API

<Sheet />

Contains every component for the sheet.

Props

  • open

    boolean

    Set to use as controlled component.

  • defaultOpen

    boolean

    Uncontrolled open state on mount.

  • onOpenChange

    (open: boolean) => void

    Called on change open, controlled or uncontrolled.

  • position

    number

    Controlled position, set to an index of snapPoints.

  • defaultPosition

    number

    Uncontrolled default position on mount.

  • snapPoints

    number[]

    Default: 

    [80, 10]

    Array of numbers, 0-100 that correspont to % of the screen it should take up. Should go from most visible to least visible in order. Use "open" prop for fully closed.

  • onPositionChange

    (position: number) => void

    Called on change position, controlled or uncontrolled.

  • dismissOnOverlayPress

    boolean

    Default: 

    true

    Controls tapping on the overlay to close, defaults to true.

  • animationConfig

    Animated.SpringAnimationConfig

    Default: 

    true

    Customize the spring used, passed to react-native Animated.spring().

  • disableDrag

    boolean

    Disables all touch events to drag the sheet.

  • modal

    boolean

    Renders sheet into the root of your app instead of inline.

  • dismissOnSnapToBottom

    boolean

    Adds a snap point to the end of your snap points set to "0", that when snapped to will set open to false (uncontrolled) and call onOpenChange with false (controlled).

  • <Overlay />

    Displays behind Frame. Extends YStack.

    <Frame />

    Contains the content. Extends YStack.

    <Handle />

    Shows a handle above the frame by default, on tap it will cycle between snapPoints but this can be overriden with onPress.

    Extends XStack.