Truesheet Usage

You're building a React Native app and need a bottom sheet that actually works across platforms. This walks you through the entire TrueSheet API: ref-based control for simple cases, named sheets with global methods when your trigger lives far from the sheet, and provider hooks for web support. It covers the detent system (up to three snap points, auto-sizing or fractional), scrollable content with headers and footers, navigation integration, Reanimated sync, and all the iOS-specific bits like blur and liquid glass. The guidance is opinionated where it matters. Never mix auto detents with scrollable content, they're fundamentally incompatible. Use resize with indices, not values. Dismiss sheets before closing modals on iOS or you'll hit a React Native blank screen bug. Solid everyday reference if you're past the hello world stage.

skills.sh installs: 863
GitHub stars: 2.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add lodev09/react-native-true-sheet --skill truesheet-usage --agent claude-code

Installs into .claude/skills of the current project.

Files

TrueSheet Consumer Guide

Use this skill to produce correct, idiomatic code for apps that consume @lodev09/react-native-true-sheet (v4). It covers choosing the right integration pattern, applying the public API correctly, and avoiding platform-specific pitfalls.

Requires React Native >= 0.82 (Expo SDK 55+) with the New Architecture.

Quick Start

The simplest sheet: a ref, a button, and some content.

import { useRef } from 'react'
import { Button, Text, View } from 'react-native'
import { TrueSheet } from '@lodev09/react-native-true-sheet'

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

  return (
    <View>
      <Button title="Open" onPress={() => sheet.current?.present()} />
      <TrueSheet ref={sheet} detents={['auto']} cornerRadius={24} grabber>
        <View style={{ padding: 16 }}>
          <Text>Hello from the sheet</Text>
          <Button title="Close" onPress={() => sheet.current?.dismiss()} />
        </View>
      </TrueSheet>
    </View>
  )
}