using scrollEnabled

Author: yayvery

src/components/bottomSheet/BottomSheet.tsx

@@ -49,7 +49,6 @@ import {
   KEYBOARD_STATE,
   KEYBOARD_BEHAVIOR,
   SHEET_STATE,
-  SCROLLABLE_STATE,
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
   ANIMATION_SOURCE,
@@ -288,6 +287,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animatedHandleGestureState = useSharedValue<State>(
       State.UNDETERMINED
     );
+    const isPanGestureMoving = useSharedValue(false);
     //#endregion
 
     //#region hooks variables
@@ -366,35 +366,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       isInTemporaryPosition,
       keyboardBehavior,
     ]);
-    const animatedScrollableState = useDerivedValue<SCROLLABLE_STATE>(() => {
-      /**
-       * if sheet state is fill parent, then unlock scrolling
-       */
-      if (animatedSheetState.value === SHEET_STATE.FILL_PARENT) {
-        return SCROLLABLE_STATE.UNLOCKED;
-      }
-
-      /**
-       * if sheet state is extended, then unlock scrolling
-       */
-      if (animatedSheetState.value === SHEET_STATE.EXTENDED) {
-        return SCROLLABLE_STATE.UNLOCKED;
-      }
-
-      /**
-       * if keyboard is shown and sheet is animating
-       * then we do not lock the scrolling to not lose
-       * current scrollable scroll position.
-       */
-      if (
-        animatedKeyboardState.value === KEYBOARD_STATE.SHOWN &&
-        animatedAnimationState.value === ANIMATION_STATE.RUNNING
-      ) {
-        return SCROLLABLE_STATE.UNLOCKED;
-      }
-
-      return SCROLLABLE_STATE.LOCKED;
-    });
     // dynamic
     const animatedContentHeightMax = useDerivedValue(() => {
       const keyboardHeightInContainer = animatedKeyboardHeightInContainer.value;
@@ -509,6 +480,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
       return currentIndex;
     }, [android_keyboardInputMode]);
+    const isExpanded = useDerivedValue(() => {
+      const state = animatedSheetState.value;
+      return (
+        state === SHEET_STATE.EXTENDED ||
+        state === SHEET_STATE.OVER_EXTENDED ||
+        state === SHEET_STATE.FILL_PARENT
+      );
+    }, [animatedSheetState]);
     //#endregion
 
     //#region private methods
@@ -1111,9 +1090,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         enablePanDownToClose,
         animatedAnimationState,
         animatedSheetState,
-        animatedScrollableState,
         animatedContentGestureState,
         animatedHandleGestureState,
+        isPanGestureMoving,
         animatedKeyboardState,
         animatedScrollableType,
         animatedIndex,
@@ -1131,6 +1110,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         isInTemporaryPosition,
         isContentHeightFixed,
         isScrollableRefreshable,
+        isExpanded,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
         waitFor: _providedWaitFor,
@@ -1159,11 +1139,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedKeyboardHeightInContainer,
         animatedSheetState,
         animatedHighestSnapPoint,
-        animatedScrollableState,
         animatedSnapPoints,
         shouldHandleKeyboardEvents,
         animatedScrollableContentOffsetY,
         isScrollableRefreshable,
+        isExpanded,
         isContentHeightFixed,
         isInTemporaryPosition,
         enableContentPanningGesture,

src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx

@@ -3,7 +3,6 @@ import { RefreshControl, RefreshControlProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useAnimatedProps } from 'react-native-reanimated';
 import { BottomSheetDraggableContext } from '../../contexts/gesture';
-import { SCROLLABLE_STATE } from '../../constants';
 import { useBottomSheetInternal } from '../../hooks';
 
 const AnimatedRefreshControl = Animated.createAnimatedComponent(RefreshControl);
@@ -16,12 +15,12 @@ function BottomSheetRefreshControlComponent({
 }: BottomSheetRefreshControlProps) {
   //#region hooks
   const draggableGesture = useContext(BottomSheetDraggableContext);
-  const { animatedScrollableState } = useBottomSheetInternal();
+  const { isExpanded } = useBottomSheetInternal();
   //#endregion
 
   //#region variables
   const animatedProps = useAnimatedProps(() => ({
-    enabled: animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED,
+    enabled: isExpanded.value,
   }));
   const gesture = useMemo(
     () =>

src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -6,7 +6,7 @@ import {
   useBottomSheetInternal,
   useStableCallback,
 } from '../../hooks';
-import { SCROLLABLE_STATE, SCROLLABLE_TYPE } from '../../constants';
+import type { SCROLLABLE_TYPE } from '../../constants';
 
 export function createBottomSheetScrollableComponent<T, P>(
   type: SCROLLABLE_TYPE,
@@ -44,20 +44,33 @@ export function createBottomSheetScrollableComponent<T, P>(
     const {
       animatedScrollableRef: scrollableRef,
       animatedFooterHeight,
-      animatedScrollableState,
+      isExpanded,
       enableDynamicSizing,
       animatedContentHeight,
+      animatedScrollableContentOffsetY,
+      isPanGestureMoving,
     } = useBottomSheetInternal();
     //#endregion
 
     //#region variables
     const scrollableAnimatedProps = useAnimatedProps(
       () => ({
+        // only scroll if sheet is open
+        scrollEnabled: isExpanded.value,
+        // only bounce at bottom or not touching screen
+        bounces:
+          animatedScrollableContentOffsetY.value > 0 ||
+          !isPanGestureMoving.value,
         showsVerticalScrollIndicator: showsVerticalScrollIndicator
-          ? animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED
+          ? isExpanded.value
           : showsVerticalScrollIndicator,
       }),
-      [showsVerticalScrollIndicator]
+      [
+        animatedScrollableContentOffsetY,
+        isPanGestureMoving,
+        isExpanded,
+        showsVerticalScrollIndicator,
+      ]
     );
     //#endregion
 

src/constants.ts

@@ -19,12 +19,6 @@ enum SHEET_STATE {
   FILL_PARENT,
 }
 
-enum SCROLLABLE_STATE {
-  LOCKED = 0,
-  UNLOCKED,
-  UNDETERMINED,
-}
-
 enum SCROLLABLE_TYPE {
   UNDETERMINED = 0,
   VIEW,
@@ -113,7 +107,6 @@ export {
   ANIMATION_METHOD,
   ANIMATION_SOURCE,
   SCROLLABLE_TYPE,
-  SCROLLABLE_STATE,
   KEYBOARD_STATE,
   WINDOW_HEIGHT,
   WINDOW_WIDTH,

src/contexts/internal.ts

@@ -10,7 +10,6 @@ import type {
 import type {
   ANIMATION_STATE,
   KEYBOARD_STATE,
-  SCROLLABLE_STATE,
   SCROLLABLE_TYPE,
   SHEET_STATE,
 } from '../constants';
@@ -31,10 +30,10 @@ export interface BottomSheetInternalContextType
   // animated states
   animatedAnimationState: Animated.SharedValue<ANIMATION_STATE>;
   animatedSheetState: Animated.SharedValue<SHEET_STATE>;
-  animatedScrollableState: Animated.SharedValue<SCROLLABLE_STATE>;
   animatedKeyboardState: Animated.SharedValue<KEYBOARD_STATE>;
   animatedContentGestureState: Animated.SharedValue<State>;
   animatedHandleGestureState: Animated.SharedValue<State>;
+  isPanGestureMoving: Animated.SharedValue<boolean>;
 
   // animated values
   animatedSnapPoints: Animated.SharedValue<number[]>;
@@ -51,6 +50,7 @@ export interface BottomSheetInternalContextType
   animatedScrollableType: Animated.SharedValue<SCROLLABLE_TYPE>;
   animatedScrollableContentOffsetY: Animated.SharedValue<number>;
   isScrollableRefreshable: Animated.SharedValue<boolean>;
+  isExpanded: Animated.SharedValue<boolean>;
   isContentHeightFixed: Animated.SharedValue<boolean>;
   isInTemporaryPosition: Animated.SharedValue<boolean>;
   shouldHandleKeyboardEvents: Animated.SharedValue<boolean>;

src/hooks/useGestureEventsHandlers.tsx

@@ -23,13 +23,11 @@ import { floatingPointEquals } from '../utilities';
 type GestureEventContextType = {
   initialPosition: number;
   initialKeyboardState: KEYBOARD_STATE;
-  isScrollablePositionLocked: boolean;
 };
 
 const INITIAL_CONTEXT: GestureEventContextType = {
   initialPosition: 0,
   initialKeyboardState: KEYBOARD_STATE.UNDETERMINED,
-  isScrollablePositionLocked: false,
 };
 
 const dismissKeyboard = Keyboard.dismiss;
@@ -59,6 +57,7 @@ export const useGestureEventsHandlers: GestureEventsHandlersHookType = () => {
     overDragResistanceFactor,
     isInTemporaryPosition,
     isScrollableRefreshable,
+    isPanGestureMoving,
     animateToPosition,
     stopAnimation,
   } = useBottomSheetInternal();
@@ -70,8 +69,11 @@ export const useGestureEventsHandlers: GestureEventsHandlersHookType = () => {
 
   //#region gesture methods
   const handleOnBegin: GestureEventHandlerCallbackType = useWorkletCallback(
-    function handleOnBegin(__, _) {},
-    []
+    function handleOnBegin(__, _) {
+      // touching screen
+      isPanGestureMoving.value = true;
+    },
+    [isPanGestureMoving]
   );
   const handleOnStart: GestureEventHandlerCallbackType = useWorkletCallback(
     function handleOnStart(__, _) {
@@ -84,17 +86,6 @@ export const useGestureEventsHandlers: GestureEventsHandlersHookType = () => {
         initialPosition: animatedPosition.value,
         initialKeyboardState: animatedKeyboardState.value,
       };
-
-      /**
-       * if the scrollable content is scrolled, then
-       * we lock the position.
-       */
-      if (animatedScrollableContentOffsetY.value > 0) {
-        context.value = {
-          ...context.value,
-          isScrollablePositionLocked: true,
-        };
-      }
     },
     [
       stopAnimation,
@@ -145,57 +136,21 @@ export const useGestureEventsHandlers: GestureEventsHandlersHookType = () => {
         return;
       }
 
-      /**
-       * a negative scrollable content offset to be subtracted from accumulated
-       * current position and gesture translation Y to allow user to drag the sheet,
-       * when scrollable position at the top.
-       * a negative scrollable content offset when the scrollable is not locked.
-       */
-      const negativeScrollableContentOffset =
-        (floatingPointEquals(context.value.initialPosition, highestSnapPoint) &&
-          source === GESTURE_SOURCE.CONTENT) ||
-        !context.value.isScrollablePositionLocked
-          ? animatedScrollableContentOffsetY.value * -1
-          : 0;
-
       /**
        * an accumulated value of starting position with gesture translation y.
        */
       const draggedPosition = context.value.initialPosition + translationY;
 
-      /**
-       * an accumulated value of dragged position and negative scrollable content offset,
-       * this will insure locking sheet position when user is scrolling the scrollable until,
-       * they reach to the top of the scrollable.
-       */
-      const accumulatedDraggedPosition =
-        draggedPosition + negativeScrollableContentOffset;
-
       /**
        * a clamped value of the accumulated dragged position, to insure keeping the dragged
        * position between the highest and lowest snap points.
        */
       const clampedPosition = clamp(
-        accumulatedDraggedPosition,
+        draggedPosition,
         highestSnapPoint,
         lowestSnapPoint
       );
 
-      /**
-       * if scrollable position is locked and the animated position
-       * reaches the highest point, then we unlock the scrollable position.
-       */
-      if (
-        context.value.isScrollablePositionLocked &&
-        source === GESTURE_SOURCE.CONTENT &&
-        floatingPointEquals(animatedPosition.value, highestSnapPoint)
-      ) {
-        context.value = {
-          ...context.value,
-          isScrollablePositionLocked: false,
-        };
-      }
-
       /**
        * over-drag implementation.
        */
@@ -227,16 +182,11 @@ export const useGestureEventsHandlers: GestureEventsHandlersHookType = () => {
 
         if (
           source === GESTURE_SOURCE.CONTENT &&
-          draggedPosition + negativeScrollableContentOffset > lowestSnapPoint
+          draggedPosition > lowestSnapPoint
         ) {
           const resistedPosition =
             lowestSnapPoint +
-            Math.sqrt(
-              1 +
-                (draggedPosition +
-                  negativeScrollableContentOffset -
-                  lowestSnapPoint)
-            ) *
+            Math.sqrt(1 + (draggedPosition - lowestSnapPoint)) *
               overDragResistanceFactor;
           animatedPosition.value = resistedPosition;
           return;
@@ -402,8 +352,9 @@ export const useGestureEventsHandlers: GestureEventsHandlersHookType = () => {
   const handleOnFinalize: GestureEventHandlerCallbackType = useWorkletCallback(
     function handleOnFinalize() {
       resetContext(context);
+      isPanGestureMoving.value = false;
     },
-    [context]
+    [context, isPanGestureMoving]
   );
   //#endregion