Bottom sheets that are actually native.

TrueSheet hands your content to the sheet the platform already ships. Real detents, real gestures, real accessibility. One component for iOS, Android, and web.

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

Read the docs View on GitHub

<TrueSheet
  ref={sheet}
  detents={[, , ]}
  cornerRadius={24}
  grabber
  onDetentChange={onChange}
>

await sheet.current?.present()

Tap a detent. Tap the dim to dismiss.

One component. Three native sheets.

iOS

UISheetPresentationController

The same controller Apple Maps and Photos use. Detents, grabber, dimming, and Liquid Glass on iOS 26 come from the system.

Android

BottomSheetBehavior

Material Components under a CoordinatorLayout. Edge to edge, back gestures, and nested scrolling behave like any other Android sheet.

Web

DOM renderer

The same component and props, rendered in the browser with drag, snap, and keyboard support. One import across all three.

Present. Await. Dismiss.

Attach a ref and call it. Every method returns a promise that resolves when the native animation finishes, so you can sequence work without guessing.

Prefer events? Lifecycle, drag, focus, and detent events fire from the native side with the same timing your users feel.

Browse the methods and events

import { TrueSheet } from '@lodev09/react-native-true-sheet'

export const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const present = async () => {
    await sheet.current?.present()
    console.log('presented')
  }

  const dismiss = async () => {
    await sheet.current?.dismiss()
    console.log('dismissed')
  }

  return (
    <View>
      <Button onPress={present} title="Present" />
      <TrueSheet ref={sheet} detents={['auto', 1]}>
        <Button onPress={dismiss} title="Dismiss" />
      </TrueSheet>
    </View>
  )
}

Everything a sheet should do.

Built on Fabric
Layout state and shadow nodes live in C++ shared by both platforms. Content resizes in the same frame as the sheet.
Detents that fit
Size by fraction, fixed height, or auto. Auto measures your content, including scroll views and lists.
Keyboard aware
The sheet and its scrollables move out of the way when the keyboard shows. No listeners to wire up.
Reanimated ready
Read the sheet position as a shared value and drive your own animations on the UI thread.
Sheets as screens
A sheet navigator for React Navigation and a Sheet layout for Expo Router. Push, pop, and pass params.
Stack and overlay
Present sheets over sheets. Render toasts and dialogs above them with TrueSheetOverlay.
Liquid Glass
Native background blur and Liquid Glass on iOS 26, featured on the Expo blog.
Accessible by default
Screen readers announce detents. Grabber labels, hints, and actions are yours to customize.

Version 4 is in beta.

A rewritten layout engine sizes content synchronously per detent and tracks the sheet while dragging. Auto detents now measure scroll views. Expo Router gets a first class Sheet layout.

Read the v4 docs Migration guide

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

Teach your coding agent the library too:

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