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

Author: lsdimagine

src/components/bottomSheet/BottomSheet.tsx

@@ -313,6 +313,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       animatedScrollableOverrideState,
       isScrollableRefreshable,
       isScrollableLocked,
+      lockableScrollableContentOffsetY,
       setScrollableRef,
       removeScrollableRef,
     } = useScrollable();
@@ -1399,6 +1400,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         isContentHeightFixed,
         isScrollableRefreshable,
         isScrollableLocked,
+        lockableScrollableContentOffsetY,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
         waitFor: _providedWaitFor,

src/contexts/internal.ts

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

src/hooks/useScrollEventsHandlersDefault.ts

@@ -27,6 +27,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedHandleGestureState,
     animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
     isScrollableLocked,
+    lockableScrollableContentOffsetY,
   } = useBottomSheetInternal();
   const awaitingFirstScroll = useSharedValue(false);
   const scrollEnded = useSharedValue(false);
@@ -81,9 +82,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,
@@ -97,6 +100,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;
@@ -157,11 +161,13 @@ 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;
         }
       },
@@ -184,12 +190,14 @@ 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,
   };