React Native True Sheet

Note

🎉 Version 3.0 is here! Completely rebuilt for Fabric with new features like automatic ScrollView detection, native headers/footers, sheet stacking, and more. Read the announcement

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
• 🚀 Native - Implemented in the native realm
• 🎯 Type-safe - Full TypeScript support with Codegen-generated native interfaces
• ♿ Accessible - Native accessibility and screen reader support out of the box
• 🔄 Flexible API - Use imperative methods or lifecycle events
• 🪟 Liquid Glass - iOS 26+ Liquid Glass support out of the box. Featured in Expo Blog

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.76 (Expo SDK 52+)
• New Architecture enabled (default in RN 0.76+)

Expo

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

Bare React Native

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

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