Version: Unreleased

Types

`SheetDetent`

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

Value	Description	🍎	🤖	🌐
`"auto"`	Auto resize based on content height.	*16+*	✅	✅
`"peek"`	Collapsed height based on the combined `header` and absolute `footer` heights, plus the content up to the bottom of a `TrueSheetPeek` component rendered within it. Falls back to a fixed height of `150` when none is provided.	*16+*	✅	✅
`number`	Fractional height (0-1) representing percentage of screen height.	✅	✅	✅

info

The "auto" detent derives the sheet height from the content's natural height. With scrolling content, it sizes to the scroll view's content height and resizes as content grows or shrinks. See Scrolling Content.

`BackgroundBlur`

Blur style that is mapped into native values in iOS.

<TrueSheet backgroundBlur="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 backgroundBlur is set.

<TrueSheet
  backgroundBlur="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`

`ScrollableOptions`

Options for customizing scrollable behavior. Applies to the scrollable provided via scrollableRef.

<TrueSheet
  scrollableRef={scrollableRef}
  scrollableOptions={{
    scrollingExpandsSheet: false,
  }}
>
  <ScrollView ref={scrollableRef}>
    <View />
  </ScrollView>
</TrueSheet>

Property	Type	Description	Default
`contentInsetAdjustmentBehavior`	`boolean`	Applies the bottom safe-area inset to the scroll content automatically while the content can scroll. On iOS, sets the scroll view's native `contentInsetAdjustmentBehavior` to `automatic`; on Android and Web, the sheet applies the inset itself — parity React Native's iOS-only prop can't provide. Only applies while the sheet's `insetAdjustment` is `'automatic'`; a relative footer absorbs the inset instead.	`true`
`scrollingExpandsSheet`	`boolean`	When `false`, scrolling the content does not expand the sheet to the next detent. Only dragging the grabber or sheet background expands it. Useful for YouTube-style comments sheets.	`true`
`keyboardScrollOffset`	`number`	Additional offset when scrolling to a focused input above the keyboard.	`0`
`keyboardOffset`	`number`	Adjusts the bottom inset applied to the scrollable when the keyboard is shown. Negative values reduce it — pass `-insets.bottom` to cancel out safe-area padding already included in the content's `paddingBottom`.	`0`
`topScrollEdgeEffect`	`ScrollEdgeEffect`	The scroll edge effect applied to the top edge of the scroll view and header. iOS 26+ only.	`'hidden'`
`bottomScrollEdgeEffect`	`ScrollEdgeEffect`	The scroll edge effect applied to the bottom edge of the scroll view and footer. iOS 26+ only.	`'hidden'`

`HeaderOptions`

Options for customizing header behavior.

<TrueSheet
  header={<Header />}
  headerOptions={{
    position: 'absolute',
  }}
>
  {/* ... */}
</TrueSheet>

Property	Type	Description	Default
`position`	`'relative' \| 'absolute'`	How the header participates in the sheet layout. `'relative'` takes up space above the content and is included in the `auto` detent height. `'absolute'` floats over the content, pinned to the top edge, and is excluded from the `auto` detent height.	`'relative'`

`FooterOptions`

Options for customizing footer behavior.

<TrueSheet
  footer={<Footer />}
  footerOptions={{
    position: 'absolute',
    keyboardOffset: -16,
  }}
>
  {/* ... */}
</TrueSheet>

Property	Type	Description	Default
`position`	`'relative' \| 'absolute'`	How the footer participates in the sheet layout. `'relative'` takes up space below the content, pinned to the bottom edge — included in the `auto` detent height but excluded from the `peek` detent height (it's pushed off-screen at peek). `'absolute'` floats over the content, pinned to the bottom edge — excluded from the `auto` detent height but included in the `peek` detent height.	`'relative'`
`keyboardOffset`	`number`	Adjusts how far an `absolute` footer rises when the keyboard opens. Positive values raise it higher; negative values tuck the footer's own bottom padding behind the keyboard instead of leaving a gap. The built-in safe-area inset is skipped automatically while the keyboard is open. A `relative` footer stays in the layout flow behind the keyboard, so this has no effect.	`0`

`ScrollEdgeEffect`

Controls the blur/gradient edge effect on the scroll view edges and header/footer overlay views. iOS 26+ only.

Value	Description
`'automatic'`	System default edge effect style.
`'hard'`	A hard, opaque edge effect.
`'soft'`	A soft, gradient edge effect.
`'hidden'`	No edge effect. This is the default.

`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`

`AccessibilityOptions`

Options for customizing (e.g. localizing) the accessibility strings announced by screen readers.

<TrueSheet
  accessibilityOptions={{
    grabberLabel: 'Poignée de déplacement',
    expandedValue: 'Développé',
    collapsedValue: 'Réduit',
    detentValue: 'Position {index} sur {count}',
  }}
>
  <View />
</TrueSheet>

Property	Type	Description	Default
`grabberLabel`	`string`	The accessibility label of the grabber.	iOS: `'Sheet Grabber'`, Android: `'Drag handle'`
`grabberHint`	`string`	The accessibility hint of the grabber. iOS only.	`'Double-tap to expand. Swipe up or down to resize the sheet'`
`expandedValue`	`string`	The value announced when the sheet is at the last detent.	`'Expanded'`
`collapsedValue`	`string`	The value announced when the sheet is at the first detent.	`'Collapsed'`
`detentValue`	`string`	The value announced at intermediate detents. Supports `{index}` and `{count}` placeholders.	`'Detent {index} of {count}'`
`expandActionLabel`	`string`	The label of the expand accessibility action. Android only.	`'Expand'`
`collapseActionLabel`	`string`	The label of the collapse accessibility action. Android only.	`'Collapse'`
`paneTitle`	`string`	The title announced when the sheet appears. Sets the accessibility pane title on Android and the hidden dialog title on Web.	Android: `'Bottom sheet'`, Web: `'Sheet'`

info

On iOS, the grabber strings only apply when grabberOptions is provided. Without it, iOS uses the system grabber which is already localized by the system.

`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.

`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.

SheetDetent​

BackgroundBlur​

BlurOptions​

ScrollableOptions​

HeaderOptions​

FooterOptions​

ScrollEdgeEffect​

GrabberOptions​

AccessibilityOptions​

InsetAdjustment​

DetentInfoEventPayload​

PositionChangeEventPayload​