Skip to content

Feature: Add Snap Points Support to Bottom Sheet#204

Open
WASIM63 wants to merge 2 commits into
nysamnang:masterfrom
WASIM63:feat/snap-points
Open

Feature: Add Snap Points Support to Bottom Sheet#204
WASIM63 wants to merge 2 commits into
nysamnang:masterfrom
WASIM63:feat/snap-points

Conversation

@WASIM63

@WASIM63 WASIM63 commented Oct 1, 2025

Copy link
Copy Markdown

✨ Feature: Add Snap Points Support to Bottom Sheet

Summary

This PR introduces a new snapPoints prop to react-native-raw-bottom-sheet, allowing the bottom sheet to open and snap to multiple defined positions.
The feature is backward-compatible — existing height usage still works.


🔥 New Features

  • snapPoints prop
    Accepts an array of percentages or absolute numbers.
    snapPoints={['20%', '50%', '90%']}
    snapPoints={[200, 400, 600]}
    
Prop | Type | Description -- | -- | -- height | number | The height of bottom sheet (used if snapPoints not provided). snapPoints | array | Array of snap points (['20%', '50%', '90%'] or [200, 400, 600]). Overrides height. Method | Description -- | -- open(index?: number) | Opens the bottom sheet at a snap point. Defaults to last snap point. close() | Closes the bottom sheet.
<RBSheet
  ref={refRBSheet}
  snapPoints={['20%', '40%', '90%']}
  draggable={true}
  customStyles={{
    container: { borderTopLeftRadius: 20, borderTopRightRadius: 20 },
  }}>
  <View style={{padding: 20}}>
    <Text>Hello from snap points 👋</Text>
  </View>
</RBSheet>

// Open at 40% snap point
refRBSheet.current.open(1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant