Skip to content

Latest commit

Β 

History

History
87 lines (63 loc) Β· 2.44 KB

File metadata and controls

87 lines (63 loc) Β· 2.44 KB

React Native True Sheet

CI Maintainability NPM Downloads

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

React Native True Sheet - IOSReact 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