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<TrueSheet ref={sheet} detents={[, , ]} cornerRadius={24} grabber onDetentChange={onChange} >
Tap a detent. Tap the dim to dismiss.
One component. Three native sheets.
The same controller Apple Maps and Photos use. Detents, grabber, dimming, and Liquid Glass on iOS 26 come from the system.
Material Components under a CoordinatorLayout. Edge to edge, back gestures, and nested scrolling behave like any other Android sheet.
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 eventsimport { 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>
)
}Features
Everything a sheet should do.
Native presentation on every platform, with the details handled for you. Pick a card to read the guide.
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.
npx expo install @lodev09/react-native-true-sheet@betaTeach your coding agent the library too:
npx skills add lodev09/react-native-true-sheet