A guide for adding, configuring, controlling and debugging native bottom sheets in React Native apps with the TrueSheet library. Useful for developers building mobile UI with Claude Code.
Claude Code
$ npx -y skills add lodev09/react-native-true-sheet --agent claude-code
Codex
$ npx skills add lodev09/react-native-true-sheet -a codex
Cursor
$ npx skills add lodev09/react-native-true-sheet -a cursor
Gemini CLI
$ npx skills add lodev09/react-native-true-sheet -a gemini-cli
GitHub Copilot
$ npx skills add lodev09/react-native-true-sheet -a github-copilot
OpenCode
$ npx skills add lodev09/react-native-true-sheet -a opencode
Windsurf
$ npx skills add lodev09/react-native-true-sheet -a windsurf
The true native bottom sheet experience for your React Native Apps. 💩
TrueSheetOverlaySheet layoutTip v4 rewrites the layout engine — the sheet now lays out synchronously per detent and tracks its visible height in realtime while dragging. Read the announcement and see the Migration Guide to upgrade.
| TrueSheet | React Native | Expo SDK |
|---|---|---|
| 4.0+ | 0.82+ | 55+ |
| 3.7 - 3.11 | 0.81-0.86 | 54-57 |
| 3.6 | 0.80 | 52-53 |
npx expo install @lodev09/react-native-true-sheet
yarn add @lodev09/react-native-true-sheet
cd ios && pod install
import { TrueSheet } from "@lodev09/react-native-true-sheet"
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]}
>
<Button onPress={dismiss} title="Dismiss" />
</TrueSheet>
</View>
)
}
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.
Yes it is! Checkout @lugg/maps, a universal maps library for React Native that I'm developing at Lugg.
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with ❤️ by @lodev09
Stars on GitHub
See 12 react-native-true-sheet alternatives
Skills for contributors and app developers in the Expo monorepo: write TSDoc for Expo SDK APIs, run Expo's AI code reviewer on changes or pull requests, add Apple App Intents and Siri Shortcuts to Expo apps, and test Expo Router on Android emulators.
@expoA Claude Code skill that decompiles Android APK/XAPK/JAR/AAR files and extracts the HTTP APIs used by the app, Retrofit endpoints, OkHttp calls, hardcoded URLs, authentication patterns, so you can document and reproduce them without the original source code.
@simoneavogadroA vision bridge that lets text-only coding models such as DeepSeek and GLM read images. When an image path or URL appears in the conversation, it returns structured JSON with OCR text, layout, and semantic content.
@liustackSkills for building native-feeling mobile app screens in Expo and React Native, based on patterns from real app screens and flows. Includes a skill for researching those screens through the Appllama MCP before building.
@appllamaInstall it with the command on its page. It includes truesheet-usage. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it