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
• 🚀 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
• 🪟 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.80+
• New Architecture enabled (default in RN 0.76+)
• Xcode 26.1+ (liquid glass support)

Compatibility

TrueSheet	React Native	Expo SDK
3.7+	0.80+	54+
3.6	0.79	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

• Example
• Configuration
• Lifecycle Events
• React Navigation
• Troubleshooting
• Testing with Jest
• Migrating to v3

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

Contributing

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

License

MIT

---

Made with ❤️ by @lodev09