feat: added onAnimate callback (#127)

* chore: added onAnimate callback implementation

* chore: updated examples

Author: gorhom

example/src/screens/basic/BasicExamples.tsx

@@ -49,6 +49,12 @@ const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
     const handleSheetChange = useCallback(index => {
       console.log('handleSheetChange', index);
     }, []);
+    const handleSheetAnimate = useCallback(
+      (fromIndex: number, toIndex: number) => {
+        console.log('handleSheetAnimate', `from ${fromIndex} to ${toIndex}`);
+      },
+      []
+    );
     const handleSnapPress = useCallback(index => {
       bottomSheetRef.current?.snapTo(index);
     }, []);
@@ -119,6 +125,7 @@ const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
           enableContentPanningGesture={enableContentPanningGesture}
           enableHandlePanningGesture={enableHandlePanningGesture}
           onChange={handleSheetChange}
+          onAnimate={handleSheetAnimate}
         >
           <ContactList key={`${type}.list`} type={type} count={count} />
         </BottomSheet>

src/components/bottomSheet/BottomSheet.tsx

@@ -89,6 +89,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       animatedIndex: _providedAnimatedIndex,
       // callbacks
       onChange: _providedOnChange,
+      onAnimate: _providedOnAnimate,
       // components
       handleComponent,
       backdropComponent,
@@ -214,6 +215,18 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       },
       [_providedOnChange]
     );
+    const handleOnAnimate = useCallback(
+      (toPoint: number) => {
+        if (!_providedOnAnimate) {
+          return;
+        }
+        const toIndex = snapPoints.findIndex(item => item === toPoint);
+        if (toIndex !== currentIndexRef.current) {
+          _providedOnAnimate(currentIndexRef.current, toIndex);
+        }
+      },
+      [_providedOnAnimate, snapPoints]
+    );
     const handleSettingScrollableRef = useCallback(
       (scrollableRef: ScrollableRef) => {
         setScrollableRef(scrollableRef);
@@ -266,6 +279,9 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     const animateToPoint = useCallback(
       (point: number) => {
         'worklet';
+
+        runOnJS(handleOnAnimate)(point);
+
         animationState.value = ANIMATION_STATE.RUNNING;
         animatedPosition.value = withTiming(
           point,
@@ -282,6 +298,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         animationDuration,
         animationEasing,
         animateToPointCompleted,
+        handleOnAnimate,
       ]
     );
 

src/components/bottomSheet/types.d.ts

@@ -81,6 +81,11 @@ export interface BottomSheetProps extends BottomSheetAnimationConfigs {
    * @type (index: number) => void;
    */
   onChange?: (index: number) => void;
+  /**
+   * Callback when the sheet about to animate to a new position.
+   * @type (fromIndex: number, toIndex: number) => void;
+   */
+  onAnimate?: (fromIndex: number, toIndex: number) => void;
 
   // components
   /**