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

Author: lsdimagine

src/components/bottomSheet/BottomSheet.tsx

@@ -316,6 +316,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       animatedScrollableContentOffsetY,
       animatedScrollableOverrideState,
       isScrollableRefreshable,
+      lockableScrollableContentOffsetY,
       setScrollableRef,
       removeScrollableRef,
     } = useScrollable();
@@ -1334,6 +1335,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         isInTemporaryPosition,
         isContentHeightFixed,
         isScrollableRefreshable,
+        lockableScrollableContentOffsetY,
         shouldHandleKeyboardEvents,
         simultaneousHandlers: _providedSimultaneousHandlers,
         waitFor: _providedWaitFor,

src/contexts/internal.ts

@@ -55,6 +55,8 @@ export interface BottomSheetInternalContextType
   isScrollableRefreshable: SharedValue<boolean>;
   isContentHeightFixed: SharedValue<boolean>;
   isInTemporaryPosition: SharedValue<boolean>;
+  // the real content offset when the scrollable is locked
+  lockableScrollableContentOffsetY: SharedValue<number>;
   shouldHandleKeyboardEvents: SharedValue<boolean>;
 
   // methods

src/hooks/useScrollEventsHandlersDefault.ts

@@ -23,6 +23,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedAnimationState,
     animatedHandleGestureState,
     animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
+    lockableScrollableContentOffsetY,
   } = useBottomSheetInternal();
 
   //#region callbacks
@@ -56,8 +57,10 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
           // @ts-ignore
           scrollTo(scrollableRef, 0, lockPosition, false);
           scrollableContentOffsetY.value = lockPosition;
+          lockableScrollableContentOffsetY.value = lockPosition;
           return;
         }
+        lockableScrollableContentOffsetY.value = event.contentOffset.y;
       },
       [
         scrollableRef,
@@ -70,6 +73,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     useWorkletCallback(
       ({ contentOffset: { y } }, context) => {
         scrollableContentOffsetY.value = y;
+        lockableScrollableContentOffsetY.value = y;
         rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
 
@@ -103,11 +107,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;
         }
       },
@@ -129,11 +135,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 = () => {
     SCROLLABLE_STATE.UNDETERMINED
   );
   const isScrollableRefreshable = useSharedValue<boolean>(false);
+  const lockableScrollableContentOffsetY = useSharedValue<number>(0);
 
   // callbacks
   const setScrollableRef = useCallback((ref: ScrollableRef) => {
@@ -64,6 +65,7 @@ export const useScrollable = () => {
     animatedScrollableContentOffsetY,
     animatedScrollableOverrideState,
     isScrollableRefreshable,
+    lockableScrollableContentOffsetY,
     setScrollableRef,
     removeScrollableRef,
   };