Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

lodev09/react-native-true-sheet

Repository files navigation

React Native True Sheet

CI NPM Downloads

The true native bottom sheet experience for your React Native Apps. πŸ’©

React Native True Sheet - IOS React Native True Sheet - Android

Features

  • Implemented in the native realm.
  • Clean, fast, and lightweight.
  • Asynchronus ref methods.
  • Bonus! Blur support on IOS 😎

Installation

You can install the package by using either yarn or npm.

yarn add @lodev09/react-native-true-sheet
npm i @lodev09/react-native-true-sheet

Next, run the following to install it on IOS.

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}
 sizes={['auto', 'large']}
 cornerRadius={24}
 >
 <Button onPress={dismiss} title="Dismiss" />
 </TrueSheet>
 </View>
 )
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with ❀️ by @lodev09

About

The true native bottom sheet experience πŸ’©

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /