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

warning

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

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. Only applies when scrollable is true.

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

Property	Type	Description	Default
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
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'

FooterOptions

Options for customizing footer behavior.

<TrueSheet
  footer={<Footer />}
  footerOptions={{
    keyboardOffset: -insets.bottom,
  }}
>
  {/* ... */}
</TrueSheet>

Property	Type	Description	Default
keyboardOffset	number	Adjusts how far the footer rises when the keyboard opens. Positive values raise it higher; pass -insets.bottom to tuck its safe-area padding behind the keyboard instead of leaving a gap.	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.