diff --git a/example/src/screens/advanced/KeyboardHandlingExample.tsx b/example/src/screens/advanced/KeyboardHandlingExample.tsx
index f31896df8..e490b547d 100644
--- a/example/src/screens/advanced/KeyboardHandlingExample.tsx
+++ b/example/src/screens/advanced/KeyboardHandlingExample.tsx
@@ -18,7 +18,7 @@ const KeyboardHandlingExample = () => {
   const bottomSheetRef = useRef<BottomSheet>(null);
 
   // variables
-  const snapPoints = useMemo(() => [SEARCH_HANDLE_HEIGHT, 300], []);
+  const snapPoints = useMemo(() => [SEARCH_HANDLE_HEIGHT + 34, 500], []);
 
   // callbacks
   const handleToggleKeyboardBehavior = useCallback(() => {
@@ -71,13 +71,12 @@ const KeyboardHandlingExample = () => {
       <Button label="Close" onPress={handleClosePress} />
       <BottomSheet
         ref={bottomSheetRef}
-        index={1}
         snapPoints={snapPoints}
         keyboardBehavior={keyboardBehavior}
         keyboardBlurBehavior={keyboardBlurBehavior}
         handleComponent={SearchHandle}
       >
-        <ContactList count={10} type="ScrollView" />
+        <ContactList count={12} type="FlatList" />
       </BottomSheet>
     </View>
   );
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
index 26e6b56eb..486809e12 100644
--- a/src/components/bottomSheet/BottomSheet.tsx
+++ b/src/components/bottomSheet/BottomSheet.tsx
@@ -20,6 +20,7 @@ import Animated, {
   useWorkletCallback,
 } from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
+import { clamp, snapPoint } from 'react-native-redash';
 import {
   useInteractivePanGestureHandler,
   useScrollable,
@@ -47,6 +48,9 @@ import {
   SCROLLABLE_STATE,
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
+  KEYBOARD_DISMISS_THRESHOLD,
+  SCROLLABLE_TYPE,
+  WINDOW_HEIGHT,
 } from '../../constants';
 import {
   animate,
@@ -59,7 +63,6 @@ import {
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,
-  DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND,
   DEFAULT_ANIMATE_ON_MOUNT,
   DEFAULT_KEYBOARD_BEHAVIOR,
   DEFAULT_KEYBOARD_BLUR_BEHAVIOR,
@@ -72,8 +75,12 @@ import {
   DEFAULT_ANIMATION_CONFIGS,
   DEFAULT_KEYBOARD_INPUT_MODE,
 } from './constants';
-import { ScrollableRef, BottomSheetMethods, Insets } from '../../types';
+import type { BottomSheetMethods, Insets } from '../../types';
 import type { BottomSheetProps } from './types';
+import type {
+  GestureEventContextType,
+  GestureEventType,
+} from '../../hooks/useInteractivePanGestureHandler';
 import { styles } from './styles';
 
 Animated.addWhitelistedUIProps({
@@ -100,7 +107,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       enableContentPanningGesture = DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
       enableHandlePanningGesture = DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
       enableOverDrag = DEFAULT_ENABLE_OVER_DRAG,
-      enableFlashScrollableIndicatorOnExpand = DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND,
       enablePanDownToClose = DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
       overDragResistanceFactor = DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
       style: _providedStyle,
@@ -200,9 +206,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animatedPosition = useSharedValue(INITIAL_POSITION);
     const animatedNextPosition = useSharedValue(0);
     const animatedNextPositionIndex = useSharedValue(0);
-    //#endregion
 
-    //#region conditional variables
+    // conditional
+    const isAnimatedOnMount = useSharedValue(false);
     const isContentHeightFixed = useSharedValue(false);
     const isLayoutCalculated = useDerivedValue(() => {
       let isContainerHeightCalculated = false;
@@ -249,25 +255,36 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       );
     });
     const isInTemporaryPosition = useSharedValue(false);
+
+    // gesture
+    const animatedContentGestureState = useSharedValue<State>(
+      State.UNDETERMINED
+    );
+    const animatedHandleGestureState = useSharedValue<State>(
+      State.UNDETERMINED
+    );
     //#endregion
 
     //#region hooks variables
     // scrollable variables
     const {
-      isScrollableRefreshable,
+      scrollableType: animatedScrollableType,
       scrollableContentOffsetY,
+      isScrollableRefreshable,
       setScrollableRef,
       removeScrollableRef,
-      flashScrollableIndicators,
     } = useScrollable();
     // keyboard
     const {
-      state: keyboardState,
-      height: keyboardHeight,
+      state: animatedKeyboardState,
+      height: animatedKeyboardHeight,
       animationDuration: keyboardAnimationDuration,
       animationEasing: keyboardAnimationEasing,
       shouldHandleKeyboardEvents,
     } = useKeyboard();
+    /**
+     * Returns keyboard height that in the root container.
+     */
     const getKeyboardHeightInContainer = useWorkletCallback(() => {
       'worklet';
       /**
@@ -278,15 +295,14 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         return 0;
       }
       return $modal
-        ? keyboardHeight.value -
+        ? animatedKeyboardHeight.value -
             Math.abs(bottomInset - animatedContainerOffset.value.bottom)
-        : keyboardHeight.value - animatedContainerOffset.value.bottom;
+        : animatedKeyboardHeight.value - animatedContainerOffset.value.bottom;
     }, [$modal, bottomInset]);
     //#endregion
 
     //#region state/dynamic variables
     // states
-    const isAnimatedOnMount = useSharedValue(false);
     const animatedAnimationState = useSharedValue(ANIMATION_STATE.UNDETERMINED);
     const animatedSheetState = useDerivedValue(() => {
       // closed position = position >= container height
@@ -350,7 +366,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
        * current scrollable scroll position.
        */
       if (
-        keyboardState.value === KEYBOARD_STATE.SHOWN &&
+        animatedKeyboardState.value === KEYBOARD_STATE.SHOWN &&
         animatedAnimationState.value === ANIMATION_STATE.RUNNING
       ) {
         return SCROLLABLE_STATE.UNLOCKED;
@@ -377,7 +393,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       if (
         (keyboardBehavior === KEYBOARD_BEHAVIOR.none ||
           keyboardBehavior === KEYBOARD_BEHAVIOR.extend) &&
-        keyboardState.value === KEYBOARD_STATE.SHOWN
+        animatedKeyboardState.value === KEYBOARD_STATE.SHOWN
       ) {
         return contentHeight - keyboardHeightInContainer;
       }
@@ -386,7 +402,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         keyboardBehavior === KEYBOARD_BEHAVIOR.fillParent &&
         isInTemporaryPosition.value
       ) {
-        if (keyboardState.value === KEYBOARD_STATE.SHOWN) {
+        if (animatedKeyboardState.value === KEYBOARD_STATE.SHOWN) {
           return (
             animatedContainerHeight.value -
             animatedHandleHeight.value -
@@ -400,7 +416,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
         isInTemporaryPosition.value
       ) {
-        if (keyboardState.value === KEYBOARD_STATE.SHOWN) {
+        if (animatedKeyboardState.value === KEYBOARD_STATE.SHOWN) {
           if (
             keyboardHeightInContainer + animatedSheetHeight.value >
             animatedContainerHeight.value
@@ -460,22 +476,69 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#endregion
 
     //#region private methods
-    const refreshUIElements = useCallback(() => {
-      const currentPositionIndex = Math.max(animatedCurrentIndex.value, 0);
-      const snapPoints = animatedSnapPoints.value;
+    /**
+     * Calculate the next position based on keyboard state.
+     */
+    const getNextPosition = useWorkletCallback(
+      function getNextPosition() {
+        'worklet';
+        const currentIndex = animatedCurrentIndex.value;
+        const snapPoints = animatedSnapPoints.value;
+        const keyboardState = animatedKeyboardState.value;
 
-      if (
-        enableFlashScrollableIndicatorOnExpand &&
-        currentPositionIndex === snapPoints.length - 1
-      ) {
-        flashScrollableIndicators();
-      }
-    }, [
-      animatedSnapPoints,
-      animatedCurrentIndex,
-      enableFlashScrollableIndicatorOnExpand,
-      flashScrollableIndicators,
-    ]);
+        /**
+         * Handle restore sheet position on blur
+         */
+        if (
+          keyboardBlurBehavior === KEYBOARD_BLUR_BEHAVIOR.restore &&
+          keyboardState === KEYBOARD_STATE.HIDDEN &&
+          animatedContentGestureState.value !== State.ACTIVE &&
+          animatedHandleGestureState.value !== State.ACTIVE
+        ) {
+          isInTemporaryPosition.value = false;
+          const nextPosition = snapPoints[currentIndex];
+          return nextPosition;
+        }
+
+        /**
+         * Handle extend behavior
+         */
+        if (
+          keyboardBehavior === KEYBOARD_BEHAVIOR.extend &&
+          keyboardState === KEYBOARD_STATE.SHOWN
+        ) {
+          const nextPosition = snapPoints[snapPoints.length - 1];
+          return nextPosition;
+        }
+
+        /**
+         * Handle full screen behavior
+         */
+        if (
+          keyboardBehavior === KEYBOARD_BEHAVIOR.fillParent &&
+          keyboardState === KEYBOARD_STATE.SHOWN
+        ) {
+          isInTemporaryPosition.value = true;
+          return 0;
+        }
+
+        /**
+         * handle interactive behavior
+         */
+        if (
+          keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
+          keyboardState === KEYBOARD_STATE.SHOWN
+        ) {
+          isInTemporaryPosition.value = true;
+          const nextPosition = snapPoints[snapPoints.length - 1];
+          const keyboardHeightInContainer = getKeyboardHeightInContainer();
+          return Math.max(0, nextPosition - keyboardHeightInContainer);
+        }
+
+        return snapPoints[currentIndex];
+      },
+      [keyboardBehavior, keyboardBlurBehavior]
+    );
     const handleOnChange = useCallback(
       function handleOnChange(index: number) {
         print({
@@ -490,7 +553,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         if (
           Platform.OS === 'android' &&
           isInTemporaryPosition.value === false &&
-          keyboardState.value === KEYBOARD_STATE.SHOWN
+          animatedKeyboardState.value === KEYBOARD_STATE.SHOWN
         ) {
           Keyboard.dismiss();
         }
@@ -502,7 +565,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       [
         _providedOnChange,
         animatedCurrentIndex,
-        keyboardState,
+        animatedKeyboardState,
         isInTemporaryPosition,
       ]
     );
@@ -519,15 +582,10 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       },
       [_providedOnAnimate, animatedSnapPoints, animatedCurrentIndex]
     );
-    const handleSettingScrollableRef = useCallback(
-      (scrollableRef: ScrollableRef) => {
-        setScrollableRef(scrollableRef);
-        refreshUIElements();
-      },
-      [setScrollableRef, refreshUIElements]
-    );
     const animateToPositionCompleted = useWorkletCallback(() => {
       animatedAnimationState.value = ANIMATION_STATE.STOPPED;
+      animatedNextPosition.value = Number.NEGATIVE_INFINITY;
+      animatedNextPositionIndex.value = Number.NEGATIVE_INFINITY;
     });
     const animateToPosition = useWorkletCallback(
       function animateToPosition(
@@ -535,7 +593,11 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         velocity: number = 0,
         configs?: Animated.WithTimingConfig | Animated.WithSpringConfig
       ) {
-        if (position === animatedPosition.value) {
+        if (
+          position === animatedPosition.value ||
+          position === undefined ||
+          position === animatedNextPosition.value
+        ) {
           return;
         }
 
@@ -606,45 +668,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     //#endregion
 
-    //#region gesture interaction hooks
-    const [contentPanGestureHandler, contentPanGestureState] =
-      useInteractivePanGestureHandler({
-        type: GESTURE_SOURCE.SCROLLABLE,
-        enableOverDrag,
-        enablePanDownToClose,
-        overDragResistanceFactor,
-        keyboardState,
-        keyboardHeight,
-        keyboardBehavior,
-        animatedPosition,
-        animatedSnapPoints,
-        animatedClosedPosition,
-        animatedContainerHeight,
-        isInTemporaryPosition,
-        isScrollableRefreshable,
-        scrollableContentOffsetY,
-        animateToPoint: animateToPosition,
-      });
-    const [handlePanGestureHandler, handlePanGestureState] =
-      useInteractivePanGestureHandler({
-        type: GESTURE_SOURCE.HANDLE,
-        enableOverDrag,
-        enablePanDownToClose,
-        overDragResistanceFactor,
-        keyboardState,
-        keyboardHeight,
-        keyboardBehavior,
-        animatedPosition,
-        animatedSnapPoints,
-        animatedClosedPosition,
-        animatedContainerHeight,
-        isInTemporaryPosition,
-        isScrollableRefreshable,
-        scrollableContentOffsetY,
-        animateToPoint: animateToPosition,
-      });
-    //#endregion
-
     //#region public methods
     const handleSnapToIndex = useCallback(
       function handleSnapToIndex(
@@ -877,6 +900,364 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     }));
     //#endregion
 
+    //#region gesture methods
+    const handleGestureStart = useWorkletCallback(
+      function handleGestureStart(__, _, context: GestureEventContextType) {
+        'worklet';
+        // cancel current animation
+        cancelAnimation(animatedPosition);
+
+        // store current animated position
+        context.initialPosition = animatedPosition.value;
+        context.initialKeyboardState = animatedKeyboardState.value;
+
+        /**
+         * if the scrollable content is scrolled, then
+         * we lock the position.
+         */
+        if (scrollableContentOffsetY.value > 0) {
+          context.isScrollablePositionLocked = true;
+        }
+      },
+      [animatedPosition, animatedKeyboardState, scrollableContentOffsetY]
+    );
+    const handleGestureActive = useWorkletCallback(
+      function handleGestureActive(
+        type: GESTURE_SOURCE,
+        { translationY }: GestureEventType,
+        context: GestureEventContextType
+      ) {
+        'worklet';
+        let highestSnapPoint =
+          animatedSnapPoints.value[animatedSnapPoints.value.length - 1];
+        /**
+         * if keyboard is shown, then we set the highest point to the current
+         * position which includes the keyboard height.
+         */
+        if (
+          isInTemporaryPosition.value &&
+          context.initialKeyboardState === KEYBOARD_STATE.SHOWN
+        ) {
+          highestSnapPoint = context.initialPosition;
+        }
+
+        /**
+         * if current position is out of provided `snapPoints` and smaller then
+         * highest snap pont, then we set the highest point to the current position.
+         */
+        if (
+          isInTemporaryPosition.value &&
+          context.initialPosition < highestSnapPoint
+        ) {
+          highestSnapPoint = context.initialPosition;
+        }
+
+        const lowestSnapPoint = enablePanDownToClose
+          ? animatedContainerHeight.value
+          : animatedSnapPoints.value[0];
+
+        /**
+         * if scrollable is refreshable and sheet position at the highest
+         * point, then do not interact with current gesture.
+         */
+        if (
+          type === GESTURE_SOURCE.SCROLLABLE &&
+          isScrollableRefreshable.value &&
+          animatedPosition.value === highestSnapPoint
+        ) {
+          return;
+        }
+
+        /**
+         * a negative scrollable content offset to be subtracted from accumulated
+         * current position and gesture translation Y to allow user to drag the sheet,
+         * when scrollable position at the top.
+         * a negative scrollable content offset when the scrollable is not locked.
+         */
+        const negativeScrollableContentOffset =
+          (context.initialPosition === highestSnapPoint &&
+            type === GESTURE_SOURCE.SCROLLABLE) ||
+          !context.isScrollablePositionLocked
+            ? scrollableContentOffsetY.value * -1
+            : 0;
+
+        /**
+         * an accumulated value of starting position with gesture translation y.
+         */
+        const draggedPosition = context.initialPosition + translationY;
+
+        /**
+         * an accumulated value of dragged position and negative scrollable content offset,
+         * this will insure locking sheet position when user is scrolling the scrollable until,
+         * they reach to the top of the scrollable.
+         */
+        const accumulatedDraggedPosition =
+          draggedPosition + negativeScrollableContentOffset;
+
+        /**
+         * a clamped value of the accumulated dragged position, to insure keeping the dragged
+         * position between the highest and lowest snap points.
+         */
+        const clampedPosition = clamp(
+          accumulatedDraggedPosition,
+          highestSnapPoint,
+          lowestSnapPoint
+        );
+
+        /**
+         * if scrollable position is locked and the animated position
+         * reaches the highest point, then we unlock the scrollable position.
+         */
+        if (
+          context.isScrollablePositionLocked &&
+          type === GESTURE_SOURCE.SCROLLABLE &&
+          animatedPosition.value === highestSnapPoint
+        ) {
+          context.isScrollablePositionLocked = false;
+        }
+
+        /**
+         * dismiss the keyboard when panning down, when:
+         * - keyboard is shown.
+         * - distance is more than threshold.
+         * - scrollable content is on the top.
+         * -
+         */
+        if (
+          animatedKeyboardState.value === KEYBOARD_STATE.SHOWN &&
+          translationY > KEYBOARD_DISMISS_THRESHOLD &&
+          scrollableContentOffsetY.value === 0 &&
+          Platform.OS === 'android'
+        ) {
+          runOnJS(Keyboard.dismiss)();
+        }
+
+        /**
+         * over-drag implementation.
+         */
+        if (enableOverDrag) {
+          if (
+            type === GESTURE_SOURCE.HANDLE &&
+            draggedPosition < highestSnapPoint
+          ) {
+            const resistedPosition =
+              highestSnapPoint -
+              Math.sqrt(1 + (highestSnapPoint - draggedPosition)) *
+                overDragResistanceFactor;
+            animatedPosition.value = resistedPosition;
+            return;
+          }
+
+          if (
+            type === GESTURE_SOURCE.HANDLE &&
+            draggedPosition > lowestSnapPoint
+          ) {
+            const resistedPosition =
+              lowestSnapPoint +
+              Math.sqrt(1 + (draggedPosition - lowestSnapPoint)) *
+                overDragResistanceFactor;
+            animatedPosition.value = resistedPosition;
+            return;
+          }
+
+          if (
+            type === GESTURE_SOURCE.SCROLLABLE &&
+            draggedPosition + negativeScrollableContentOffset > lowestSnapPoint
+          ) {
+            const resistedPosition =
+              lowestSnapPoint +
+              Math.sqrt(
+                1 +
+                  (draggedPosition +
+                    negativeScrollableContentOffset -
+                    lowestSnapPoint)
+              ) *
+                overDragResistanceFactor;
+            animatedPosition.value = resistedPosition;
+            return;
+          }
+        }
+
+        animatedPosition.value = clampedPosition;
+      },
+      [
+        enableOverDrag,
+        enablePanDownToClose,
+        overDragResistanceFactor,
+        animatedContainerHeight,
+        animatedKeyboardState,
+        animatedPosition,
+        animatedSnapPoints,
+        isInTemporaryPosition,
+        isScrollableRefreshable,
+        scrollableContentOffsetY,
+      ]
+    );
+    const handleGestureEnd = useCallback(
+      function handleGestureEnd(
+        type: GESTURE_SOURCE,
+        { translationY, absoluteY, velocityY }: GestureEventType,
+        context: GestureEventContextType
+      ) {
+        'worklet';
+        runOnJS(print)({
+          component: BottomSheet.name,
+          method: handleGestureEnd.name,
+        });
+
+        const highestSnapPoint = animatedHighestSnapPoint.value;
+
+        /**
+         * if scrollable is refreshable and sheet position at the highest
+         * point, then do not interact with current gesture.
+         */
+        if (
+          type === GESTURE_SOURCE.SCROLLABLE &&
+          isScrollableRefreshable.value &&
+          animatedPosition.value === highestSnapPoint
+        ) {
+          return;
+        }
+
+        /**
+         * if the sheet is in a temporary position and the gesture ended above
+         * the current position, then we snap back to the temporary position.
+         */
+        if (
+          isInTemporaryPosition.value &&
+          context.initialPosition >= animatedPosition.value
+        ) {
+          if (context.initialPosition > animatedPosition.value) {
+            animateToPosition(context.initialPosition, velocityY / 2);
+          }
+          return;
+        }
+
+        /**
+         * close keyboard if current position is below the recorded
+         * start position and keyboard still shown.
+         */
+        const isScrollable =
+          animatedScrollableType.value !== SCROLLABLE_TYPE.UNDETERMINED &&
+          animatedScrollableType.value !== SCROLLABLE_TYPE.VIEW;
+
+        /**
+         * if keyboard is shown and the sheet is dragged down,
+         * then we dismiss the keyboard.
+         */
+        if (
+          context.initialKeyboardState === KEYBOARD_STATE.SHOWN &&
+          animatedPosition.value > context.initialPosition
+        ) {
+          /**
+           * if the platform is ios, current content is scrollable and
+           * the end touch point is below the keyboard position then
+           * we exit the method.
+           *
+           * because the the keyboard dismiss is interactive in iOS.
+           */
+          if (
+            !(
+              Platform.OS === 'ios' &&
+              isScrollable &&
+              absoluteY > WINDOW_HEIGHT - animatedKeyboardHeight.value
+            )
+          ) {
+            runOnJS(Keyboard.dismiss)();
+          }
+        }
+
+        /**
+         * reset isInTemporaryPosition value
+         */
+        if (isInTemporaryPosition.value) {
+          isInTemporaryPosition.value = false;
+        }
+
+        /**
+         * clone snap points array, and insert the container height
+         * if pan down to close is enabled.
+         */
+        const snapPoints = animatedSnapPoints.value.slice();
+        if (enablePanDownToClose) {
+          snapPoints.unshift(animatedClosedPosition.value);
+        }
+
+        /**
+         * calculate the destination point, using redash.
+         */
+        const destinationPoint = snapPoint(
+          translationY + context.initialPosition,
+          velocityY,
+          snapPoints
+        );
+
+        /**
+         * if destination point is the same as the current position,
+         * then no need to perform animation.
+         */
+        if (destinationPoint === animatedPosition.value) {
+          return;
+        }
+
+        /**
+         * if gesture was picked by scrollable and did not move the sheet,
+         * then exit the method to prevent snapping.
+         */
+        if (
+          (type === GESTURE_SOURCE.SCROLLABLE
+            ? scrollableContentOffsetY.value
+            : 0) > 0 &&
+          context.initialPosition === highestSnapPoint &&
+          animatedPosition.value === highestSnapPoint
+        ) {
+          return;
+        }
+
+        /**
+         * if gesture started by scrollable dragging the sheet than continue scrolling,
+         * then exit the method to prevent snapping.
+         */
+        if (
+          type === GESTURE_SOURCE.SCROLLABLE &&
+          scrollableContentOffsetY.value > 0 &&
+          animatedPosition.value === highestSnapPoint
+        ) {
+          return;
+        }
+
+        animateToPosition(destinationPoint, velocityY / 2);
+      },
+      [
+        enablePanDownToClose,
+        animateToPosition,
+        animatedClosedPosition,
+        animatedHighestSnapPoint,
+        animatedKeyboardHeight,
+        animatedPosition,
+        animatedScrollableType,
+        animatedSnapPoints,
+        scrollableContentOffsetY,
+        isInTemporaryPosition,
+        isScrollableRefreshable,
+      ]
+    );
+    const contentPanGestureHandler = useInteractivePanGestureHandler(
+      GESTURE_SOURCE.SCROLLABLE,
+      animatedContentGestureState,
+      handleGestureStart,
+      handleGestureActive,
+      handleGestureEnd
+    );
+    const handlePanGestureHandler = useInteractivePanGestureHandler(
+      GESTURE_SOURCE.HANDLE,
+      animatedHandleGestureState,
+      handleGestureStart,
+      handleGestureActive,
+      handleGestureEnd
+    );
+    //#endregion
+
     //#region contexts variables
     const internalContextVariables = useMemo(
       () => ({
@@ -884,8 +1265,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedAnimationState,
         animatedSheetState,
         animatedScrollableState,
-        animatedKeyboardState: keyboardState,
-        animatedKeyboardHeight: keyboardHeight,
+        animatedKeyboardState,
+        animatedScrollableType,
+        animatedKeyboardHeight,
         animatedIndex,
         animatedPosition,
         animatedContentHeight,
@@ -905,23 +1287,24 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         failOffsetY: _providedFailOffsetY,
         contentPanGestureHandler,
         getKeyboardHeightInContainer,
-        setScrollableRef: handleSettingScrollableRef,
+        setScrollableRef,
         removeScrollableRef,
       }),
       [
         animatedIndex,
         animatedPosition,
         animatedContentHeight,
+        animatedScrollableType,
         getKeyboardHeightInContainer,
         animatedFooterHeight,
         animatedContainerHeight,
         animatedHandleHeight,
         animatedAnimationState,
-        keyboardState,
-        keyboardHeight,
+        animatedKeyboardState,
+        animatedKeyboardHeight,
         animatedSheetState,
         contentPanGestureHandler,
-        handleSettingScrollableRef,
+        setScrollableRef,
         removeScrollableRef,
         shouldHandleKeyboardEvents,
         animatedScrollableState,
@@ -1074,6 +1457,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     /**
      * React to `snapPoints` change, to insure that the sheet position reflect
      * to the current point correctly.
+     *
+     * @alias OnSnapPointsChange
      */
     useAnimatedReaction(
       () => animatedSnapPoints.value,
@@ -1092,6 +1477,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           method: 'useAnimatedReaction::OnSnapPointChange',
           params: {
             animatedSnapPoints: _animatedSnapPoints,
+            prev: _previousAnimatedSnapPoints,
             animatedCurrentIndex: animatedCurrentIndex.value,
           },
         });
@@ -1110,6 +1496,8 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
               : animatedNextPosition.value;
         } else if (animatedCurrentIndex.value === -1) {
           nextPosition = animatedClosedPosition.value;
+        } else if (isInTemporaryPosition.value) {
+          nextPosition = getNextPosition();
         } else {
           nextPosition = _animatedSnapPoints[animatedCurrentIndex.value];
         }
@@ -1118,76 +1506,40 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
 
     /**
-     * React to keyboard appearance.
+     * React to keyboard appearance state.
+     *
+     * @alias OnKeyboardStateChange
      */
     useAnimatedReaction(
-      () => keyboardState.value,
+      () => animatedKeyboardState.value,
       (_keyboardState, _previousKeyboardState) => {
-        if (_keyboardState === _previousKeyboardState) {
+        if (
+          _keyboardState === _previousKeyboardState ||
+          /**
+           * if new keyboard state is hidden and blur behavior is none, then exit the method
+           */
+          (_keyboardState === KEYBOARD_STATE.HIDDEN &&
+            keyboardBlurBehavior === KEYBOARD_BLUR_BEHAVIOR.none)
+        ) {
           return;
         }
 
-        const snapPoints = animatedSnapPoints.value;
-        const keyboardHeightInContainer = getKeyboardHeightInContainer();
+        runOnJS(print)({
+          component: BottomSheet.name,
+          method: 'useAnimatedReaction::OnKeyboardStateChange',
+          params: {
+            keyboardState: _keyboardState,
+          },
+        });
+
         let animationConfigs = getKeyboardAnimationConfigs(
           keyboardAnimationEasing.value,
           keyboardAnimationDuration.value
         );
-
-        /**
-         * Handle restore sheet position on blur
-         */
-        if (
-          keyboardBlurBehavior === KEYBOARD_BLUR_BEHAVIOR.restore &&
-          _keyboardState === KEYBOARD_STATE.HIDDEN &&
-          contentPanGestureState.value !== State.ACTIVE &&
-          handlePanGestureState.value !== State.ACTIVE
-        ) {
-          isInTemporaryPosition.value = false;
-          const newSnapPoint = snapPoints[animatedCurrentIndex.value];
-          animateToPosition(newSnapPoint, 0, animationConfigs);
-        }
-
-        /**
-         * Handle extend behavior
-         */
-        if (
-          keyboardBehavior === KEYBOARD_BEHAVIOR.extend &&
-          _keyboardState === KEYBOARD_STATE.SHOWN
-        ) {
-          const newSnapPoint = snapPoints[snapPoints.length - 1];
-          animateToPosition(newSnapPoint, 0, animationConfigs);
-          return;
-        }
-
-        /**
-         * Handle full screen behavior
-         */
-        if (
-          keyboardBehavior === KEYBOARD_BEHAVIOR.fillParent &&
-          _keyboardState === KEYBOARD_STATE.SHOWN
-        ) {
-          isInTemporaryPosition.value = true;
-          animateToPosition(0, 0, animationConfigs);
-          return;
-        }
-
-        /**
-         * handle interactive behavior
-         */
-        if (
-          keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
-          _keyboardState === KEYBOARD_STATE.SHOWN
-        ) {
-          isInTemporaryPosition.value = true;
-          const newSnapPoint = snapPoints[snapPoints.length - 1];
-          animateToPosition(
-            Math.max(0, newSnapPoint - keyboardHeightInContainer),
-            0,
-            animationConfigs
-          );
-        }
-      }
+        const nextPosition = getNextPosition();
+        animateToPosition(nextPosition, 0, animationConfigs);
+      },
+      [keyboardBlurBehavior, getNextPosition]
     );
 
     /**
@@ -1215,15 +1567,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
 
     /**
-     * reaction to trigger `handleOnChange`
+     * React to internal variables to detect change in snap position.
+     *
+     * @alias OnChange
      */
     useAnimatedReaction(
       () => ({
         _animatedIndex: animatedIndex.value,
         _animatedPosition: animatedPosition.value,
         _animationState: animatedAnimationState.value,
-        _contentGestureState: contentPanGestureState.value,
-        _handleGestureState: handlePanGestureState.value,
+        _contentGestureState: animatedContentGestureState.value,
+        _handleGestureState: animatedHandleGestureState.value,
       }),
       ({
         _animatedIndex,
@@ -1251,7 +1605,6 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
 
           animatedCurrentIndex.value = _animatedIndex;
           runOnJS(handleOnChange)(_animatedIndex);
-          runOnJS(refreshUIElements)();
         }
       },
       [handleOnChange]
diff --git a/src/components/bottomSheet/constants.ts b/src/components/bottomSheet/constants.ts
index 6a35344fe..5370ed09e 100644
--- a/src/components/bottomSheet/constants.ts
+++ b/src/components/bottomSheet/constants.ts
@@ -24,7 +24,6 @@ const DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = 2.5;
 const DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = true;
 const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
 const DEFAULT_ENABLE_OVER_DRAG = true;
-const DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND = true;
 const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
 const DEFAULT_ANIMATE_ON_MOUNT = false;
 const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.none;
@@ -52,7 +51,6 @@ export {
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,
   DEFAULT_ENABLE_HANDLE_PANNING_GESTURE,
   DEFAULT_ENABLE_OVER_DRAG,
-  DEFAULT_ENABLE_FLASH_SCROLLABLE_INDICATOR_ON_EXPAND,
   DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE,
   DEFAULT_ANIMATE_ON_MOUNT,
   DEFAULT_KEYBOARD_BEHAVIOR,
diff --git a/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx b/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx
index 207fe3529..6d3c1b797 100644
--- a/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx
+++ b/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx
@@ -4,6 +4,7 @@ import {
   FlatListProps as RNFlatListProps,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
 import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
 import type {
   BottomSheetFlatListMethods,
@@ -13,11 +14,10 @@ import type {
 const AnimatedFlatList =
   Animated.createAnimatedComponent<RNFlatListProps<any>>(RNFlatList);
 
-const BottomSheetFlatListComponent =
-  createBottomSheetScrollableComponent<
-    BottomSheetFlatListMethods,
-    BottomSheetFlatListProps<any>
-  >(AnimatedFlatList);
+const BottomSheetFlatListComponent = createBottomSheetScrollableComponent<
+  BottomSheetFlatListMethods,
+  BottomSheetFlatListProps<any>
+>(SCROLLABLE_TYPE.FLATLIST, AnimatedFlatList);
 
 const BottomSheetFlatList = memo(BottomSheetFlatListComponent);
 BottomSheetFlatList.displayName = 'BottomSheetFlatList';
diff --git a/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx b/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx
index db5665639..6463c4ddf 100644
--- a/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx
+++ b/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx
@@ -4,6 +4,7 @@ import {
   ScrollViewProps as RNScrollViewProps,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
 import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
 import type {
   BottomSheetScrollViewMethods,
@@ -13,11 +14,10 @@ import type {
 const AnimatedScrollView =
   Animated.createAnimatedComponent<RNScrollViewProps>(RNScrollView);
 
-const BottomSheetScrollViewComponent =
-  createBottomSheetScrollableComponent<
-    BottomSheetScrollViewMethods,
-    BottomSheetScrollViewProps
-  >(AnimatedScrollView);
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps
+>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
 
 const BottomSheetScrollView = memo(BottomSheetScrollViewComponent);
 BottomSheetScrollView.displayName = 'BottomSheetScrollView';
diff --git a/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx b/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx
index 5efb7c5cc..6e046f192 100644
--- a/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx
+++ b/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx
@@ -5,6 +5,7 @@ import {
   SectionListProps as RNSectionListProps,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
 import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
 import type {
   BottomSheetSectionListMethods,
@@ -14,11 +15,10 @@ import type {
 const AnimatedSectionList =
   Animated.createAnimatedComponent<RNSectionListProps<any>>(RNSectionList);
 
-const BottomSheetSectionListComponent =
-  createBottomSheetScrollableComponent<
-    BottomSheetSectionListMethods,
-    BottomSheetSectionListProps<any, DefaultSectionT>
-  >(AnimatedSectionList);
+const BottomSheetSectionListComponent = createBottomSheetScrollableComponent<
+  BottomSheetSectionListMethods,
+  BottomSheetSectionListProps<any, DefaultSectionT>
+>(SCROLLABLE_TYPE.SECTIONLIST, AnimatedSectionList);
 
 const BottomSheetSectionList = memo(BottomSheetSectionListComponent);
 BottomSheetSectionList.displayName = 'BottomSheetSectionList';
diff --git a/src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx b/src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx
index a39871f83..df2ad015e 100644
--- a/src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx
+++ b/src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx
@@ -4,6 +4,7 @@ import {
   VirtualizedListProps as RNVirtualizedListProps,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
 import { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';
 import type {
   BottomSheetVirtualizedListMethods,
@@ -19,7 +20,7 @@ const BottomSheetVirtualizedListComponent =
   createBottomSheetScrollableComponent<
     BottomSheetVirtualizedListMethods,
     BottomSheetVirtualizedListProps<any>
-  >(AnimatedVirtualizedList);
+  >(SCROLLABLE_TYPE.VIRTUALIZEDLIST, AnimatedVirtualizedList);
 
 const BottomSheetVirtualizedList = memo(BottomSheetVirtualizedListComponent);
 BottomSheetVirtualizedList.displayName = 'BottomSheetVirtualizedList';
diff --git a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
index ec79fe768..b01c4453e 100644
--- a/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
+++ b/src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
@@ -5,15 +5,17 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
+import { Platform } from 'react-native';
 import { useAnimatedStyle } from 'react-native-reanimated';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 import BottomSheetDraggableView from '../bottomSheetDraggableView';
 import BottomSheetRefreshControl from '../bottomSheetRefreshControl';
 import { useScrollableInternal, useBottomSheetInternal } from '../../hooks';
+import { SCROLLABLE_TYPE } from '../../constants';
 import { styles } from './styles';
-import { Platform } from 'react-native';
 
 export function createBottomSheetScrollableComponent<T, P>(
+  type: SCROLLABLE_TYPE,
   ScrollableComponent: any
 ) {
   return forwardRef<T, P>((props, ref) => {
@@ -21,6 +23,7 @@ export function createBottomSheetScrollableComponent<T, P>(
     const {
       focusHook: useFocusHook = useEffect,
       overScrollMode = 'never',
+      keyboardDismissMode = 'interactive',
       style,
       // refresh control
       refreshing,
@@ -41,7 +44,7 @@ export function createBottomSheetScrollableComponent<T, P>(
       scrollableAnimatedProps,
       handleScrollEvent,
       handleSettingScrollable,
-    } = useScrollableInternal(onRefresh !== undefined);
+    } = useScrollableInternal(type, onRefresh !== undefined);
     const { enableContentPanningGesture, animatedFooterHeight } =
       useBottomSheetInternal();
     //#endregion
@@ -91,6 +94,7 @@ export function createBottomSheetScrollableComponent<T, P>(
                   // @ts-ignore
                   ref={scrollableRef}
                   overScrollMode={overScrollMode}
+                  keyboardDismissMode={keyboardDismissMode}
                   scrollEventThrottle={16}
                   onScroll={handleScrollEvent}
                   animatedProps={scrollableAnimatedProps}
@@ -109,6 +113,7 @@ export function createBottomSheetScrollableComponent<T, P>(
                 // @ts-ignore
                 ref={scrollableRef}
                 overScrollMode={overScrollMode}
+                keyboardDismissMode={keyboardDismissMode}
                 scrollEventThrottle={16}
                 onScroll={handleScrollEvent}
                 animatedProps={scrollableAnimatedProps}
@@ -134,6 +139,7 @@ export function createBottomSheetScrollableComponent<T, P>(
             // @ts-ignore
             ref={scrollableRef}
             overScrollMode={overScrollMode}
+            keyboardDismissMode={keyboardDismissMode}
             scrollEventThrottle={16}
             refreshing={refreshing}
             onRefresh={onRefresh}
diff --git a/src/components/bottomSheetView/BottomSheetView.tsx b/src/components/bottomSheetView/BottomSheetView.tsx
index ed304d6a3..500fe39e3 100644
--- a/src/components/bottomSheetView/BottomSheetView.tsx
+++ b/src/components/bottomSheetView/BottomSheetView.tsx
@@ -1,5 +1,6 @@
 import React, { memo, useEffect, useCallback, useMemo } from 'react';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { SCROLLABLE_TYPE } from '../../constants';
 import { useBottomSheetInternal } from '../../hooks';
 import type { BottomSheetViewProps } from './types';
 
@@ -10,8 +11,11 @@ function BottomSheetViewComponent({
   ...rest
 }: BottomSheetViewProps) {
   // hooks
-  const { scrollableContentOffsetY, animatedFooterHeight } =
-    useBottomSheetInternal();
+  const {
+    scrollableContentOffsetY,
+    animatedScrollableType,
+    animatedFooterHeight,
+  } = useBottomSheetInternal();
 
   // styles
   const containerAnimatedStyle = useAnimatedStyle(
@@ -28,7 +32,8 @@ function BottomSheetViewComponent({
   // callback
   const handleSettingScrollable = useCallback(() => {
     scrollableContentOffsetY.value = 0;
-  }, [scrollableContentOffsetY]);
+    animatedScrollableType.value = SCROLLABLE_TYPE.VIEW;
+  }, [scrollableContentOffsetY, animatedScrollableType]);
 
   // effects
   useFocusHook(handleSettingScrollable);
diff --git a/src/constants.ts b/src/constants.ts
index 72d35bf18..d96bd319a 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -20,6 +20,15 @@ enum SCROLLABLE_STATE {
   UNLOCKED,
 }
 
+enum SCROLLABLE_TYPE {
+  UNDETERMINED = 0,
+  VIEW,
+  FLATLIST,
+  SCROLLVIEW,
+  SECTIONLIST,
+  VIRTUALIZEDLIST,
+}
+
 enum ANIMATION_STATE {
   UNDETERMINED = 0,
   RUNNING,
@@ -74,6 +83,7 @@ export {
   GESTURE_SOURCE,
   SHEET_STATE,
   ANIMATION_STATE,
+  SCROLLABLE_TYPE,
   SCROLLABLE_STATE,
   KEYBOARD_STATE,
   ANIMATION_METHOD,
diff --git a/src/contexts/internal.ts b/src/contexts/internal.ts
index 4b68e988e..64ff8660b 100644
--- a/src/contexts/internal.ts
+++ b/src/contexts/internal.ts
@@ -8,6 +8,7 @@ import type {
   ANIMATION_STATE,
   KEYBOARD_STATE,
   SCROLLABLE_STATE,
+  SCROLLABLE_TYPE,
   SHEET_STATE,
 } from '../constants';
 import type { Scrollable, ScrollableRef } from '../types';
@@ -39,6 +40,7 @@ export interface BottomSheetInternalContextType
   animatedFooterHeight: Animated.SharedValue<number>;
   animatedHandleHeight: Animated.SharedValue<number>;
   animatedKeyboardHeight: Animated.SharedValue<number>;
+  animatedScrollableType: Animated.SharedValue<SCROLLABLE_TYPE>;
   isScrollableRefreshable: Animated.SharedValue<boolean>;
   isContentHeightFixed: Animated.SharedValue<boolean>;
   scrollableContentOffsetY: Animated.SharedValue<number>;
diff --git a/src/hooks/useInteractivePanGestureHandler.ts b/src/hooks/useInteractivePanGestureHandler.ts
index d87497727..8bbc52f3a 100644
--- a/src/hooks/useInteractivePanGestureHandler.ts
+++ b/src/hooks/useInteractivePanGestureHandler.ts
@@ -1,353 +1,49 @@
-import { Keyboard, Platform } from 'react-native';
-import Animated, {
-  useAnimatedGestureHandler,
-  useSharedValue,
-  cancelAnimation,
-  runOnJS,
-} from 'react-native-reanimated';
+import Animated, { useAnimatedGestureHandler } from 'react-native-reanimated';
 import {
   State,
   PanGestureHandlerGestureEvent,
+  GestureEventPayload,
+  PanGestureHandlerEventPayload,
 } from 'react-native-gesture-handler';
-import { clamp, snapPoint } from 'react-native-redash';
-import {
-  GESTURE_SOURCE,
-  KEYBOARD_BEHAVIOR,
-  KEYBOARD_DISMISS_THRESHOLD,
-  KEYBOARD_STATE,
-  WINDOW_HEIGHT,
-} from '../constants';
+import { GESTURE_SOURCE, KEYBOARD_STATE } from '../constants';
 
-export interface useInteractivePanGestureHandlerConfigs {
-  type: GESTURE_SOURCE;
-  enableOverDrag: boolean;
-  enablePanDownToClose: boolean;
-  overDragResistanceFactor: number;
-  keyboardBehavior: keyof typeof KEYBOARD_BEHAVIOR;
-  isInTemporaryPosition: Animated.SharedValue<boolean>;
-  keyboardState: Animated.SharedValue<KEYBOARD_STATE>;
-  keyboardHeight: Animated.SharedValue<number>;
-  animatedSnapPoints: Animated.SharedValue<number[]>;
-  animatedPosition: Animated.SharedValue<number>;
-  animatedContainerHeight: Animated.SharedValue<number>;
-  animatedClosedPosition: Animated.SharedValue<number>;
-  scrollableContentOffsetY: Animated.SharedValue<number>;
-  isScrollableRefreshable: Animated.SharedValue<boolean>;
-  animateToPoint: (point: number, velocity: number) => void;
-}
+export type GestureEventType = GestureEventPayload &
+  PanGestureHandlerEventPayload;
 
-type InteractivePanGestureHandlerContextType = {
-  startPosition: number;
-  keyboardState: KEYBOARD_STATE;
+export type GestureEventContextType = {
+  initialPosition: number;
+  initialKeyboardState: KEYBOARD_STATE;
   isScrollablePositionLocked: boolean;
 };
 
-export const useInteractivePanGestureHandler = ({
-  type,
-  enableOverDrag,
-  enablePanDownToClose,
-  overDragResistanceFactor,
-  keyboardState,
-  keyboardBehavior,
-  keyboardHeight,
-  isInTemporaryPosition,
-  animatedPosition,
-  animatedSnapPoints,
-  animatedContainerHeight,
-  animatedClosedPosition,
-  scrollableContentOffsetY,
-  isScrollableRefreshable,
-  animateToPoint,
-}: useInteractivePanGestureHandlerConfigs): [
-  (event: PanGestureHandlerGestureEvent) => void,
-  Animated.SharedValue<State>,
-  Animated.SharedValue<number>,
-  Animated.SharedValue<number>
-] => {
-  const gestureState = useSharedValue<State>(State.UNDETERMINED);
-  const gestureTranslationY = useSharedValue(0);
-  const gestureVelocityY = useSharedValue(0);
-
+export type GestureCallbackType = (
+  type: GESTURE_SOURCE,
+  payload: GestureEventType,
+  context: GestureEventContextType
+) => void;
+
+export const useInteractivePanGestureHandler = (
+  type: GESTURE_SOURCE,
+  gestureState: Animated.SharedValue<State>,
+  onStart: GestureCallbackType,
+  onActive: GestureCallbackType,
+  onEnd: GestureCallbackType
+): ((event: PanGestureHandlerGestureEvent) => void) => {
   const gestureHandler = useAnimatedGestureHandler<
     PanGestureHandlerGestureEvent,
-    InteractivePanGestureHandlerContextType
+    GestureEventContextType
   >({
-    onStart: ({ state, translationY, velocityY }, context) => {
-      // cancel current animation
-      cancelAnimation(animatedPosition);
-
-      // store current animated position
-      context.startPosition = animatedPosition.value;
-      context.keyboardState = keyboardState.value;
-
-      /**
-       * if scrollable scrolled
-       */
-      if (scrollableContentOffsetY.value > 0) {
-        context.isScrollablePositionLocked = true;
-      }
-
-      // set variables
-      gestureState.value = state;
-      gestureTranslationY.value = translationY;
-      gestureVelocityY.value = velocityY;
+    onStart: (payload, context) => {
+      gestureState.value = payload.state;
+      onStart(type, payload, context);
     },
-    onActive: ({ state, translationY, velocityY, absoluteY }, context) => {
-      gestureState.value = state;
-      gestureTranslationY.value = translationY;
-      gestureVelocityY.value = velocityY;
-
-      let highestSnapPoint =
-        animatedSnapPoints.value[animatedSnapPoints.value.length - 1];
-      /**
-       * if keyboard is shown, then we set the highest point to the current
-       * position which includes the keyboard height.
-       */
-      if (
-        isInTemporaryPosition.value &&
-        context.keyboardState === KEYBOARD_STATE.SHOWN
-      ) {
-        highestSnapPoint = context.startPosition;
-      }
-      /**
-       * if current position is out of provided `snapPoints` and smaller then
-       * highest snap pont, then we set the highest point to the current position.
-       */
-      if (
-        isInTemporaryPosition.value &&
-        context.startPosition < highestSnapPoint
-      ) {
-        highestSnapPoint = context.startPosition;
-      }
-
-      const lowestSnapPoint = enablePanDownToClose
-        ? animatedContainerHeight.value
-        : animatedSnapPoints.value[0];
-
-      /**
-       * if scrollable is refreshable and sheet position at the highest
-       * point, then do not interact with current gesture.
-       */
-      if (
-        type === GESTURE_SOURCE.SCROLLABLE &&
-        isScrollableRefreshable.value &&
-        animatedPosition.value === highestSnapPoint
-      ) {
-        return;
-      }
-      /**
-       * a negative scrollable content offset to be subtracted from accumulated
-       * current position and gesture translation Y to allow user to drag the sheet,
-       * when scrollable position at the top.
-       * a negative scrollable content offset when the scrollable is not locked.
-       */
-      const negativeScrollableContentOffset =
-        (context.startPosition === highestSnapPoint &&
-          type === GESTURE_SOURCE.SCROLLABLE) ||
-        !context.isScrollablePositionLocked
-          ? scrollableContentOffsetY.value * -1
-          : 0;
-
-      /**
-       * an accumulated value of starting position with gesture translation y.
-       */
-      const draggedPosition = context.startPosition + translationY;
-
-      /**
-       * an accumulated value of dragged position and negative scrollable content offset,
-       * this will insure locking sheet position when user is scrolling the scrollable until,
-       * they reach to the top of the scrollable.
-       */
-      const accumulatedDraggedPosition =
-        draggedPosition + negativeScrollableContentOffset;
-
-      /**
-       * a clamped value of the accumulated dragged position, to insure keeping the dragged
-       * position between the highest and lowest snap points.
-       */
-      const clampedPosition = clamp(
-        accumulatedDraggedPosition,
-        highestSnapPoint,
-        lowestSnapPoint
-      );
-
-      /**
-       * if scrollable position is locked and the animated position
-       * reaches the highest point, then we unlock the scrollable position.
-       */
-      if (
-        context.isScrollablePositionLocked &&
-        type === GESTURE_SOURCE.SCROLLABLE &&
-        animatedPosition.value === highestSnapPoint
-      ) {
-        context.isScrollablePositionLocked = false;
-      }
-
-      /**
-       * dismiss the keyboard when panning down over the threshold value.
-       */
-      if (translationY > KEYBOARD_DISMISS_THRESHOLD) {
-        if (
-          keyboardState.value === KEYBOARD_STATE.SHOWN &&
-          (Platform.OS === 'android' ||
-            keyboardBehavior !== KEYBOARD_BEHAVIOR.interactive ||
-            (keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
-              absoluteY < WINDOW_HEIGHT - keyboardHeight.value))
-        ) {
-          runOnJS(Keyboard.dismiss)();
-        }
-      }
-
-      /**
-       * over-drag implementation.
-       */
-      if (enableOverDrag) {
-        if (
-          type === GESTURE_SOURCE.HANDLE &&
-          draggedPosition < highestSnapPoint
-        ) {
-          const resistedPosition =
-            highestSnapPoint -
-            Math.sqrt(1 + (highestSnapPoint - draggedPosition)) *
-              overDragResistanceFactor;
-          animatedPosition.value = resistedPosition;
-          return;
-        }
-
-        if (
-          type === GESTURE_SOURCE.HANDLE &&
-          draggedPosition > lowestSnapPoint
-        ) {
-          const resistedPosition =
-            lowestSnapPoint +
-            Math.sqrt(1 + (draggedPosition - lowestSnapPoint)) *
-              overDragResistanceFactor;
-          animatedPosition.value = resistedPosition;
-          return;
-        }
-
-        if (
-          type === GESTURE_SOURCE.SCROLLABLE &&
-          draggedPosition + negativeScrollableContentOffset > lowestSnapPoint
-        ) {
-          const resistedPosition =
-            lowestSnapPoint +
-            Math.sqrt(
-              1 +
-                (draggedPosition +
-                  negativeScrollableContentOffset -
-                  lowestSnapPoint)
-            ) *
-              overDragResistanceFactor;
-          animatedPosition.value = resistedPosition;
-          return;
-        }
-      }
-
-      animatedPosition.value = clampedPosition;
+    onActive: (payload, context) => {
+      gestureState.value = payload.state;
+      onActive(type, payload, context);
     },
-    onEnd: ({ state }, context) => {
-      gestureState.value = state;
-      let highestSnapPoint =
-        animatedSnapPoints.value[animatedSnapPoints.value.length - 1];
-
-      /**
-       * if scrollable is refreshable and sheet position at the highest
-       * point, then do not interact with current gesture.
-       */
-      if (
-        type === GESTURE_SOURCE.SCROLLABLE &&
-        isScrollableRefreshable.value &&
-        animatedPosition.value === highestSnapPoint
-      ) {
-        return;
-      }
-
-      /**
-       * if the sheet is in a temporary position and the gesture ended above
-       * the current position, then we snap back to the temporary position.
-       */
-      if (
-        isInTemporaryPosition.value &&
-        context.startPosition >= animatedPosition.value
-      ) {
-        if (context.startPosition > animatedPosition.value) {
-          animateToPoint(context.startPosition, gestureVelocityY.value / 2);
-        }
-        return;
-      }
-
-      /**
-       * close keyboard if current position is below the recorded
-       * start position and keyboard still shown.
-       */
-      if (
-        animatedPosition.value > context.startPosition &&
-        context.keyboardState === KEYBOARD_STATE.SHOWN
-      ) {
-        runOnJS(Keyboard.dismiss)();
-      }
-
-      /**
-       * reset isInTemporaryPosition value
-       */
-      if (isInTemporaryPosition.value) {
-        isInTemporaryPosition.value = false;
-      }
-
-      /**
-       * clone snap points array, and insert the container height
-       * if pan down to close is enabled.
-       */
-      const snapPoints = animatedSnapPoints.value.slice();
-      if (enablePanDownToClose) {
-        snapPoints.unshift(animatedClosedPosition.value);
-      }
-
-      /**
-       * calculate the destination point, using redash.
-       */
-      const destinationPoint = snapPoint(
-        gestureTranslationY.value + context.startPosition,
-        gestureVelocityY.value,
-        snapPoints
-      );
-
-      /**
-       * if destination point is the same as the current position,
-       * then no need to perform animation.
-       */
-      if (destinationPoint === animatedPosition.value) {
-        return;
-      }
-
-      /**
-       * if gesture was picked by scrollable and did not move the sheet,
-       * then exit the method to prevent snapping.
-       */
-      if (
-        (type === GESTURE_SOURCE.SCROLLABLE
-          ? scrollableContentOffsetY.value
-          : 0) > 0 &&
-        context.startPosition === highestSnapPoint &&
-        animatedPosition.value === highestSnapPoint
-      ) {
-        return;
-      }
-
-      /**
-       * if gesture started by scrollable dragging the sheet than continue scrolling,
-       * then exit the method to prevent snapping.
-       */
-      if (
-        type === GESTURE_SOURCE.SCROLLABLE &&
-        scrollableContentOffsetY.value > 0 &&
-        animatedPosition.value === highestSnapPoint
-      ) {
-        return;
-      }
-
-      animateToPoint(destinationPoint, gestureVelocityY.value / 2);
+    onEnd: (payload, context) => {
+      gestureState.value = payload.state;
+      onEnd(type, payload, context);
     },
     onCancel: ({ state }) => {
       gestureState.value = state;
@@ -360,5 +56,5 @@ export const useInteractivePanGestureHandler = ({
     },
   });
 
-  return [gestureHandler, gestureState, gestureTranslationY, gestureVelocityY];
+  return gestureHandler;
 };
diff --git a/src/hooks/useScrollable.ts b/src/hooks/useScrollable.ts
index 9cead4fd5..dd550c348 100644
--- a/src/hooks/useScrollable.ts
+++ b/src/hooks/useScrollable.ts
@@ -1,7 +1,7 @@
 import { useCallback, RefObject, useRef } from 'react';
-import { findNodeHandle, Platform } from 'react-native';
+import { findNodeHandle } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
-import { SCROLLABLE_STATE } from '../constants';
+import { SCROLLABLE_TYPE } from '../constants';
 import type { ScrollableRef, Scrollable } from '../types';
 
 export const useScrollable = () => {
@@ -10,8 +10,8 @@ export const useScrollable = () => {
   const previousScrollableRef = useRef<ScrollableRef>(null);
 
   // variables
-  const scrollableState = useSharedValue<SCROLLABLE_STATE>(
-    SCROLLABLE_STATE.LOCKED
+  const scrollableType = useSharedValue<SCROLLABLE_TYPE>(
+    SCROLLABLE_TYPE.UNDETERMINED
   );
   const scrollableContentOffsetY = useSharedValue<number>(0);
   const isScrollableRefreshable = useSharedValue<boolean>(false);
@@ -54,42 +54,12 @@ export const useScrollable = () => {
     }
   }, []);
 
-  const flashScrollableIndicators = useCallback(() => {
-    let node = scrollableRef.current?.node ?? undefined;
-    let didResize = scrollableRef.current?.didResize ?? false;
-
-    if (!node) {
-      return;
-    }
-
-    // @ts-ignore
-    if (node.current.flashScrollIndicators) {
-      // @ts-ignore
-      node.current.flashScrollIndicators();
-
-      /**
-       * this is a hack to resize the scroll indicator
-       * size on iOS.
-       */
-      if (Platform.OS === 'ios' && !didResize) {
-        // @ts-ignore
-        node.current.setNativeProps({
-          bottom: 0.5,
-        });
-
-        // @ts-ignore
-        scrollableRef.current.didResize = true;
-      }
-    }
-  }, []);
-
   return {
     scrollableRef,
-    scrollableState,
+    scrollableType,
     scrollableContentOffsetY,
     isScrollableRefreshable,
     setScrollableRef,
     removeScrollableRef,
-    flashScrollableIndicators,
   };
 };
diff --git a/src/hooks/useScrollableInternal.ts b/src/hooks/useScrollableInternal.ts
index ee089f090..dd1a2b2aa 100644
--- a/src/hooks/useScrollableInternal.ts
+++ b/src/hooks/useScrollableInternal.ts
@@ -13,6 +13,7 @@ import {
   ANIMATION_STATE,
   SCROLLABLE_DECELERATION_RATE_MAPPER,
   SCROLLABLE_STATE,
+  SCROLLABLE_TYPE,
   SHEET_STATE,
 } from '../constants';
 
@@ -21,7 +22,10 @@ type HandleScrollEventContextType = {
   shouldLockInitialPosition: boolean;
 };
 
-export const useScrollableInternal = (refreshable: boolean) => {
+export const useScrollableInternal = (
+  type: SCROLLABLE_TYPE,
+  refreshable: boolean
+) => {
   // refs
   const scrollableRef = useAnimatedRef<Scrollable>();
   const scrollableContentOffsetY = useSharedValue<number>(0);
@@ -30,6 +34,7 @@ export const useScrollableInternal = (refreshable: boolean) => {
   const {
     animatedSheetState,
     animatedScrollableState,
+    animatedScrollableType,
     animatedAnimationState,
     scrollableContentOffsetY: rootScrollableContentOffsetY,
     isScrollableRefreshable,
@@ -42,6 +47,8 @@ export const useScrollableInternal = (refreshable: boolean) => {
   const scrollableAnimatedProps = useAnimatedProps(() => ({
     decelerationRate:
       SCROLLABLE_DECELERATION_RATE_MAPPER[animatedScrollableState.value],
+    showsVerticalScrollIndicator:
+      animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED,
   }));
 
   // callbacks
@@ -122,6 +129,7 @@ export const useScrollableInternal = (refreshable: boolean) => {
   const handleSettingScrollable = useCallback(() => {
     // set current content offset
     rootScrollableContentOffsetY.value = scrollableContentOffsetY.value;
+    animatedScrollableType.value = type;
     isScrollableRefreshable.value = refreshable;
     isContentHeightFixed.value = false;
 
@@ -131,7 +139,6 @@ export const useScrollableInternal = (refreshable: boolean) => {
       setScrollableRef({
         id: id,
         node: scrollableRef,
-        didResize: false,
       });
     } else {
       console.warn(`Couldn't find the scrollable node handle id!`);
@@ -141,10 +148,12 @@ export const useScrollableInternal = (refreshable: boolean) => {
       removeScrollableRef(scrollableRef);
     };
   }, [
+    type,
     refreshable,
     isScrollableRefreshable,
     isContentHeightFixed,
     rootScrollableContentOffsetY,
+    animatedScrollableType,
     scrollableContentOffsetY,
     scrollableRef,
     setScrollableRef,
diff --git a/src/types.d.ts b/src/types.d.ts
index 8cec9ccdd..0aa6d905f 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -93,12 +93,9 @@ export interface BottomSheetVariables {
 //#region scrollables
 export type Scrollable = FlatList | ScrollView | SectionList;
 
-export type ScrollableType = 'FlatList' | 'ScrollView' | 'SectionList' | 'View';
-
 export type ScrollableRef = {
   id: number;
   node: React.RefObject<Scrollable>;
-  didResize: boolean;
 };
 //#endregion