When setting scrollable, keep isScrollableLocked value if scrollable is scrolling (#16)

Author: lsdimagine

src/components/bottomSheet/BottomSheet.tsx

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

src/contexts/internal.ts

@@ -62,6 +62,7 @@ export interface BottomSheetInternalContextType
   animatedScrollableOverrideState: Animated.SharedValue<SCROLLABLE_STATE>;
   isScrollableLocked: Animated.SharedValue<boolean>;
   isScrollableRefreshable: Animated.SharedValue<boolean>;
+  isScrollEnded: Animated.SharedValue<boolean>;
   isContentHeightFixed: Animated.SharedValue<boolean>;
   isInTemporaryPosition: Animated.SharedValue<boolean>;
   shouldHandleKeyboardEvents: Animated.SharedValue<boolean>;

src/hooks/useScrollEventsHandlersDefault.ts

@@ -26,9 +26,9 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     animatedAnimationState,
     animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
     isScrollableLocked,
+    isScrollEnded,
   } = useBottomSheetInternal();
   const awaitingFirstScroll = useSharedValue(false);
-  const scrollEnded = useSharedValue(false);
   const _lockableScrollableContentOffsetY = useSharedValue(0);
 
   useAnimatedReaction(
@@ -74,7 +74,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
         }
 
         if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
-          if (!(preserveScrollMomentum && scrollEnded.value)) {
+          if (!(preserveScrollMomentum && isScrollEnded.value)) {
             const lockPosition = context.shouldLockInitialPosition
               ? context.initialContentOffsetY ?? 0
               : 0;
@@ -103,7 +103,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
         rootScrollableContentOffsetY.value = y;
         context.initialContentOffsetY = y;
         awaitingFirstScroll.value = true;
-        scrollEnded.value = false;
+        isScrollEnded.value = false;
 
         if (scrollBuffer) {
           if (y <= 0 && (
@@ -152,7 +152,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     useWorkletCallback(
       ({ contentOffset: { y }}, context) => {
         awaitingFirstScroll.value = false;
-        scrollEnded.value = true;
+        isScrollEnded.value = true;
         if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
           const lockPosition = context.shouldLockInitialPosition
             ? context.initialContentOffsetY ?? 0
@@ -181,7 +181,7 @@ export const useScrollEventsHandlersDefault: ScrollEventsHandlersHookType = (
     useWorkletCallback(
       ({ contentOffset: { y } }, context) => {
         if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) {
-          if (!(preserveScrollMomentum && scrollEnded.value)) {
+          if (!(preserveScrollMomentum && isScrollEnded.value)) {
             const lockPosition = context.shouldLockInitialPosition
               ? context.initialContentOffsetY ?? 0
               : 0;

src/hooks/useScrollable.ts

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

src/hooks/useScrollableSetter.ts

@@ -25,6 +25,7 @@ export const useScrollableSetter = (
     removeScrollableRef,
     animatedContainerHeight,
     animatedContentHeight,
+    isScrollEnded,
   } = useBottomSheetInternal();
 
   // callbacks
@@ -33,8 +34,9 @@ export const useScrollableSetter = (
     rootScrollableContentOffsetY.value = contentOffsetY.value;
     animatedScrollableType.value = type;
     isScrollableRefreshable.value = refreshable;
+    // Keep isScrollableLocked value if the scrollable is still scrolling
     // Android scrollview doesn't bounce so we need to set isScrollableLocked so that the sheet can be pulled up/down
-    isScrollableLocked.value = (!preserveScrollMomentum && !scrollBuffer) || (Platform.OS === 'android' && animatedContentHeight.value <= animatedContainerHeight.value);
+    isScrollableLocked.value = (!isScrollEnded.value && isScrollableLocked.value) || (!preserveScrollMomentum && !scrollBuffer) || (Platform.OS === 'android' && animatedContentHeight.value <= animatedContainerHeight.value);
     isContentHeightFixed.value = false;
 
     // set current scrollable ref