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: hannojg

src/components/bottomSheetScrollable/types.d.ts

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

src/hooks/useScrollEventsHandlersDefault.ts

@@ -1,5 +1,5 @@
 import { State } from 'react-native-gesture-handler';
-import { scrollTo, useWorkletCallback } from 'react-native-reanimated';
+import { scrollTo, useWorkletCallback, useSharedValue, useAnimatedReaction } from 'react-native-reanimated';
 import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
 import type {
   ScrollEventHandlerCallbackType,
@@ -14,7 +14,8 @@ export type ScrollEventContextType = {
 
 export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
   scrollableRef,
-  scrollableContentOffsetY
+  scrollableContentOffsetY,
+  lockableScrollableContentOffsetY
 ) => {
   // hooks
   const {
@@ -25,6 +26,17 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
   } = useBottomSheetInternal();
 
+  const _lockableScrollableContentOffsetY = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => _lockableScrollableContentOffsetY.value,
+    _lockableScrollableContentOffsetY => {
+      if (lockableScrollableContentOffsetY) {
+        lockableScrollableContentOffsetY.value = _lockableScrollableContentOffsetY;
+      }
+    }
+  );
+
   //#region callbacks
   const handleOnScroll: ScrollEventHandlerCallbackType<ScrollEventContextType> =
     useWorkletCallback(
@@ -56,8 +68,10 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
           // @ts-ignore
           scrollTo(scrollableRef, 0, lockPosition, false);
           scrollableContentOffsetY.value = lockPosition;
+          _lockableScrollableContentOffsetY.value = lockPosition;
           return;
         }
+        _lockableScrollableContentOffsetY.value = y;
       },
       [
         scrollableRef,
@@ -70,6 +84,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     useWorkletCallback(
       ({ contentOffset: { y } }, context) => {
         scrollableContentOffsetY.value = y;
+        _lockableScrollableContentOffsetY.value = y;
         rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
 
@@ -103,11 +118,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 +146,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/useScrollHandler.ts

@@ -1,5 +1,6 @@
 import {
   runOnJS,
+  SharedValue,
   useAnimatedRef,
   useAnimatedScrollHandler,
   useSharedValue,
@@ -12,7 +13,8 @@ export const useScrollHandler = (
   useScrollEventsHandlers = useScrollEventsHandlersDefault,
   onScroll?: ScrollableEvent,
   onScrollBeginDrag?: ScrollableEvent,
-  onScrollEndDrag?: ScrollableEvent
+  onScrollEndDrag?: ScrollableEvent,
+  lockableScrollableContentOffsetY?: SharedValue<number>,
 ) => {
   // refs
   const scrollableRef = useAnimatedRef<Scrollable>();
@@ -27,7 +29,7 @@ export const useScrollHandler = (
     handleOnEndDrag = noop,
     handleOnMomentumEnd = noop,
     handleOnMomentumBegin = noop,
-  } = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY);
+  } = useScrollEventsHandlers(scrollableRef, scrollableContentOffsetY, lockableScrollableContentOffsetY);
 
   // callbacks
   const scrollHandler = useAnimatedScrollHandler(

src/types.d.ts

@@ -180,7 +180,8 @@ type ScrollEventHandlerCallbackType<C = never> = (
 
 export type ScrollEventsHandlersHookType = (
   ref: React.RefObject<Scrollable>,
-  contentOffsetY: SharedValue<number>
+  contentOffsetY: SharedValue<number>,
+  lockableScrollableContentOffsetY?: SharedValue<number>
 ) => {
   handleOnScroll?: ScrollEventHandlerCallbackType;
   handleOnBeginDrag?: ScrollEventHandlerCallbackType;