Sheet

A bottom sheet that slides up.

Installation

Sheet is already installed in tamagui, or you can install it independently:

npm install @tamagui/sheet

Anatomy

import { Sheet } from 'tamagui' // or '@tamagui/sheet'

export default () => (
  <Sheet>
    <Sheet.Overlay />
    <Sheet.Handle />
    <Sheet.Frame>{/* ...inner contents */}</Sheet.Frame>
  </Sheet>
)

Snap points

By default, snap points are treated as percentages.

<Sheet snapPoints={[85, 50]}> // 85% and 50%

The behavior of snap points can be changed by setting the snapPointsMode prop to any of these values:

• percent (default) - Snap points are percentages of the parent container or screen as numbers
• constant - Snap points are raw pixel values as numbers
• fit - The sheet is constrained to the content's natural height without the snapPoints prop
• mixed - Snap points can be either numbers (pixels), percentages as strings (ex: "50%"), or "fit" for fit behavior

Snap points should be ordered from largest to smallest (most visible to least visible). When using mixed mode with the "fit" as a snap point, it must be the first and largest snap point.

Unstyled

Adding the unstyled prop to your Handle, Overlay or Frame will turn off the default styles allowing you to customize without having to override any of the built-in styling.

Headless with createSheet

Using the createSheet export, you can create a fully custom sheet without using any of the default styles. This is similar to unstyled, but it lets you also control the open variant.

Here's an example:

import { Stack, styled } from '@tamagui/core'
import { createSheet } from '@tamagui/sheet'

const Handle = styled(Stack, {
  variants: {
    open: {
      true: {
        opacity: 0.35,
      },
      false: {
        opacity: 0.5,
      },
    },
  } as const,
})

const Overlay = styled(Stack, {
  variants: {
    open: {
      true: {
        opacity: 1,
        pointerEvents: 'auto',
      },
      false: {
        opacity: 0,
        pointerEvents: 'none',
      },
    },
  } as const,
})

const Frame = styled(Stack, {
  backgroundColor: '$background',
  // can add open variant as well
})

export const Sheet = createSheet({
  Frame,
  Handle,
  Overlay,
})

Native support

Sheets now support rendering to a native iOS sheet, while still rendering any of your React Native content inside of them.

Because Metro doesn't support conditional imports and we don't want to make tamagui enforce installing native dependencies in order to get started, there's an install step:

yarn add react-native-ios-modal
pod install
# rebuild your app (expo ios, or use react-native cli)

And set it up as follows:

import { Sheet, setupNativeSheet } from '@tamagui/sheet'
import { ModalView } from 'react-native-ios-modal'

setupNativeSheet('ios', ModalView)

export default (
  <Sheet native>
    {/* The rest of your sheet views, see Anatomy, example and props API */}
  </Sheet>
)

API Reference

Contains every component for the sheet.

Displays behind Frame. Extends YStack.

Contains the content. Extends YStack.

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

Extends XStack.

Allows scrolling within Sheet. Extends Scrollview.

useSheet

Use this to control the sheet programatically.

Notes

For Android you need to manually re-propagate any context when using modal. This is because React Native doesn't support portals yet.