Configuration

Configuration props available for TrueSheet. Extends ViewProps.

<TrueSheet
  ref={sheet}
  detents={['auto', 0.8, 1]}
  backgroundColor="#696969"
  // ...
>
  <View />
</TrueSheet>

`ref`

We use ref to reference our sheet and call the imperative methods. Learn more about refs here.

`detents`

Array of detents you want the sheet to support. See this guide for example.

Type	Default	🍎	🤖	🌐
`SheetDetent[]`	`[0.5, 1]`	✅	✅	✅

A sheet can only support up to 3 detents only! AKA collapsed, half-expanded, and expanded.

It's recommended to sort detents from smallest to largest.

`name`

The name to reference this sheet. It has to be unique. You can then present this sheet globally using its name. See this guide for example.

Type	Default	🍎	🤖	🌐
`string`		✅	✅	✅

`backgroundColor`

The sheet's background color. Uses the system default when not provided.

Type	Default	🍎	🤖	🌐
`ColorValue`	system default	✅	✅	✅

When not provided, iOS 26+ uses the default Liquid Glass effect, while iOS 18 and below uses the system background color. Android uses Material Design 3's colorSurfaceContainerLow which automatically adapts to light/dark mode.

On iOS 26.1+, setting this prop will override the default Liquid Glass effect.

`backgroundBlur`

The blur effect style on iOS. When set, applies a blur effect over the backgroundColor. Example: "light", "dark", etc.

Type	Default	🍎	🤖	🌐
`BackgroundBlur`		✅

On iOS 26.1+, setting this prop will override the default Liquid Glass effect.

`blurOptions`

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

Type	Default	🍎	🤖	🌐
`BlurOptions`		✅

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

`cornerRadius`

The sheet corner radius.

Type	Default	🍎	🤖	🌐
`number`	system default	✅	✅	✅

When not provided, iOS uses the device's native corner radius automatically, while Android defaults to 16 (following Material Design 3 guidelines).

`elevation`

The elevation (shadow depth) of the sheet.

Type	Default	🍎	🤖	🌐
`number`	`4`		✅	✅

`maxContentHeight`

The absolute maximum height of the sheet content, regardless of detents.

Type	Default	🍎	🤖	🌐
`number`		✅	✅	✅

`maxContentWidth`

The maximum width of the sheet content.

Type	Default	🍎	🤖	🌐
`number`		✅	✅	✅

On Android and Web, the sheet defaults to a maximum width of 640dp. Setting this prop overrides that default. On iOS, the sheet uses the system default width.

This prop is ignored on phones in portrait orientation — the sheet always spans the full width.

`anchor`

Anchors the sheet to the specified horizontal edge.

Type	Default	🍎	🤖	🌐
`'left' \| 'center' \| 'right'`	`'center'`	✅	✅	✅

On iOS, the sheet uses sourceView to control horizontal positioning. System-defined margins prevent fully flush edge attachment.

This prop is ignored on phones in portrait orientation.

`anchorOffset`

The offset from the screen edge. Only applies when anchor is 'left' or 'right'.

Type	Default	🍎	🤖	🌐
`number`	`16`		✅	✅

`dismissible`

If set to false, the sheet will prevent interactive dismissal via dragging or clicking outside of it.

Type	Default	🍎	🤖	🌐
`boolean`	`true`	✅	✅	✅

`draggable`

If set to false, the sheet will disable dragging to resize. The sheet can only be resized programmatically using the resize method.

Type	Default	🍎	🤖	🌐
`boolean`	`true`	✅	✅	✅

When draggable is false, the grabber is automatically hidden.

`dimmed`

Specify whether the sheet background is dimmed. Set to false to allow interaction with the background components.

Type	Default	🍎	🤖	🌐
`boolean`	`true`	✅	✅	✅

`dimmedDetentIndex`

The detent index that the sheet should start to dim the background.

Type	Default	🍎	🤖	🌐
`number`	`0`	✅	✅	✅

This is ignored if dimmed is set to false.

`initialDetentIndex`

Initially present the sheet, after mounting, at a given detent index.

Type	Default	🍎	🤖	🌐
`number`	`-1`	✅	✅	✅

`initialDetentAnimated`

Specify whether the sheet should animate after mounting. Used with initialDetentIndex.

Type	Default	🍎	🤖	🌐
`boolean`	`true`	✅	✅	✅

`grabber`

Shows a native grabber (or drag handle) on the sheet.

Type	Default	🍎	🤖	🌐
`boolean`	`true`	✅	✅	✅

iOS uses the native UISheetPresentationController grabber by default, while Android renders a native view following Material Design 3 specifications (32x4dp, centered, with the standard drag handle color).

When grabberOptions is provided, iOS uses a custom grabber view instead of the system default.

`grabberOptions`

Options for customizing the grabber appearance. Only applies when grabber is true.

Type	Default	🍎	🤖	🌐
`GrabberOptions`		✅	✅

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

On iOS, when grabberOptions is not provided, the native system grabber is used. When any option is provided, a custom grabber view with vibrancy effect is rendered instead.

`accessibilityOptions`

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

Type	Default	🍎	🤖	🌐
`AccessibilityOptions`		✅	✅	✅

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

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.

A component that is fixed at the top of the sheet content. Useful for search bars, titles, or other header content. The header height is automatically accounted for in layout calculations. Accepts a functional Component or ReactElement. See this guide for example.

Type	Default	🍎	🤖	🌐
`ComponentType<...> \| ReactElement`		✅	✅	✅

`headerStyle`

Style for the header container.

Type	Default	🍎	🤖	🌐
`StyleProp<ViewStyle>`		✅	✅	✅

A component that floats at the bottom of the sheet. Accepts a functional Component or ReactElement.

Type	Default	🍎	🤖	🌐
`ComponentType<...> \| ReactElement`		✅	✅	✅

`footerStyle`

Style for the footer container.

Type	Default	🍎	🤖	🌐
`StyleProp<ViewStyle>`		✅	✅	✅

`footerOptions`

Options for customizing footer behavior.

Type	Default	🍎	🤖	🌐
`FooterOptions`		✅	✅

`scrollable`

On iOS, automatically pins ScrollView or FlatList to fit within the sheet's available space. When enabled, the ScrollView's top edge will be pinned below any top sibling views, and its left, right, and bottom edges will be pinned to the container. See this guide for example.

On Android, it ensures the scroll view fills the available sheet space and automatically manages nested scrolling. Any nestedScrollEnabled prop on your ScrollView or FlatList is ignored when scrollable is enabled.

Type	Default	🍎	🤖	🌐
`boolean`	`false`	✅	✅

The auto detent is not supported with scrollable. Use fixed fractional detents (e.g., 0.5, 0.8, 1) instead.

`scrollableOptions`

Options for customizing scrollable behavior. Only applies when scrollable is true.

Type	Default	🍎	🤖	🌐
`ScrollableOptions`		✅	✅

`presentation`

Controls the sheet presentation style on iPad and web (landscape/tablet).

'page': bottom-attached page sheet (full or readable width).
'form': centered floating form sheet (default form-sheet width).

'form' is absolute — maxContentWidth is ignored when set.

Type	Default	🍎	🤖	🌐
`'page' \| 'form'`	`'page'`	*17+*		✅

`insetAdjustment`

Controls how the bottom safe area inset affects detent heights.

Type	Default	🍎	🤖	🌐
`InsetAdjustment`	`"automatic"`	✅	✅

`detached`

Renders the sheet as a detached floating card, not attached to the bottom edge.

Type	Default	🍎	🤖	🌐
`boolean`	`false`			✅

`detachedOffset`

The offset from the bottom edge when detached is enabled.

Type	Default	🍎	🤖	🌐
`number`	`16`			✅

`style`

The sheet's container style override.

Type	Default	🍎	🤖	🌐
`StyleProp<ViewStyle>`		✅	✅	✅