https://github.com/lodev09/react-native-true-sheet

The true native bottom sheet 💩
https://github.com/lodev09/react-native-true-sheet

android bottom-sheet ios modal-sheet native-sheet react-native

Last synced: 10 days ago
JSON representation

The true native bottom sheet 💩

• Host: GitHub
• URL: https://github.com/lodev09/react-native-true-sheet
• Owner: lodev09
• License: mit
• Created: 2024-03-23T03:42:14.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-12T07:08:03.000Z (7 months ago)
• Last Synced: 2024-04-14T12:34:53.414Z (7 months ago)
• Topics: android, bottom-sheet, ios, modal-sheet, native-sheet, react-native
• Language: Kotlin
• Homepage:
• Size: 46.9 MB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# React Native True Sheet

[![CI](https://github.com/lodev09/react-native-true-sheet/actions/workflows/ci.yml/badge.svg)](https://github.com/lodev09/react-native-true-sheet/actions/workflows/ci.yml)

[![Maintainability](https://api.codeclimate.com/v1/badges/0bd49973c6c61d85e2be/maintainability)](https://codeclimate.com/github/lodev09/react-native-true-sheet/maintainability)

[![NPM Downloads](https://img.shields.io/npm/d18m/%40lodev09%2Freact-native-true-sheet)](https://www.npmjs.com/package/@lodev09/react-native-true-sheet)

The true native bottom sheet experience for your React Native Apps. 💩



## Features

* Implemented in the native realm.

* Clean, fast, and lightweight.

* Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods).

* Bonus! [Blur](https://sheet.lodev09.com/reference/types#blurtint) support on IOS 😎

## Installation

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

```sh

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

```

```sh

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

```

Next, run the following to install it on IOS.

```sh

cd ios && pod install

```

## Documentation

- [Example](example)

- [Guides](https://sheet.lodev09.com/category/guides)

- [Reference](https://sheet.lodev09.com/category/reference)

- [Troubleshooting](https://sheet.lodev09.com/troubleshooting)

## Usage

```tsx

import { TrueSheet } from "@lodev09/react-native-true-sheet"

export const App = () => {

  const sheet = useRef(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 (

    

      

      

        

      

    

  )

}

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

[MIT](LICENSE)

---

Made with ❤️ by [@lodev09](http://linkedin.com/in/lodev09/)