Skip to content

Latest commit

 

History

History
87 lines (63 loc) · 2.44 KB

README.md

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