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 and all sheets presented on top of it in a single animation. Optionally accepts an animated flag.

Parameters	Required	Default
animated: boolean	No	true

await sheet.current?.dismiss()

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

dismissStack

Dismisses only the sheets presented on top of this sheet, keeping this sheet presented. If no sheets are presented on top, this method does nothing.

Parameters	Required	Default
animated: boolean	No	true

await sheet.current?.dismissStack()

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

This is useful when you want to close child sheets while keeping the current sheet open.

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)

await TrueSheet.dismissStack('my-sheet')

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

note

If no sheets are presented on top, dismissStack() does nothing.

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

dismissAll

Dismisses all presented sheets in the current stack. This is useful when you need to close all sheets at once, for example when navigating away or resetting the UI state.

Parameters	Required	Default
animated: boolean	No	true

await TrueSheet.dismissAll()

// Dismiss all without animation
await TrueSheet.dismissAll(false)

note

This only dismisses sheets in the current presentation context. Sheets presented behind a modal (e.g., React Navigation modal or React Native Modal) will not be affected.

Web

Static methods are not supported on web. Use the useTrueSheet() hook instead.

import { useTrueSheet } from '@lodev09/react-native-true-sheet'

const { present, dismiss, dismissStack, resize, dismissAll } = useTrueSheet()

await present('my-sheet')
await dismiss('my-sheet')
await dismissAll()