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)

Stacked Sheets

When called on a sheet that has other sheets presented on top of it, dismiss() will dismiss all sheets above it but the sheet itself will remain presented. This matches iOS's native UIViewController behavior. See Dismissing Stacked Sheets for more details.

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)