Move lockableScrollableContentOffsetY into scrollable props (#15)

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

This reverts commit 859ab16.

* Move lockableScrollableContentOffsetY into scrollable props

Author: lsdimagine

src/components/bottomSheet/BottomSheet.tsx

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

src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -44,6 +44,7 @@ export function createBottomSheetScrollableComponent<T, P>(
       refreshControl,
       scrollBuffer,
       preserveScrollMomentum,
+      lockableScrollableContentOffsetY,
       // events
       onScroll,
       onScrollBeginDrag,
@@ -63,7 +64,8 @@ export function createBottomSheetScrollableComponent<T, P>(
         onScrollBeginDrag,
         onScrollEndDrag,
         scrollBuffer,
-        preserveScrollMomentum
+        preserveScrollMomentum,
+        lockableScrollableContentOffsetY
       );
     const {
       animatedFooterHeight,

src/components/bottomSheetScrollable/types.d.ts

@@ -58,6 +58,11 @@ export interface BottomSheetScrollableProps {
    * Whether or not to preserve scroll momentum when expanding a scrollable bottom sheet component.
    */
   preserveScrollMomentum?: boolean;
+
+  /**
+   * The optional lockable scrollable content offset ref, which will remain the same value when scrollable is locked.
+   */
+  lockableScrollableContentOffsetY?: Animated.SharedValue<number>;
 }
 
 export type ScrollableProps<T> =

src/contexts/internal.ts

@@ -51,8 +51,6 @@ 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

@@ -1,5 +1,5 @@
 import { State } from 'react-native-gesture-handler';
-import { scrollTo, useSharedValue, useWorkletCallback } from 'react-native-reanimated';
+import { scrollTo, useAnimatedReaction, useSharedValue, useWorkletCallback } from 'react-native-reanimated';
 import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
 import type {
   ScrollEventHandlerCallbackType,
@@ -17,7 +17,8 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
   scrollableRef,
   scrollableContentOffsetY,
   scrollBuffer,
-  preserveScrollMomentum
+  preserveScrollMomentum,
+  lockableScrollableContentOffsetY,
 ) => {
   // hooks
   const {
@@ -27,10 +28,19 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedHandleGestureState,
     animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
     isScrollableLocked,
-    lockableScrollableContentOffsetY,
   } = useBottomSheetInternal();
   const awaitingFirstScroll = useSharedValue(false);
   const scrollEnded = useSharedValue(false);
+  const _lockableScrollableContentOffsetY = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => _lockableScrollableContentOffsetY.value,
+    _lockableScrollableContentOffsetY => {
+      if (lockableScrollableContentOffsetY) {
+        lockableScrollableContentOffsetY.value = _lockableScrollableContentOffsetY;
+      }
+    }
+  );
 
   //#region callbacks
   const handleOnScroll: ScrollEventHandlerCallbackType<ScrollEventContextType> =
@@ -82,11 +92,11 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
             // @ts-ignore
             scrollTo(scrollableRef, 0, lockPosition, false);
             scrollableContentOffsetY.value = lockPosition;
-            lockableScrollableContentOffsetY.value = lockPosition;
+            _lockableScrollableContentOffsetY.value = lockPosition;
           }
           return;
         }
-        lockableScrollableContentOffsetY.value = event.contentOffset.y;
+        _lockableScrollableContentOffsetY.value = y;
       },
       [
         scrollableRef,
@@ -100,7 +110,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
       (event, context) => {
         const y = event.contentOffset.y;
         scrollableContentOffsetY.value = y;
-        lockableScrollableContentOffsetY.value = y;
+        _lockableScrollableContentOffsetY.value = y;
         rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
         awaitingFirstScroll.value = true;
@@ -161,13 +171,13 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
           // @ts-ignore
           scrollTo(scrollableRef, 0, lockPosition, false);
           scrollableContentOffsetY.value = lockPosition;
-          lockableScrollableContentOffsetY.value = lockPosition;
+          _lockableScrollableContentOffsetY.value = lockPosition;
           return;
         }
 
         if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
           scrollableContentOffsetY.value = y;
-          lockableScrollableContentOffsetY.value = y;
+          _lockableScrollableContentOffsetY.value = y;
           rootScrollableContentOffsetY.value = y;
         }
       },
@@ -190,14 +200,14 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
             // @ts-ignore
             scrollTo(scrollableRef, 0, lockPosition, false);
             scrollableContentOffsetY.value = 0;
-            lockableScrollableContentOffsetY.value = 0;
+            _lockableScrollableContentOffsetY.value = 0;
           }
           return;
         }
 
         if (animatedAnimationState.value !== ANIMATION_STATE.RUNNING) {
           scrollableContentOffsetY.value = y;
-          lockableScrollableContentOffsetY.value = y;
+          _lockableScrollableContentOffsetY.value = y;
           rootScrollableContentOffsetY.value = y;
         }
       },

src/hooks/useScrollHandler.ts

@@ -1,4 +1,5 @@
 import {
+  SharedValue,
   runOnJS,
   useAnimatedRef,
   useAnimatedScrollHandler,
@@ -14,7 +15,8 @@ export const useScrollHandler = (
   onScrollBeginDrag?: ScrollableEvent,
   onScrollEndDrag?: ScrollableEvent,
   scrollBuffer?: number,
-  preserveScrollMomentum?: boolean
+  preserveScrollMomentum?: boolean,
+  lockableScrollableContentOffsetY?: SharedValue<number>,
 ) => {
   // refs
   const scrollableRef = useAnimatedRef<Scrollable>();
@@ -29,7 +31,7 @@ export const useScrollHandler = (
     handleOnEndDrag = noop,
     handleOnMomentumEnd = noop,
     handleOnMomentumBegin = noop,
-  } = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY, scrollBuffer, preserveScrollMomentum);
+  } = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY, scrollBuffer, preserveScrollMomentum, lockableScrollableContentOffsetY);
 
   // callbacks
   const scrollHandler = useAnimatedScrollHandler(

src/hooks/useScrollable.ts

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

src/types.d.ts

@@ -183,7 +183,8 @@ export type ScrollEventsHandlersHookType = (
   ref: React.RefObject<Scrollable>,
   contentOffsetY: SharedValue<number>,
   scrollBuffer: number | undefined,
-  preserveScrollMomentum: boolean | undefined
+  preserveScrollMomentum: boolean | undefined,
+  lockableScrollableContentOffsetY: SharedValue<number> | undefined
 ) => {
   handleOnScroll?: ScrollEventHandlerCallbackType;
   handleOnBeginDrag?: ScrollEventHandlerCallbackType;