Types

SheetDetent

<TrueSheet detents={['auto', 0.8, 1]}>
  <View />
</TrueSheet>

Value	Description	🍎	🤖	🌐
"auto"	Auto resize based on content height.	16+	✅	✅
number	Fractional height (0-1) representing percentage of screen height.	✅	✅	✅

BlurTint

Blur tint that is mapped into native values in IOS.

<TrueSheet blurTint="dark">
  <View />
</TrueSheet>

Value
"light"
"dark"
"default"
"extra-light"
"regular"
"prominent"
"system-ultra-thin-material"
"system-thin-material"
"system-material"
"system-thick-material"
"system-chrome-material"
"system-ultra-thin-material-light"
"system-thin-material-light"
"system-material-light"
"system-thick-material-light"
"system-chrome-material-light"
"system-ultra-thin-material-dark"
"system-thin-material-dark"
"system-material-dark"
"system-thick-material-dark"
"system-chrome-material-dark"

BlurOptions

Options for customizing the blur effect. Only applies when blurTint is set.

<TrueSheet
  blurTint="dark"
  blurOptions={{
    intensity: 80,
    interaction: false,
  }}
>
  <View />
</TrueSheet>

Property	Type	Description	Default
intensity	number	The intensity of the blur effect (0-100).	system default
interaction	boolean	Enables or disables user interaction on the blur view. Disabling can help with visual artifacts on iOS 18+.	true

GrabberOptions

Options for customizing the grabber (drag handle) appearance.

<TrueSheet
  grabber
  grabberOptions={{
    width: 48,
    height: 6,
    topMargin: 10,
    cornerRadius: 3,
    color: '#FF0000',
    adaptive: false,
  }}
>
  <View />
</TrueSheet>

Property	Type	Description	Default
width	number	The width of the grabber pill.	iOS: 36, Android: 32
height	number	The height of the grabber pill.	iOS: 5, Android: 4
topMargin	number	The top margin from the sheet edge.	iOS: 5, Android: 16
cornerRadius	number	The corner radius of the grabber pill.	height / 2
color	ColorValue	The color of the grabber. Uses native styling when not provided.
adaptive	boolean	Whether the grabber adapts to light/dark mode. Uses vibrancy on iOS and theme-based colors on Android.	true

InsetAdjustment

Controls how the bottom safe area inset affects detent heights.

<TrueSheet insetAdjustment="never">
  <View />
</TrueSheet>

Value	Description
"automatic"	System handles insets automatically. This is the default behavior.
"never"	TrueSheet will keep the layout as-is for precise sizing.

StackBehavior

Defines the stack behavior when a modal is presented while another is visible. Web only.

<TrueSheet stackBehavior="push">
  <View />
</TrueSheet>

Value	Description
"push"	Mount the modal on top of the current one.
"switch"	Minimize the current modal then mount the new one. This is the default behavior.
"replace"	Dismiss the current modal then mount the new one.

DetentInfoEventPayload

Object that comes with most sheet events.

{
  index: 1,
  position: 123.5,
  detent: 0.5
}

Property	Type	Description
index	number	The detent index from the provided detents. See detents prop.
position	number	The Y position of the sheet relative to the screen.
detent	number	The detent value (0-1) for the current index.

PositionChangeEventPayload

Object that comes with the onPositionChange event. Extends DetentInfoEventPayload.

{
  index: 1.5,
  position: 123.5,
  detent: 0.5,
  realtime: true
}

Property	Type	Description
index	number	The interpolated detent index. Continuous value that smoothly transitions between detents (e.g., 0.5 means halfway between detent 0 and 1).
position	number	The Y position of the sheet relative to the screen.
detent	number	The detent value (0-1) for the nearest detent index.
realtime	boolean	Whether the position is a real-time value (e.g., during drag or animation tracking). When false, position should be animated in JS.