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

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

src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx

@@ -40,6 +40,7 @@ export function createBottomSheetScrollableComponent<T, P>(
       refreshControl,
       scrollBuffer,
       preserveScrollMomentum,
+      lockableScrollableContentOffsetY,
       // events
       onScroll,
       onScrollBeginDrag,
@@ -61,7 +62,8 @@ export function createBottomSheetScrollableComponent<T, P>(
         onScrollBeginDrag,
         onScrollEndDrag,
         scrollBuffer,
-        preserveScrollMomentum
+        preserveScrollMomentum,
+        lockableScrollableContentOffsetY
       );
     const {
       enableContentPanningGesture,

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

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

@@ -1,4 +1,4 @@
-import { scrollTo, useSharedValue, useWorkletCallback } from 'react-native-reanimated';
+import { scrollTo, useSharedValue, useWorkletCallback, useAnimatedReaction } from 'react-native-reanimated';
 import { useBottomSheetInternal } from './useBottomSheetInternal';
 import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
 import type {
@@ -16,7 +16,8 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
   scrollableRef,
   scrollableContentOffsetY,
   scrollBuffer,
-  preserveScrollMomentum
+  preserveScrollMomentum,
+  lockableScrollableContentOffsetY,
 ) => {
   // hooks
   const {
@@ -25,10 +26,19 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedAnimationState,
     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> =
@@ -71,11 +81,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 = event.contentOffset.y;
       },
       [
         scrollableRef,
@@ -89,7 +99,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;
@@ -150,12 +160,12 @@ 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;
         }
       },
@@ -178,13 +188,13 @@ 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

@@ -158,7 +158,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;