The true native bottom sheet experience for your React Native Apps. π©
- β‘ 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
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.
- React Native >= 0.76 (Expo SDK 52+)
- New Architecture enabled (default in RN 0.76+)
npx expo install @lodev09/react-native-true-sheetyarn add @lodev09/react-native-true-sheet
cd ios && pod installimport { 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>
)
}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.
See the contributing guide to learn how to contribute to the repository and the development workflow.
Made with β€οΈ by @lodev09

