React Native True Sheet

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

Features

• ✅ Implemented in the native realm.
• ✅ NOT your pure JS, (re)animated view (might integrate in the future 👀)
• ✅ Clean, fast, and lightweight.
• ✅ Handles your Scrolling needs, natively.
• ✅ Handles your Footer needs, natively.
• ✅ Handles your Keyboard needs, natively.
• ✅ Asynchronus ref methods.
• ✅ Bonus! Blur support on IOS 😎

Installation

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

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

Documentation

• Guides
• Reference
• Example

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>
  )
}

TODO (v1)

• Test with RN new architecture
• Reanimated integration(?)

Contributing

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

License

MIT