wwwwwwwwwwwwwwwwwww
Introduction
Installation
Releases

Core

Configuration
Stack + Text
styled
Variants
Props
Themes
Animations
Theme
useMedia
useTheme
FontLanguage
Extras

Compiler

About
Install
Benchmarks

Theme

Colors
Tokens

Tamagui

Stacks
Headings
Paragraph

Forms

Button
Checkbox
Form
Input & TextArea
Label
Progress
RadioGroup
Select
Slider
Switch
ToggleGroup

Panels

AlertDialog
Dialog
Popover
Sheet
Tooltip
Toast

Organize

Group
Tabs

Content

Avatar
Card
Image
ListItem

Visual

LinearGradient
Separator
Square & Circle

Etc

Anchor
HTML Elements
ScrollView
Spinner
Unspaced
VisuallyHidden

Extras

Lucide Icons

Guides

Design Systems
Developing
Next.js
Expo
Vite
create-tamagui

Community

Community
Blog
GitHub
Twitter
Discord

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' // or from '@tamagui/sheet'



export default () => (

  <Sheet>

    <Sheet.Overlay />

    <Sheet.Handle />

    <Sheet.Frame>{/* ...inner contents */}</Sheet.Frame>

  </Sheet>

)

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

<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 corresponds 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().

  • native

    boolean | "ios"[]

    (iOS only) Render to a native sheet, must install native dependency first.

  • 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).

  • forceRemoveScrollEnabled

    boolean

    Default: 

    false

    By default. Tamagui uses react-remove-scroll to prevent anything outside the sheet scrolling. This can cause some issues so you can override the behavior with this prop (either true or false).

  • portalProps

    Object

    YStack props that can be passed to the Portal that sheet uses when in modal mode.

  • moveOnKeyboardChange

    boolean

    Default: 

    false

    Native-only flag that will make the sheet move up when the mobile keyboard opens so the focused input remains visible.

    • <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 overridden with onPress.

    Extends XStack.

    <Scrollview />

    Allows scrolling within Sheet. Extends Scrollview.

    Notes

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

    Previous

    Popover

    Next

    Tooltip

    Edit this page on GitHub.