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