[BREAKGLASS] Append-only mirror of github.com/bluewallet/react-native-true-sheet
65ac47b738
* refactor(cpp): use yoga namespace for StyleSizeLength - Replace yoga::StyleSizeLength with StyleSizeLength via 'using namespace yoga' - Switch from <yoga/style/StyleSizeLength.h> to <react/renderer/components/view/conversions.h> - Aligns with patterns used by react-native-safe-area-context Ref: https://github.com/lodev09/react-native-true-sheet/discussions/218 * chore: run tidy |
||
|---|---|---|
| .github | ||
| .yarn | ||
| .zed | ||
| android | ||
| common/cpp/react/renderer/components/TrueSheetSpec | ||
| docs | ||
| example | ||
| ios | ||
| scripts | ||
| src | ||
| .clang-format | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .nvmrc | ||
| .prettierignore | ||
| .watchmanconfig | ||
| .yarnrc.yml | ||
| AGENTS.md | ||
| babel.config.js | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| eslint.config.mjs | ||
| jest.setup.js | ||
| lefthook.yml | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| react-native.config.js | ||
| README.md | ||
| RNTrueSheet.podspec | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
| turbo.json | ||
| yarn.lock | ||
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
- 🚀 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
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.76 (Expo SDK 52+)
- New Architecture enabled (default in RN 0.76+)
Expo
npx expo install @lodev09/react-native-true-sheet
Bare React Native
yarn add @lodev09/react-native-true-sheet
cd ios && pod install
Documentation
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>
)
}
Testing
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.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
Made with ❤️ by @lodev09