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]	✅	✅

info

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

tip

It's recommended to sort detents from smallest to largest. When using auto, place it at the first index if you plan to adjust content dynamically. This ensures the sheet presents at the accurate height initially.

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

info

When not provided, iOS uses the system background color, while Android uses Material Design 3's colorSurfaceContainerLow which automatically adapts to light/dark mode.

cornerRadius

The sheet corner radius.

Type	Default	🍎	🤖
number	system default	✅	✅

info

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

maxHeight

Overrides "large" or "100%" height.

Type	Default	🍎	🤖
number		✅	✅

edgeToEdgeFullScreen

Allows the sheet to extend behind the status bar when fully expanded in edge-to-edge mode. When false (default), the sheet stops at the bottom of the status bar.

Type	Default	🍎	🤖
boolean	false		✅

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

info

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

info

This property is only used during the initial mount.

dimmedDetentIndex

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

Type	Default	🍎	🤖
number	0	✅	✅

info

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

keyboardMode

Determines how the software keyboard will impact the layout of the sheet. Set to pan if you're working with FlatList with a TextInput.

Type	Default	🍎	🤖
"resize", "pan"	"resize"		✅

grabber

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

Type	Default	🍎	🤖
boolean	true	✅	✅

info

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

header

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

footer

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

Type	Default	🍎	🤖
ComponentType<...> | ReactElement		✅	✅

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 adds additional style to the content for scrollable to work.

Type	Default	🍎	🤖
boolean	false	✅	✅

pageSizing

Controls the sheet presentation style on iPad. When enabled (true), uses a large page sheet for better readability. When disabled (false), uses a centered form sheet.

Type	Default	🍎	🤖
boolean	true	17+

blurTint

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

Type	Default	🍎	🤖
BlurTint		✅

blurIntensity

The intensity of the blur effect (0-100). Only applies when blurTint is set. Uses system default if not provided.

Type	Default	🍎	🤖
number	system default	✅

blurInteraction

Enables or disables user interaction on the blur view. Disabling this can help with visual artifacts (flash) on iOS 18+ when touching the sheet content with blur enabled.

Type	Default	🍎	🤖
boolean	true	✅

style

The sheet's container style override.

Type	Default	🍎	🤖
StyleProp<ViewStyle>		✅	✅