Skip to main content

Props

Props available for TrueSheet. Extends ViewProps.

Configuration​

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

ref​

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

detents​

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

TypeDefault🍎🤖
SheetDetent[][0.5, 1]✅✅
info

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

tip

When using auto, it's recommended to put it at the first index to present the accurate height.

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.

TypeDefault🍎🤖
string✅✅

backgroundColor​

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

TypeDefault🍎🤖
ColorValuesystem 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.

TypeDefault🍎🤖
numbersystem 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.

TypeDefault🍎🤖
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.

TypeDefault🍎🤖
booleanfalse✅

dismissible​

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

TypeDefault🍎🤖
booleantrue✅✅

dimmed​

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

TypeDefault🍎🤖
booleantrue✅✅
info

This property is only used during the initial mount.

dimmedDetentIndex​

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

TypeDefault🍎🤖
number0✅✅
info

This is ignored if dimmed is set to false.

initialDetentIndex​

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

TypeDefault🍎🤖
number-1✅✅

initialDetentAnimated​

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

TypeDefault🍎🤖
booleantrue✅✅

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.

TypeDefault🍎🤖
"resize", "pan""resize"✅

grabber​

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

TypeDefault🍎🤖
booleantrue✅✅
info

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

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.

TypeDefault🍎🤖
ComponentType<...> | ReactElement✅✅

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

TypeDefault🍎🤖
ComponentType<...> | ReactElement✅✅

fitScrollView​

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.

TypeDefault🍎🤖
booleanfalse✅

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.

TypeDefault🍎🤖
booleantrue17+

blurTint​

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

TypeDefault🍎🤖
BlurTint✅

style​

The sheet's container style override.

TypeDefault🍎🤖
StyleProp<ViewStyle>✅✅

contentContainerStyle​

The sheet's content container style.

TypeDefault🍎🤖
StyleProp<ViewStyle>✅✅

Events​

const App = () => {
  const handleDismiss = () => {
    console.log('Bye bye 👋')
  }

  const handleOnWillPresent = (e: WillPresentEvent) => {
    console.log(e.nativeEvent) // { index: 0, position: 123.5 }
    console.log('Sheet is about to be presented')
  }

  const handleOnDidPresent = (e: DidPresentEvent) => {
    console.log(e.nativeEvent) // { index: 0, position: 123.5 }
  }

  const handleDetentChange = (e: DetentChangeEvent) => {
    console.log(e.nativeEvent) // { index: 1, position: 234.5 }
  }

  return (
    <View>
      <Button title="Present" onPress={() => sheet.current?.present()} />
      <TrueSheet
        ref={sheet}
        detents={[0.5, 0.8]}
        onWillPresent={handleOnWillPresent}
        onDidPresent={handleOnDidPresent}
        onDetentChange={handleDetentChange}
        onWillDismiss={handleOnWillDismiss}
        onDidDismiss={handleOnDidDismiss}
      >
        <Button title="Resize" onPress={() => sheet.current?.resize(1)} />
        <Button title="Dismiss" onPress={() => sheet.current?.dismiss(1)} />
      </TrueSheet>
    </View>
  )
}

onMount​

Called when the sheet's content is mounted and ready. The sheet automatically waits for this event before presenting.

onWillPresent​

Comes with DetentInfoEventPayload.

This is called when the sheet is about to be presented.

onDidPresent​

Comes with DetentInfoEventPayload.

This is called when the sheet has been presented, providing the detent index and position.

onWillDismiss​

This is called when the sheet is about to be dismissed.

onDidDismiss​

This is called when the sheet has been dismissed.

onDetentChange​

Comes with DetentInfoEventPayload.

This is called when the detent of the sheet has changed, either by dragging or by programmatically resizing it.

onDragBegin​

Comes with DetentInfoEventPayload.

This is called when the sheet has began dragging.

onDragChange​

Comes with DetentInfoEventPayload.

This is called when the sheet is being dragged.

onDragEnd​

Comes with DetentInfoEventPayload.

This is called when the sheet dragging has ended.

onPositionChange​

Comes with PositionChangeEventPayload.

This is called continuously when the sheet's position changes during drag operations or transitions. This event fires more frequently than onDragChange and provides real-time position updates.

The transitioning property indicates whether the sheet is currently presenting or dismissing. On iOS, when transitioning is true, the position should be animated (ReanimatedTrueSheet handles this automatically).

tip

Use this event when you need smooth, continuous position tracking for animations or visual feedback. For less frequent updates during dragging, use onDragChange instead.