Skip to content

Conversation

@WASIM63
Copy link

@WASIM63 WASIM63 commented Oct 1, 2025

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

🧪 Testing

  • Verified that:

    • Old height prop still works unchanged.

    • snapPoints opens correctly at different positions.

    • Dragging with finger follows smoothly.

    • On release, sheet snaps to nearest defined point.

🙏 Notes

  • Fully backward-compatible.

  • README.md updated with usage examples.

  • Typings (index.d.ts) updated for new prop + method.

---

⚡ Would you also like me to give you a **conventional commit message suggestion** (like `feat: add snapPoints support`) so your branch name + PR title align with semantic versioning?

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