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

🎉 What's New in v4

[!TIP] ✨ v4 is in beta! It rewrites the layout engine — the sheet now lays out synchronously per detent, so the container is sized to the sheet's visible height and tracks it in realtime while dragging.

• 📏 Synchronous layout - Content resizes in the same frame as the sheet, no more lag
• 📐 auto detent with scrollables - The sheet now sizes itself to a ScrollView/FlatList's content height
• 📜 scrollableRef - Pass a ScrollView/FlatList ref to wire nested scrolling, keyboard insets, and auto detent sizing
• 🦶 Relative footers - Footers take up space below the content by default
• 🧭 Expo Router - First-class support via the Sheet layout from /navigation/expo-router
• 🍞 TrueSheetOverlay - Render toasts, dialogs, and other overlays above your sheets — no more FullWindowOverlay/Modal workarounds
• 🔍 Element inspector - React Native's dev menu inspector now works inside a presented sheet
• 🎨 Dim color and opacity - Customize the dim behind the sheet with dimColor and dimOpacity

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

See the Migration Guide to upgrade. v3 is still supported for React Native 0.81-0.86 (Expo SDK 54-57) and remains the latest release on npm.

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.82+ (0.81+ on v3)
• New Architecture enabled
• Xcode 26.1+

Compatibility

Expo

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

Bare React Native

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

These install v3. For v4, append @beta — see 🎉 What's New in v4.

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

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