Resizing Programmatically

TrueSheet has a main prop called detents which allows you to define the detents that the sheet can support. This is an array of SheetDetent that supports values like "auto" or fractional numbers (0-1).

In some cases, you may want to resize the sheet programmatically for a better experience.

How?

Resize Programmatically

Define the sheet and use the resize method.

const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const resize = async () => {
    // Resize to 69%
    await sheet.current?.resize(1)
    console.log('Yay, we are now at 69% 💦')
  }

  return (
    <TrueSheet name="resizing-sheet" ref={sheet} detents={['auto', 0.69, 1]}>
      <Button onPress={resize} title="Resize" />
    </TrueSheet>
  )
}

tip

You can also do it globally using the related global method.

TrueSheet.resize('resizing-sheet', 1)

info

detents can only support up to 3 detents. collapsed, half-expanded, and expanded.

tip

If you want to disable user dragging and only allow programmatic resizing, set draggable={false}.

Listening to Detent Change

If you want to get the active detent information, you can listen to detent changes by providing the onDetentChange event.

The event comes with the DetentInfoEventPayload that provides the detent index and position (Y position on screen).

tip

Use the index to reference the detent from your detents array. For example, if detents={['auto', 0.69, 1]} and index is 1, the active detent is 0.69.

const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const resize = async () => {
    // Resize to 69%
    await sheet.current?.resize(1)
  }

  const handleDetentChange = (e: DetentChangeEvent) => {
    const { index, position } = e.nativeEvent
    console.log('Detent index:', index, 'position:', position) ✅
  }

  return (
    <TrueSheet
      ref={sheet}
      detents={['auto', 0.69, 1]}
      onDetentChange={handleDetentChange}
    >
      <Button onPress={resize} title="Resize" />
    </TrueSheet>
  )
}

info

The event will also trigger when the user drags the sheet into a detent.