Core
Tamagui
Extras
Guides
Community
A bottom sheet that slides up.
Lightweight implementation with dragging support.
Multiple snap point points and a handle.
Automatically adjusts to screen size.
Accepts animations, themes, size props and more.
import { Sheet } from '@tamagui/sheet' // or from 'tamagui'export default () => (<Sheet><Sheet.Overlay /><Sheet.Frame><Sheet.Handle />{/* ...inner contents */}</Sheet.Frame></Sheet>)
Contains every component for the sheet.
boolean
Set to use as controlled component.
boolean
Uncontrolled open state on mount.
(open: boolean) => void
Called on change open, controlled or uncontrolled.
number
Controlled position, set to an index of snapPoints.
number
Uncontrolled default position on mount.
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.
(position: number) => void
Called on change position, controlled or uncontrolled.
boolean
Default:
true
Controls tapping on the overlay to close, defaults to true.
Animated.SpringAnimationConfig
Default:
true
Customize the spring used, passed to react-native Animated.spring().
boolean
Disables all touch events to drag the sheet.
boolean
Renders sheet into the root of your app instead of inline.
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).
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 overriden with onPress
.
Extends XStack.