usage.mdx

sidebar_position	description	keywords
3	How to use the React Native True Bottom Sheet component.	bottom sheet usage bottom sheet getting started bottom sheet setup import bottom sheet

Usage

1. Import TrueSheet.

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

2. Define TrueSheet inside any component and attach a ref to it.
3. Control the sheet by invoking the available ref methods.

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

Simple, right? Head over to props to learn more about configuring your sheet.