Imperative Methods

Component Methods

TrueSheet has a couple of core methods that you'll be using most of the time. These methods are asynchronous so you can use async and await on them.

Define the sheet and provide a ref. We will be using the sheet to access these methods.

const sheet = useRef<TrueSheet>(null)

return (
  <TrueSheet ref={sheet} detents={['auto', 0.8]}>
    <View />
  </TrueSheet>
)

present

Present the sheet. Optionally accepts a detent index and animated flag. See detents prop.

Parameters	Required	Default
index: number	No	0
animated: boolean	No	true

await sheet.current?.present()

// Present without animation
await sheet.current?.present(0, false)

dismiss

Dismisses the sheet. Optionally accepts an animated flag.

Parameters	Required	Default
animated: boolean	No	true

await sheet.current?.dismiss()

// Dismiss without animation
await sheet.current?.dismiss(false)

resize

Resizes the sheet programmatically by index. The sheet must be presented before calling this method.

Parameters	Required
index: number	Yes

// Resize to 80%
await sheet.current?.resize(1)

Global Methods

You can also call the above methods statically without having access to a sheet's ref. This is particularly useful when you want to present a sheet from anywhere.

The API is similar to the component methods except for the required name prop. See this guide for example.

In the example below, we provide "my-sheet" as the name of our sheet.

const sheet = useRef<TrueSheet>(null)

return (
  <TrueSheet name="my-sheet" detents={['auto', 0.8]}>
    <View />
  </TrueSheet>
)

You can then use these methods globally.

await TrueSheet.present('my-sheet')

// Present without animation
await TrueSheet.present('my-sheet', 0, false)

await TrueSheet.dismiss('my-sheet')

// Dismiss without animation
await TrueSheet.dismiss('my-sheet', false)

// Resize to 80%
await TrueSheet.resize('my-sheet', 0.8)