Add lockableScrollableContentOffsetY which does not change when scrollable is locked (#14)

Author: lsdimagine

src/components/bottomSheet/BottomSheet.tsx

@@ -306,6 +306,7 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       animatedScrollableOverrideState,
       isScrollableRefreshable,
       isScrollableLocked,
+      lockableScrollableContentOffsetY,
       setScrollableRef,
       removeScrollableRef,
     } = useScrollable();
@@ -1173,6 +1174,7 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
         isContentHeightFixed,
         isScrollableRefreshable,
         isScrollableLocked,
+        lockableScrollableContentOffsetY,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
         waitFor: _providedWaitFor,

src/contexts/internal.ts

@@ -51,6 +51,8 @@ export interface BottomSheetInternalContextType
   animatedScrollableContentOffsetY: Animated.SharedValue<number>;
   animatedScrollableOverrideState: Animated.SharedValue<SCROLLABLE_STATE>;
   isScrollableLocked: Animated.SharedValue<boolean>;
+  // the real content offset when the scrollable is locked
+  lockableScrollableContentOffsetY: Animated.SharedValue<number>;
   isScrollableRefreshable: Animated.SharedValue<boolean>;
   isContentHeightFixed: Animated.SharedValue<boolean>;
   isInTemporaryPosition: Animated.SharedValue<boolean>;

src/hooks/useScrollEventsHandlersDefault.ts

@@ -29,6 +29,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedAnimationState,
     animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
     isScrollableLocked,
+    lockableScrollableContentOffsetY,
   } = useBottomSheetInternal();
   const awaitingFirstScroll = useSharedValue(false);
   const scrollEnded = useSharedValue(false);
@@ -89,9 +90,11 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
             // @ts-ignore
             scrollTo(scrollableRef, 0, lockPosition, false);
             scrollableContentOffsetY.value = lockPosition;
+            lockableScrollableContentOffsetY.value = lockPosition;
           }
           return;
         }
+        lockableScrollableContentOffsetY.value = event.contentOffset.y;
       },
       [
         scrollableRef,
@@ -105,6 +108,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
       (event, context) => {
         const y = event.contentOffset.y;
         scrollableContentOffsetY.value = y;
+        lockableScrollableContentOffsetY.value = y;
         rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
         awaitingFirstScroll.value = true;
@@ -167,10 +171,12 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
           // @ts-ignore
           scrollTo(scrollableRef, 0, lockPosition, false);
           scrollableContentOffsetY.value = lockPosition;
+          lockableScrollableContentOffsetY.value = lockPosition;
           return;
         }
         if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
           scrollableContentOffsetY.value = y;
+          lockableScrollableContentOffsetY.value = y;
           rootScrollableContentOffsetY.value = y;
         }
       },
@@ -193,11 +199,13 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
             // @ts-ignore
             scrollTo(scrollableRef, 0, lockPosition, false);
             scrollableContentOffsetY.value = 0;
+            lockableScrollableContentOffsetY.value = 0;
           }
           return;
         }
         if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
           scrollableContentOffsetY.value = y;
+          lockableScrollableContentOffsetY.value = y;
           rootScrollableContentOffsetY.value = y;
         }
       },

src/hooks/useScrollable.ts

@@ -19,6 +19,7 @@ export const useScrollable = () => {
   );
   const isScrollableRefreshable = useSharedValue<boolean>(false);
   const isScrollableLocked = useSharedValue<boolean>(true);
+  const lockableScrollableContentOffsetY = useSharedValue<number>(0);
 
   // callbacks
   const setScrollableRef = useCallback((ref: ScrollableRef) => {
@@ -65,6 +66,7 @@ export const useScrollable = () => {
     animatedScrollableOverrideState,
     isScrollableRefreshable,
     isScrollableLocked,
+    lockableScrollableContentOffsetY,
     setScrollableRef,
     removeScrollableRef,
   };