Skip to content

BlueWallet/react-native-true-sheet

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

The true native bottom sheet experience πŸ’©

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 34.9%
  • Kotlin 32.0%
  • Swift 26.4%
  • Ruby 2.6%
  • Objective-C 1.8%
  • JavaScript 1.6%
  • Shell 0.7%