Lifecycle Events

Lifecycle events available for TrueSheet.

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

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

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

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

  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 realtime property indicates whether the position value is real-time (e.g., during drag or animation tracking). When realtime is false, the position should be animated in JS (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.

onWillFocus

This is called when the sheet is about to gain focus. This happens:

• When the sheet is being presented (along with onWillPresent)
• When another sheet presented on top of it begins dismissing

onDidFocus

This is called when the sheet has gained focus. This happens:

• When the sheet has been presented (along with onDidPresent)
• When another sheet presented on top of it is dismissed

Useful for refreshing data or re-enabling interactions.

onWillBlur

This is called when the sheet is about to lose focus. This happens:

• When the sheet is being dismissed (along with onWillDismiss)
• When another sheet is about to be presented on top of it

onDidBlur

This is called when the sheet has lost focus. This happens:

• When the sheet has been dismissed (along with onDidDismiss)
• When another sheet is presented on top of it

Useful for pausing updates or disabling interactions.

onBackPress

Android only

This is called when the hardware back button is pressed on Android. Use this to handle custom back press behavior, such as dismissing the sheet programmatically when dismissible is false.