React Native True Sheet

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
• 🎯 Type-safe - Full TypeScript support with Codegen-generated native interfaces
• 🚀 Blazing fast - Direct C++ communication, no bridge overhead
• 🎨 Native - Implemented in the native realm
• 🔄 Imperative API - Asynchronus ref methods

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 (RCT_NEW_ARCH_ENABLED=1 for iOS, newArchEnabled=true for Android)

Install

yarn add @lodev09/react-native-true-sheet

Documentation

• Example
• Guides
• Reference
• Migrating to v3
• Troubleshooting
• Testing with Jest

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]}
        cornerRadius={24}
      >
        <Button onPress={dismiss} title="Dismiss" />
      </TrueSheet>
    </View>
  )
}

Testing

TrueSheet includes built-in Jest mocks for easy testing. Simply mock the package in your tests:

jest.mock('@lodev09/react-native-true-sheet');

All methods (present, dismiss, resize) are mocked as Jest functions, allowing you to test your components without native dependencies.

Full Testing Guide

Contributing

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

License

MIT

---

Made with ❤️ by @lodev09