← ClaudeAtlas

truesheet-usagelisted

Consumer-side guide for integrating @lodev09/react-native-true-sheet into a React Native app. Use this skill whenever the user wants to add, configure, control, or debug a bottom sheet using TrueSheet — including ref-based sheets, named global sheets, web support with TrueSheetProvider/useTrueSheet, React Navigation or Expo Router sheet flows, Reanimated-driven animations, scrolling content, stacking, headers/footers, detents, side sheets, keyboard handling, dimming, liquid glass, and Jest testing. Also use when the user is migrating from v2 to v3, troubleshooting layout or gesture issues, or asking about any TrueSheet prop, event, or method — even if they don't mention "TrueSheet" by name but describe a bottom sheet in a React Native context.
ltatarev/skills · ★ 0 · Web & Frontend · score 65
Install: claude install-skill ltatarev/skills
# TrueSheet Consumer Guide Use this skill to produce correct, idiomatic code for apps that consume `@lodev09/react-native-true-sheet`. It covers choosing the right integration pattern, applying the public API correctly, and avoiding platform-specific pitfalls. ## Quick Start The simplest sheet: a ref, a button, and some content. ```tsx 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> ) } ``` ## Choose the Right Control Pattern Pick one based on where the trigger lives relative to the sheet and which platforms you target. | Pattern | When to use | Platform | |---------|------------|----------| | **Ref** | Trigger and sheet in the same component | All | | **Named + global methods** | Trigger is far from the sheet (different screen, deep in tree) | Native only | | **`TrueSheetProvider` + `useTrueSheet()`** | Web support needed, or you want hook-based control | All (required on web) | | **`createTrueSheetNavigator()`** | Sheets are part of a naviga