lmnl sheet

Getting Started

Install RNGH and Reanimated.

export function App() {
  const sheet = useBottomSheet({
    index: 1, // initialize at index 1 (open)
    minIndex: 1, // prevent closing, but allow other snap points
    // specifying a snap point 0 allows close, otherwise it'll only allow 120 and 85%
    snaps: [0, 120, '85%'],
    onStateChange(state) {
      console.log(state)
    },
  })

  const toggle = React.useCallback(() => {
    sheet.index = sheet.index > 0 ? 0 : 1
  }, [sheet])

  const pinToTwo = React.useCallback(() => {
    sheet.index = 1
    sheet.pinned = false // pinned to snap point index 1
  }, [])

  return (
    <View>
      <Button onClick={toggleSheet}>Toggle</Button>

      <Button onClick={pinToTwo}>Pin to index 2</Button>

      {/* Set to first snap point — if that's 0 it'll close */}
      <Button onClick={sheet.close}>Close</Button>

      <BottomSheet sheet={sheet}>
        <SheetContent />
      </BottomSheet>
    </View>
  )
}

Sheet has a few other utils, like snapping to an arbitrary position:

// open sheet to 500px from bottom of viewport
sheet.position = 500

If you pin it from there, it'll stay in that position also:

sheet.pinned = true

Keyboard handling is manual atm, but easy. Either specify a greater snap point to make room:

sheet.index = 2

Or open to a shorter snap point but offset from the bottom of the screen:

sheet.index = 1
// px from bottom of viewport that the sheet is offset (useful for keyboard handling)
sheet.offset = Keyboard.height