Bottom sheet component sample

bottom-sheet-sample.js

  // create a reference to the bottom sheet
  const bottomSheetRef = useRef<BottomSheet>(null)

  //custom snap points
  const snapPoints = ["30%", "60%"]

  //track the current snap point index
  const [currentIndex, setCurrentIndex] = useState(-1)

  // track on which snap point index bottom sheet is currently
  const handleSheetChanges = useCallback((index: number) => {
    setShowBottomSheet(index > -1)
    setCurrentIndex(index)
  }, [])

  // expand bottom sheet when showBottomSheet is true to the first snap point
  useEffect(() => {
    if (showBottomSheet) {
      bottomSheetRef.current?.snapToIndex(0)
    } else {
      bottomSheetRef.current?.close()
    }
  }, [showBottomSheet])