feat: add bottom clamp option (#108)

Author: sebqq

README.md

@@ -67,6 +67,7 @@ class Example extends React.Component {
 | enabledContentGestureInteraction | no       | `true`  | Defines if bottom sheet content could be scrollable by gesture. |
 | enabledContentTapInteraction | no       | `true`  | Defines whether bottom sheet content could be tapped. |
 | enabledManualSnapping     | no       | `true`  | If `false` blocks snapping using `snapTo` method. |
+| enabledBottomClamp        | no       | `false` | If `true` block movement is clamped from bottom to minimal snappoint. |
 | enabledInnerScrolling     | no       | `true`  | Defines whether it's possible to scroll inner content of bottom sheet. |
 | callbackNode              | no       |         | `reanimated` node which holds position of bottom sheet, where `0` it the highest snap point and `1` is the lowest. |
 | contentPosition           | no       |         | `reanimated` node which holds position of bottom sheet's content (in dp) |

src/index.tsx

@@ -41,6 +41,11 @@ type Props = {
    */
   enabledContentTapInteraction?: boolean
 
+  /**
+   * When true, clamp bottom position to first snapPoint.
+   */
+  enabledBottomClamp?: boolean
+
   /**
    * If false blocks snapping using snapTo method. Defaults to true.
    */
@@ -286,6 +291,7 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
     initialSnap: 0,
     enabledImperativeSnapping: true,
     enabledGestureInteraction: true,
+    enabledBottomClamp: false,
     enabledHeaderGestureInteraction: true,
     enabledContentGestureInteraction: true,
     enabledContentTapInteraction: true,
@@ -317,6 +323,7 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
   private tapRef: React.RefObject<TapGestureHandler>
   private snapPoint: Animated.Node<number>
   private Y: Animated.Node<number>
+  private clampingValue: Animated.Value<number> = new Value(0)
   private onOpenStartValue: Animated.Value<number> = new Value(0)
   private onOpenEndValue: Animated.Value<number> = new Value(0)
   private onCloseStartValue: Animated.Value<number> = new Value(1)
@@ -358,6 +365,10 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
     // current snap point desired
     this.snapPoint = currentSnapPoint()
 
+    if (props.enabledBottomClamp) {
+      this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
+    }
+
     const masterClock = new Clock()
     const prevMasterDrag = new Value(0)
     const wasRun: Animated.Value<number> = new Value(0)
@@ -406,7 +417,14 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
       ),
       cond(
         greaterThan(masterOffseted, snapPoints[0]),
-        masterOffseted,
+        cond(
+          and(
+            props.enabledBottomClamp ? 1 : 0,
+            greaterThan(masterOffseted, this.clampingValue)
+          ),
+          this.clampingValue,
+          masterOffseted
+        ),
         max(
           multiply(
             sub(
@@ -432,6 +450,13 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
     )
   }
 
+  componentDidUpdate(_prevProps: Props, prevState: State) {
+    const { snapPoints } = this.state
+    if (this.props.enabledBottomClamp && snapPoints !== prevState.snapPoints) {
+      this.clampingValue.setValue(snapPoints[snapPoints.length - 1])
+    }
+  }
+
   private runSpring(
     clock: Animated.Clock,
     value: Animated.Value<number>,