fix: added positions to onAnimate, and prevent index to be negative with keyboard animations (#2271)(by @souyahia)

* feat: add position params in onAnimate event

* fix: prevent index from going to negative on animate with keyboard events

---------

Co-authored-by: gorhom <[email protected]>

Author: souyahia

src/components/bottomSheet/BottomSheet.tsx

@@ -536,15 +536,17 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     );
     // biome-ignore lint/correctness/useExhaustiveDependencies(BottomSheet.name): used for debug only
     const handleOnAnimate = useCallback(
-      function handleOnAnimate(targetIndex: number) {
+      function handleOnAnimate(targetIndex: number, targetPosition: number) {
         if (__DEV__) {
           print({
             component: BottomSheet.name,
             method: handleOnAnimate.name,
             category: 'callback',
             params: {
               toIndex: targetIndex,
+              toPosition: targetPosition,
               fromIndex: animatedCurrentIndex.value,
+              fromPosition: animatedPosition.value,
             },
           });
         }
@@ -554,10 +556,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         }
 
         if (targetIndex !== animatedCurrentIndex.value) {
-          _providedOnAnimate(animatedCurrentIndex.value, targetIndex);
+          _providedOnAnimate(
+            animatedCurrentIndex.value,
+            targetIndex,
+            animatedPosition.value,
+            targetPosition
+          );
         }
       },
-      [_providedOnAnimate, animatedCurrentIndex]
+      [_providedOnAnimate, animatedCurrentIndex, animatedPosition]
     );
     //#endregion
 
@@ -643,10 +650,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animatedNextPosition.value = position;
 
         /**
-         * offset the position if keyboard is shown
+         * offset the position if keyboard is shown,
+         * and behavior not extend.
          */
         let offset = 0;
-        if (animatedKeyboardState.value === KEYBOARD_STATE.SHOWN) {
+        if (
+          animatedKeyboardState.value === KEYBOARD_STATE.SHOWN &&
+          keyboardBehavior !== KEYBOARD_BEHAVIOR.extend &&
+          position < animatedPosition.value
+        ) {
           offset = animatedKeyboardHeightInContainer.value;
         }
 
@@ -657,7 +669,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * fire `onAnimate` callback
          */
-        runOnJS(handleOnAnimate)(animatedNextPositionIndex.value);
+        runOnJS(handleOnAnimate)(animatedNextPositionIndex.value, position);
 
         /**
          * start animation
@@ -672,6 +684,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       },
       [
         handleOnAnimate,
+        keyboardBehavior,
         _providedAnimationConfigs,
         _providedOverrideReduceMotion,
       ]

src/components/bottomSheet/types.d.ts

@@ -264,9 +264,14 @@ export interface BottomSheetProps
   /**
    * Callback when the sheet about to animate to a new position.
    *
-   * @type (fromIndex: number, toIndex: number) => void;
-   */
-  onAnimate?: (fromIndex: number, toIndex: number) => void;
+   * @type (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
+   */
+  onAnimate?: (
+    fromIndex: number,
+    toIndex: number,
+    fromPosition: number,
+    toPosition: number
+  ) => void;
   //#endregion
 
   //#region components

src/components/bottomSheetModal/BottomSheetModal.tsx

@@ -379,11 +379,16 @@ function BottomSheetModalComponent<T = any>(
     [_providedOnChange]
   );
   const handleBottomSheetOnAnimate = useCallback(
-    (fromIndex: number, toIndex: number) => {
+    (
+      fromIndex: number,
+      toIndex: number,
+      fromPosition: number,
+      toPosition: number
+    ) => {
       nextIndexRef.current = toIndex;
 
       if (_providedOnAnimate) {
-        _providedOnAnimate(fromIndex, toIndex);
+        _providedOnAnimate(fromIndex, toIndex, fromPosition, toPosition);
       }
     },
     [_providedOnAnimate]

website/docs/props.md

@@ -372,7 +372,7 @@ type onChange = (index: number) => void;
 Callback when the sheet about to animate to a new position.
 
 ```ts
-type onAnimate = (fromIndex: number, toIndex: number) => void;
+type onAnimate = (fromIndex: number, toIndex: number, fromPosition: number, toPosition: number) => void;
 ```
 
 | type     | default | required |