feat: add one snap point change per one swipe

Author: IslamRustamov

src/components/bottomSheet/BottomSheet.tsx

@@ -79,6 +79,7 @@ import {
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
   DEFAULT_KEYBOARD_INDEX,
   DEFAULT_KEYBOARD_INPUT_MODE,
+  DEFAULT_ONE_SNAP_POINT_PER_SWIPE,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
   INITIAL_POSITION,
   INITIAL_VALUE,
@@ -107,6 +108,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
       enablePanDownToClose = DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
       enableDynamicSizing = DEFAULT_DYNAMIC_SIZING,
+      enableOneSnapPointPerSwipe = DEFAULT_ONE_SNAP_POINT_PER_SWIPE,
       overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
       overrideReduceMotion: _providedOverrideReduceMotion,
 
@@ -1436,6 +1438,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         overDragResistanceFactor,
         enableOverDrag,
         enablePanDownToClose,
+        enableOneSnapPointPerSwipe,
         animatedAnimationState,
         animatedSheetState,
         animatedScrollableState,
@@ -1480,6 +1483,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         overDragResistanceFactor,
         enableOverDrag,
         enablePanDownToClose,
+        enableOneSnapPointPerSwipe,
         enableDynamicSizing,
         enableBlurKeyboardOnGesture,
         _providedSimultaneousHandlers,

src/components/bottomSheet/constants.ts

@@ -14,6 +14,7 @@ const DEFAULT_ENABLE_OVER_DRAG = true;
 const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
 const DEFAULT_ANIMATE_ON_MOUNT = true;
 const DEFAULT_DYNAMIC_SIZING = true;
+const DEFAULT_ONE_SNAP_POINT_PER_SWIPE = false;
 
 // keyboard
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
@@ -35,6 +36,7 @@ const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
 export {
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
+  DEFAULT_ONE_SNAP_POINT_PER_SWIPE,
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,

src/components/bottomSheet/types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { Insets, StyleProp, View, ViewStyle } from 'react-native';
+import type { Insets, StyleProp, ViewStyle } from 'react-native';
 import type { PanGesture } from 'react-native-gesture-handler';
 import type {
   AnimateStyle,
@@ -90,6 +90,13 @@ export interface BottomSheetProps
    * @default true
    */
   enableDynamicSizing?: boolean;
+  /**
+   * Enable change of one snap point per one swipe.
+   * Works only with default Gesture Events Handlers.
+   * @type boolean
+   * @default false
+   */
+  enableOneSnapPointPerSwipe?: boolean;
   /**
    * To start the sheet closed and snap to initial index when it's mounted.
    * @type boolean

src/contexts/internal.ts

@@ -28,6 +28,7 @@ export interface BottomSheetInternalContextType
         | 'enableDynamicSizing'
         | 'enableBlurKeyboardOnGesture'
         | 'overDragResistanceFactor'
+        | 'enableOneSnapPointPerSwipe'
       >
     > {
   // animated states

src/hooks/useGestureEventsHandlersDefault.tsx

@@ -33,7 +33,7 @@ const dismissKeyboard = Keyboard.dismiss;
 // biome-ignore lint: to be addressed!
 const resetContext = (context: any) => {
   'worklet';
-  Object.keys(context).map(key => {
+  Object.keys(context).forEach(key => {
     context[key] = undefined;
   });
 };
@@ -49,6 +49,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
       animatedLayoutState,
       enableOverDrag,
       enablePanDownToClose,
+      enableOneSnapPointPerSwipe,
       overDragResistanceFactor,
       isInTemporaryPosition,
       enableBlurKeyboardOnGesture,
@@ -142,10 +143,20 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
         }
 
         const { containerHeight } = animatedLayoutState.get();
-        const lowestSnapPoint = enablePanDownToClose
+        let lowestSnapPoint = enablePanDownToClose
           ? containerHeight
           : detents[0];
 
+        if (enableOneSnapPointPerSwipe) {
+          const currentIndex = detents.indexOf(context.value.initialPosition);
+
+          const nextIndex = Math.min(currentIndex + 1, detents.length - 1);
+          const prevIndex = Math.max(currentIndex - 1, 0);
+
+          highestSnapPoint = detents[nextIndex];
+          lowestSnapPoint = detents[prevIndex];
+        }
+
         /**
          * if scrollable is refreshable and sheet position at the highest
          * point, then do not interact with current gesture.
@@ -261,6 +272,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
       [
         enableOverDrag,
         enablePanDownToClose,
+        enableOneSnapPointPerSwipe,
         overDragResistanceFactor,
         isInTemporaryPosition,
         animatedScrollableState,
@@ -401,6 +413,24 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
           return;
         }
 
+        if (enableOneSnapPointPerSwipe) {
+          const currentIndex = snapPoints.indexOf(destinationPoint);
+          const prevIndex = snapPoints.indexOf(context.value.initialPosition);
+
+          if (Math.abs(prevIndex - currentIndex) > 1) {
+            const newIndex =
+              prevIndex > currentIndex ? currentIndex + 1 : currentIndex - 1;
+
+            animateToPosition(
+              snapPoints[newIndex],
+              ANIMATION_SOURCE.GESTURE,
+              velocityY / 2
+            );
+
+            return;
+          }
+        }
+
         animateToPosition(
           destinationPoint,
           ANIMATION_SOURCE.GESTURE,
@@ -409,6 +439,7 @@ export const useGestureEventsHandlersDefault: GestureEventsHandlersHookType =
       },
       [
         enablePanDownToClose,
+        enableOneSnapPointPerSwipe,
         isInTemporaryPosition,
         animatedScrollableState,
         animatedDetentsState,

src/hooks/useGestureEventsHandlersDefault.web.tsx

@@ -32,7 +32,7 @@ const dismissKeyboardOnJs = runOnJS(Keyboard.dismiss);
 // biome-ignore lint: to be addressed!
 const resetContext = (context: any) => {
   'worklet';
-  Object.keys(context).map(key => {
+  Object.keys(context).forEach(key => {
     context[key] = undefined;
   });
 };