Usage

1. Import TrueSheet.

import { TrueSheet } from "@lodev09/react-native-true-sheet"

2. Define TrueSheet inside any component and attach a ref to it.
3. Control the sheet by invoking the available ref methods.

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

  // Present the sheet ✅
  const present = async () => {
    await sheet.current?.present()
    console.log('horray! sheet has been presented 💩')
  }

  // Dismiss the sheet ✅
  const dismiss = async () => {
    await sheet.current?.dismiss()
    console.log('Bye bye 👋')
  }

  return (
    <View>
      <Button onPress={present} title="Present" />
      <TrueSheet
        ref={sheet}
        detents={['auto', 1]}
        cornerRadius={24}
      >
        <Button onPress={dismiss} title="Dismiss" />
      </TrueSheet>
    </View>
  )
}

Simple, right? Head over to Configuration to learn more about configuring your sheet.

Content Layout

Content lays out naturally — just like a regular view or a screen in React Navigation. By default, the sheet's content wraps its children's natural height. To fill the sheet's visible height (e.g. for flex: 1 children, centered content, or justifyContent layouts), pass flex: 1 via the style prop:

<TrueSheet style={{ flex: 1 }} detents={[0.5, 1]}>
  <View style={{ flex: 1 }}>{/* Fills the sheet at every detent */}</View>
</TrueSheet>

Scroll views work the same way — bound them with flex: 1 like above. They're only special-cased for keyboard handling and auto sizing, where the sheet derives its height from the scroll content. See Scrolling Content.

Skills

Skills are reusable AI capabilities that give your AI coding agent knowledge about TrueSheet. With the right skill loaded, your agent can pick the right patterns, avoid common mistakes, and generate correct code without you having to explain the library every time.

npx skills add lodev09/react-native-true-sheet

This will install the TrueSheet Usage skill into your project.