Does react-native-true-sheet auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Is react-native-true-sheet free?

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Development

Plugin

react-native-true-sheet

The true native bottom sheet experience for your React Native Apps. 💩

FLOW.md

lodev09@lodev09

GitHub

Plugin Signal70/100Solid

maintained100

capable14

documented100

adopted70

Install

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

Run the curl in your terminal, the rest in Claude Code.

Stats

TypeScript JavaScript React React Native GitHub

+3 tags

Jest iOS Android

2,012

Stars

Forks

Active

Maintenance

TypeScript

Language

MIT

License

1h ago

Last commit

2y ago

Created

Repo: lodev09/react-native-true-sheet

In this plugin

1 skill

- truesheet-usage

See everything inside

What's inside

Skills

/truesheet-usageConsumer-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

Badges

README

Read on GitHub

React Native TrueSheet

The true native bottom sheet experience for your React Native Apps. 💩

Features

⚡ Powered by Fabric - Built on React Native's new architecture for maximum performance
🚀 Fully Native - Implemented in the native realm, zero JS hacks
♿ Accessible - Native accessibility and screen reader support out of the box
🔄 Flexible API - Use imperative methods or lifecycle events
⌨️ Keyboard Handling - Built-in keyboard handling with automatic adjustment
📐 Side Sheets - Native side sheet support for iPad and Android tablets
🪟 Liquid Glass - iOS 26+ Liquid Glass support out of the box, featured in Expo Blog
🐎 Reanimated - First-class support for react-native-reanimated
🧭 React Navigation - Built-in sheet navigator for seamless navigation integration
🌐 Web Support - Full web support out of the box

Installation

[!IMPORTANT] Version 3.0+ requires React Native's New Architecture (Fabric) For the old architecture, use version 2.x. See the Migration Guide for upgrading.

Prerequisites

React Native 0.81+
New Architecture enabled
Xcode 26.1+

Compatibility

TrueSheet	React Native	Expo SDK
3.7+	0.81+	54+
3.6	0.80	52-53

Expo

npx expo install @lodev09/react-native-true-sheet

Bare React Native

yarn add @lodev09/react-native-true-sheet
cd ios && pod install

Documentation

Usage

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>
  )
}

AI 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.

That map is awesome!

Yes it is! Checkout @lugg/maps, a universal maps library for React Native that I'm developing at Lugg.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with ❤️ by @lodev09

File tree

433

lodev09/react-native-true-sheetView on GitHub

.clang-format
.editorconfig
.gitattributes
.github/
  actions/
    setup/
      action.yml
  FUNDING.yml
  ISSUE_TEMPLATE/
    bug_report.yml
    config.yml
  PULL_REQUEST_TEMPLATE.md
  workflows/
    build.yml
    check-changelog.yml
    check-repro.yml
    checks.yml
    stale.yml
.gitignore
.maestro/
  child-sheets.yaml
  main-sheet.yaml
.nvmrc
.prettierignore
.watchmanconfig
.yarn/
  patches/
    react-native-npm-0.85.3.patch
    react-native-screens-npm-4.25.2.patch
  releases/
    yarn-4.11.0.cjs
.yarnrc.yml
.zed/
  settings.json
AGENTS.md
android/
  .editorconfig
  build.gradle
  gradle.properties
  src/
    main/
      AndroidManifest.xml
      AndroidManifestNew.xml
      java/
        com/
          lodev09/
            truesheet/
              core/
                RNScreensEventObserver.kt
                TrueSheetBottomSheetBehavior.kt
                TrueSheetBottomSheetView.kt
                TrueSheetCoordinatorLayout.kt
                TrueSheetDetentCalculator.kt
                TrueSheetDimView.kt
                TrueSheetGrabberView.kt
                TrueSheetKeyboardObserver.kt
                TrueSheetStackManager.kt
              events/
                TrueSheetDragEvents.kt
                TrueSheetFocusEvents.kt
                TrueSheetLifecycleEvents.kt
                TrueSheetStateEvents.kt
              TrueSheetContainerView.kt
              TrueSheetContainerViewManager.kt
              TrueSheetContentView.kt
              TrueSheetContentViewManager.kt
              TrueSheetFooterView.kt
              TrueSheetFooterViewManager.kt
              TrueSheetHeaderView.kt
              TrueSheetHeaderViewManager.kt
              TrueSheetModule.kt
              TrueSheetPackage.kt
              TrueSheetPeekView.kt
              TrueSheetPeekViewManager.kt
              TrueSheetView.kt
              TrueSheetViewController.kt
              TrueSheetViewManager.kt
              utils/
                KeyboardUtils.kt
                ScreenUtils.kt
                ViewUtils.kt
      jni/
        CMakeLists.txt
        TrueSheetSpec.h
babel.config.js
CHANGELOG.md
CLAUDE.md
CODE_OF_CONDUCT.md
common/
  cpp/
    react/
      renderer/
        components/
          TrueSheetSpec/
            TrueSheetViewComponentDescriptor.h
            TrueSheetViewShadowNode.cpp
            TrueSheetViewShadowNode.h
            TrueSheetViewState.cpp
            TrueSheetViewState.h
CONTRIBUTING.md
docs/
  .gitattributes
  .gitignore
  babel.config.js
  blog/
    2024/
      assets/
        auto-sizing.gif
      release-0-10.mdx
      welcome.mdx
    2025/
      android-stacking.mdx
      assets/
        android-3-4.gif
      release-3-0.mdx
      sheet-navigator.mdx
    2026/
      assets/
        edge-effect.gif
        release-3-11.gif
      release-3-10.mdx
      release-3-11.mdx
      release-3-9.mdx
    authors.yml
  docs/
    guides/
      _category_.json
      assets/
        dimming.gif
        keyboard.gif
        navigation.gif
        onmount.gif
        reanimated.gif
        resizing.gif
        scrolling.gif
        stacking.gif
      dimming.mdx
      edge-to-edge.mdx
      footer.mdx
      global-methods.mdx
      header.mdx
      jest.mdx
      keyboard.mdx
      liquid-glass.mdx
      navigation.mdx
      onmount.mdx
      overlays.mdx
      peeking.mdx
      reanimated.mdx
      resizing.mdx
      scrolling.mdx
      side-sheets.mdx
      stacking.mdx
      web.mdx
    install.mdx
    intro.mdx
    migration.mdx
    reference/
      _category_.json
      01-configuration.mdx
      02-events.mdx
      03-methods.mdx
      04-types.mdx
    troubleshooting.mdx
    usage.mdx
  docusaurus.config.ts
  package.json
  README.md
  sidebars.ts
  src/
    css/
      custom.css
    theme/
      DocSidebar/
        Desktop/
          Content/
            index.tsx
  static/
    .nojekyll
    android-chrome-192x192.png
    android-chrome-512x512.png
    apple-touch-icon.png
    favicon-16x16.png
    favicon-32x32.png
    favicon.ico
    img/
      logo.png
      logo.svg
      preview-android.gif
      preview-ios.gif
      preview-ipad.gif
      preview-web.gif
    robots.txt
    site.webmanifest
  tsconfig.json
  versioned_docs/
    version-3.11.10/
      guides/
        _category_.json
        assets/
          dimming.gif
          keyboard.gif
          navigation.gif
          onmount.gif
          reanimated.gif
          resizing.gif
          scrolling.gif
          stacking.gif
        dimming.mdx
        edge-to-edge.mdx
        footer.mdx
        global-methods.mdx
        header.mdx
        jest.mdx
        keyboard.mdx
        liquid-glass.mdx
        navigation.mdx
        onmount.mdx
        overlays.mdx
        peeking.mdx
        reanimated.mdx
        resizing.mdx
        scrolling.mdx
        side-sheets.mdx
        stacking.mdx
        web.mdx
      install.mdx
      intro.mdx
      migration.mdx
      reference/
        _category_.json
        01-configuration.mdx
        02-events.mdx
        03-methods.mdx
        04-types.mdx
      troubleshooting.mdx
      usage.mdx
  versioned_sidebars/
    version-3.11.10-sidebars.json
  versions.json
eslint.config.mjs
example/
  bare/
    .bundle/
      config
    .env
    .watchmanconfig
    android/
      app/
        build.gradle
        debug.keystore
        proguard-rules.pro
        src/
          debug/
            AndroidManifest.xml
          main/
            AndroidManifest.xml
            java/
              truesheet/
                example/
                  MainActivity.kt
                  MainApplication.kt
            res/
              drawable/
                rn_edit_text_material.xml
              mipmap-hdpi/
                ic_launcher_round.png
                ic_launcher.png
              mipmap-mdpi/
                ic_launcher_round.png
                ic_launcher.png
              mipmap-xhdpi/
                ic_launcher_round.png
                ic_launcher.png
              mipmap-xxhdpi/
                ic_launcher_round.png
                ic_launcher.png
              mipmap-xxxhdpi/
                ic_launcher_round.png
                ic_launcher.png
              values/
                strings.xml
                styles.xml
      build.gradle
      gradle/
      gradle.properties
        wrapper/
          gradle-wrapper.jar
          gradle-wrapper.properties
      gradlew
      gradlew.bat
      settings.gradle
    app.json
    babel.config.js
    Gemfile
    Gemfile.lock
    index.js
    ios/
      .xcode.env
      Podfile
      Podfile.lock
      TrueSheetExample/
      TrueSheetExample.xcodeproj/
        project.pbxproj
        xcshareddata/
          xcschemes/
            TrueSheetExample.xcscheme
      TrueSheetExample.xcworkspace/
        contents.xcworkspacedata
        AppDelegate.swift
        Images.xcassets/
          AppIcon.appiconset/
            Contents.json
          Contents.json
        Info.plist
        LaunchScreen.storyboard
        PrivacyInfo.xcprivacy
        TrueSheetExample-Bridging-Header.h
    jest.config.js
    metro.config.js
    package.json
    react-native.config.js
    src/
      App.tsx
      hooks/
        index.ts
        useAppNavigation.ts
      navigators/
        index.ts
        ModalStackNavigator.tsx
        RootNavigator.tsx
        SheetNavigator.tsx
        TestStackNavigator.tsx
      types.ts
  expo/
    .env
    .gitignore
    app/
    app.config.ts
      _layout.tsx
      +html.tsx
      index.tsx
      modal/
        _layout.tsx
        index.tsx
        test.tsx
      sheet/
        _layout.tsx
        (home)/
          _layout.tsx
          index.tsx
          test.tsx
        details.tsx
        notifications.tsx
        profile.tsx
        settings.tsx
      standard.tsx
      test-stack/
        _layout.tsx
        index.tsx
      test.tsx
    assets/
      fonts/
        SpaceMono-Regular.ttf
      images/
        adaptive-icon.png
        favicon.png
        icon.png
        splash-icon.png
    metro.config.js
    package.json
    tsconfig.json
  README.md
  shared/
    package.json
    src/
      components/
        Button.tsx
        ButtonGroup.tsx
        DemoContent.tsx
        Footer.tsx
        Header.tsx
        index.ts
        Input.tsx
        Map.tsx
        sheets/
          BasicSheet.tsx
          BlankSheet.tsx
          FlatListSheet.tsx
          GestureSheet.tsx
          index.ts
          NavigationSheet.tsx
          PromptSheet.tsx
          ScrollViewSheet.tsx
        Spacer.tsx
        SwipeButton.tsx
      index.ts
      screens/
        index.ts
        MapScreen.tsx
... 152 more

FAQ

react-native-true-sheet is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes truesheet-usage. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is react-native-true-sheet?: The true native bottom sheet experience for your React Native Apps. 💩
How do I install react-native-true-sheet?: Run these in Claude Code: npx -y skills add lodev09/react-native-true-sheet --agent claude-code. Then prompt normally.
Does react-native-true-sheet auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is react-native-true-sheet free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Features

⚡ Powered by Fabric - Built on React Native's new architecture for maximum performance

🚀 Fully Native - Implemented in the native realm, zero JS hacks

♿ Accessible - Native accessibility and screen reader support out of the box

🔄 Flexible API - Use imperative methods or lifecycle events

⌨️ Keyboard Handling - Built-in keyboard handling with automatic adjustment

📐 Side Sheets - Native side sheet support for iPad and Android tablets

🪟 Liquid Glass - iOS 26+ Liquid Glass support out of the box, featured in Expo Blog

🐎 Reanimated - First-class support for react-native-reanimated

🧭 React Navigation - Built-in sheet navigator for seamless navigation integration

🌐 Web Support - Full web support out of the box

Installation

[!IMPORTANT] Version 3.0+ requires React Native's New Architecture (Fabric) For the old architecture, use version 2.x. See the Migration Guide for upgrading.

Prerequisites

React Native 0.81+

New Architecture enabled

Xcode 26.1+

Compatibility

TrueSheet

React Native

Expo SDK

3.7+

0.81+

54+

3.6

0.80

52-53

Expo

npx expo install @lodev09/react-native-true-sheet

Bare React Native

yarn add @lodev09/react-native-true-sheet cd ios && pod install

Usage

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> ) }

AI Skills

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

This will install the TrueSheet Usage skill into your project.

.clang-format .editorconfig .gitattributes .github/ actions/ setup/ action.yml FUNDING.yml ISSUE_TEMPLATE/ bug_report.yml config.yml PULL_REQUEST_TEMPLATE.md workflows/ build.yml check-changelog.yml check-repro.yml checks.yml stale.yml .gitignore .maestro/ child-sheets.yaml main-sheet.yaml .nvmrc .prettierignore .watchmanconfig .yarn/ patches/ react-native-npm-0.85.3.patch react-native-screens-npm-4.25.2.patch releases/ yarn-4.11.0.cjs .yarnrc.yml .zed/ settings.json AGENTS.md android/ .editorconfig build.gradle gradle.properties src/ main/ AndroidManifest.xml AndroidManifestNew.xml java/ com/ lodev09/ truesheet/ core/ RNScreensEventObserver.kt TrueSheetBottomSheetBehavior.kt TrueSheetBottomSheetView.kt TrueSheetCoordinatorLayout.kt TrueSheetDetentCalculator.kt TrueSheetDimView.kt TrueSheetGrabberView.kt TrueSheetKeyboardObserver.kt TrueSheetStackManager.kt events/ TrueSheetDragEvents.kt TrueSheetFocusEvents.kt TrueSheetLifecycleEvents.kt TrueSheetStateEvents.kt TrueSheetContainerView.kt TrueSheetContainerViewManager.kt TrueSheetContentView.kt TrueSheetContentViewManager.kt TrueSheetFooterView.kt TrueSheetFooterViewManager.kt TrueSheetHeaderView.kt TrueSheetHeaderViewManager.kt TrueSheetModule.kt TrueSheetPackage.kt TrueSheetPeekView.kt TrueSheetPeekViewManager.kt TrueSheetView.kt TrueSheetViewController.kt TrueSheetViewManager.kt utils/ KeyboardUtils.kt ScreenUtils.kt ViewUtils.kt jni/ CMakeLists.txt TrueSheetSpec.h babel.config.js CHANGELOG.md CLAUDE.md CODE_OF_CONDUCT.md common/ cpp/ react/ renderer/ components/ TrueSheetSpec/ TrueSheetViewComponentDescriptor.h TrueSheetViewShadowNode.cpp TrueSheetViewShadowNode.h TrueSheetViewState.cpp TrueSheetViewState.h CONTRIBUTING.md docs/ .gitattributes .gitignore babel.config.js blog/ 2024/ assets/ auto-sizing.gif release-0-10.mdx welcome.mdx 2025/ android-stacking.mdx assets/ android-3-4.gif release-3-0.mdx sheet-navigator.mdx 2026/ assets/ edge-effect.gif release-3-11.gif release-3-10.mdx release-3-11.mdx release-3-9.mdx authors.yml docs/ guides/ _category_.json assets/ dimming.gif keyboard.gif navigation.gif onmount.gif reanimated.gif resizing.gif scrolling.gif stacking.gif dimming.mdx edge-to-edge.mdx footer.mdx global-methods.mdx header.mdx jest.mdx keyboard.mdx liquid-glass.mdx navigation.mdx onmount.mdx overlays.mdx peeking.mdx reanimated.mdx resizing.mdx scrolling.mdx side-sheets.mdx stacking.mdx web.mdx install.mdx intro.mdx migration.mdx reference/ _category_.json 01-configuration.mdx 02-events.mdx 03-methods.mdx 04-types.mdx troubleshooting.mdx usage.mdx docusaurus.config.ts package.json README.md sidebars.ts src/ css/ custom.css theme/ DocSidebar/ Desktop/ Content/ index.tsx static/ .nojekyll android-chrome-192x192.png android-chrome-512x512.png apple-touch-icon.png favicon-16x16.png favicon-32x32.png favicon.ico img/ logo.png logo.svg preview-android.gif preview-ios.gif preview-ipad.gif preview-web.gif robots.txt site.webmanifest tsconfig.json versioned_docs/ version-3.11.10/ guides/ _category_.json assets/ dimming.gif keyboard.gif navigation.gif onmount.gif reanimated.gif resizing.gif scrolling.gif stacking.gif dimming.mdx edge-to-edge.mdx footer.mdx global-methods.mdx header.mdx jest.mdx keyboard.mdx liquid-glass.mdx navigation.mdx onmount.mdx overlays.mdx peeking.mdx reanimated.mdx resizing.mdx scrolling.mdx side-sheets.mdx stacking.mdx web.mdx install.mdx intro.mdx migration.mdx reference/ _category_.json 01-configuration.mdx 02-events.mdx 03-methods.mdx 04-types.mdx troubleshooting.mdx usage.mdx versioned_sidebars/ version-3.11.10-sidebars.json versions.json eslint.config.mjs example/ bare/ .bundle/ config .env .watchmanconfig android/ app/ build.gradle debug.keystore proguard-rules.pro src/ debug/ AndroidManifest.xml main/ AndroidManifest.xml java/ truesheet/ example/ MainActivity.kt MainApplication.kt res/ drawable/ rn_edit_text_material.xml mipmap-hdpi/ ic_launcher_round.png ic_launcher.png mipmap-mdpi/ ic_launcher_round.png ic_launcher.png mipmap-xhdpi/ ic_launcher_round.png ic_launcher.png mipmap-xxhdpi/ ic_launcher_round.png ic_launcher.png mipmap-xxxhdpi/ ic_launcher_round.png ic_launcher.png values/ strings.xml styles.xml build.gradle gradle/ gradle.properties wrapper/ gradle-wrapper.jar gradle-wrapper.properties gradlew gradlew.bat settings.gradle app.json babel.config.js Gemfile Gemfile.lock index.js ios/ .xcode.env Podfile Podfile.lock TrueSheetExample/ TrueSheetExample.xcodeproj/ project.pbxproj xcshareddata/ xcschemes/ TrueSheetExample.xcscheme TrueSheetExample.xcworkspace/ contents.xcworkspacedata AppDelegate.swift Images.xcassets/ AppIcon.appiconset/ Contents.json Contents.json Info.plist LaunchScreen.storyboard PrivacyInfo.xcprivacy TrueSheetExample-Bridging-Header.h jest.config.js metro.config.js package.json react-native.config.js src/ App.tsx hooks/ index.ts useAppNavigation.ts navigators/ index.ts ModalStackNavigator.tsx RootNavigator.tsx SheetNavigator.tsx TestStackNavigator.tsx types.ts expo/ .env .gitignore app/ app.config.ts _layout.tsx +html.tsx index.tsx modal/ _layout.tsx index.tsx test.tsx sheet/ _layout.tsx (home)/ _layout.tsx index.tsx test.tsx details.tsx notifications.tsx profile.tsx settings.tsx standard.tsx test-stack/ _layout.tsx index.tsx test.tsx assets/ fonts/ SpaceMono-Regular.ttf images/ adaptive-icon.png favicon.png icon.png splash-icon.png metro.config.js package.json tsconfig.json README.md shared/ package.json src/ components/ Button.tsx ButtonGroup.tsx DemoContent.tsx Footer.tsx Header.tsx index.ts Input.tsx Map.tsx sheets/ BasicSheet.tsx BlankSheet.tsx FlatListSheet.tsx GestureSheet.tsx index.ts NavigationSheet.tsx PromptSheet.tsx ScrollViewSheet.tsx Spacer.tsx SwipeButton.tsx index.ts screens/ index.ts MapScreen.tsx ... 152 more