feat: add onProgressChange props

Author: dohooo

README.md

@@ -114,6 +114,10 @@ import Carousel from "react-native-reanimated-carousel";
 | onScrollBegin           | ❌       |                 | () => void                                                     | Callback fired when scroll begin                                                |
 | onScrollEnd             | ❌       |                 | (previous: number, current: number) => void                    | Callback fired when scroll end                                                  |
 | panGestureHandlerProps  | ❌       | {}              | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props                                                         |
+| onProgressChange  | ❌       |               | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...)                                                          |
+
+
+    
 
 ## Ref
 

README.zh-CN.md

@@ -113,6 +113,7 @@ import Carousel from "react-native-reanimated-carousel";
 | onScrollBegin           | ❌       |                 | () => void                                                     | 切换动画开始时触发                                                      |
 | onScrollEnd             | ❌       |                 | (previous: number, current: number) => void                    | 切换动画结束时触发                                                      |
 | panGestureHandlerProps  | ❌       | {}              | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props                                                 |
+| onProgressChange  | ❌       |               | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | 当滚动进度发生变化时触发 `offsetProgress`:总的偏移值 (0 390 780 ...); `absoluteProgress`:转化为index的进度变化 (0 1 2 ...)                                                          |
 
 ## Ref
 

example/src/App.tsx

@@ -3,6 +3,12 @@ import * as React from 'react';
 import { Dimensions, Image, ImageSourcePropType, View } from 'react-native';
 import Carousel from '../../src/index';
 import type { ICarouselInstance } from '../../src/Carousel';
+import Animated, {
+    Extrapolate,
+    interpolate,
+    useAnimatedStyle,
+    useSharedValue,
+} from 'react-native-reanimated';
 
 const { width } = Dimensions.get('window');
 
@@ -13,6 +19,7 @@ const data: ImageSourcePropType[] = [
 ];
 
 export default function App() {
+    const progressValue = useSharedValue<number>(0);
     const r = React.useRef<ICarouselInstance | null>(null);
     return (
         <View
@@ -33,15 +40,20 @@ export default function App() {
                         <View style={{ flex: 1 }}>
                             <Image
                                 source={source}
-                                style={{ width: '100%', height: '100%' }}
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                }}
                             />
                         </View>
                     )}
                 />
             </View>
             <View style={{ height: 300 }}>
                 <Carousel<ImageSourcePropType>
-                    ref={r}
+                    onProgressChange={(_, absoluteProgress) => {
+                        progressValue.value = absoluteProgress;
+                    }}
                     mode="parallax"
                     width={width}
                     data={data}
@@ -50,12 +62,86 @@ export default function App() {
                         <View style={{ flex: 1 }}>
                             <Image
                                 source={source}
-                                style={{ width: '100%', height: '100%' }}
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                }}
                             />
                         </View>
                     )}
                 />
+                {!!progressValue && (
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                            width: 100,
+                            alignSelf: 'center',
+                        }}
+                    >
+                        {data.map((_, index) => {
+                            return (
+                                <PaginationItem
+                                    animValue={progressValue}
+                                    index={index}
+                                    key={index}
+                                    length={data.length}
+                                />
+                            );
+                        })}
+                    </View>
+                )}
             </View>
         </View>
     );
 }
+
+const PaginationItem: React.FC<{
+    index: number;
+    length: number;
+    animValue: Animated.SharedValue<number>;
+}> = (props) => {
+    const { animValue, index, length } = props;
+    const width = 20;
+
+    const animStyle = useAnimatedStyle(() => {
+        let inputRange = [index - 1, index, index + 1];
+        let outputRange = [-width, 0, width];
+
+        if (index === 0 && animValue?.value > length - 1) {
+            inputRange = [length - 1, length, length + 1];
+            outputRange = [-width, 0, width];
+        }
+
+        return {
+            transform: [
+                {
+                    translateX: interpolate(
+                        animValue?.value,
+                        inputRange,
+                        outputRange,
+                        Extrapolate.CLAMP
+                    ),
+                },
+            ],
+        };
+    }, [animValue, index, length]);
+    return (
+        <View
+            style={{
+                backgroundColor: 'white',
+                width,
+                height: width,
+                borderRadius: 50,
+                overflow: 'hidden',
+            }}
+        >
+            <Animated.View
+                style={[
+                    { borderRadius: 50, backgroundColor: 'tomato', flex: 1 },
+                    animStyle,
+                ]}
+            />
+        </View>
+    );
+};

src/Carousel.tsx

@@ -9,6 +9,7 @@ import Animated, {
     cancelAnimation,
     runOnJS,
     useAnimatedGestureHandler,
+    useAnimatedReaction,
     useDerivedValue,
     useSharedValue,
     withSpring,
@@ -81,14 +82,21 @@ export interface ICarouselProps<T extends unknown> {
      * @default 0.8
      */
     parallaxScrollingScale?: number;
-    /**
-     * Callback fired when navigating to an item
-     */
-    onSnapToItem?: (index: number) => void;
     /**
      * Sping config of translation animated
      */
     springConfig?: Animated.WithSpringConfig;
+    /**
+     * PanGestureHandler props
+     */
+    panGestureHandlerProps?: Omit<
+        Partial<PanGestureHandlerProps>,
+        'onHandlerStateChange'
+    >;
+    /**
+     * Callback fired when navigating to an item
+     */
+    onSnapToItem?: (index: number) => void;
     /**
      * On scroll begin
      */
@@ -98,12 +106,14 @@ export interface ICarouselProps<T extends unknown> {
      */
     onScrollEnd?: (previous: number, current: number) => void;
     /**
-     * PanGestureHandler props
+     * On progress change
+     * @param offsetProgress Total of offset distance (0 390 780 ...)
+     * @param absoluteProgress Convert to index (0 1 2 ...)
      */
-    panGestureHandlerProps?: Omit<
-        Partial<PanGestureHandlerProps>,
-        'onHandlerStateChange'
-    >;
+    onProgressChange?: (
+        offsetProgress: number,
+        absoluteProgress: number
+    ) => void;
 }
 
 export interface ICarouselInstance {
@@ -134,15 +144,16 @@ function Carousel<T extends unknown = any>(
         data: _data = [],
         loop = true,
         mode = 'default',
-        renderItem,
         autoPlay,
         autoPlayReverse,
         autoPlayInterval = 1000,
         parallaxScrollingOffset,
         parallaxScrollingScale,
-        onSnapToItem,
         style,
         panGestureHandlerProps = {},
+        renderItem,
+        onSnapToItem,
+        onProgressChange,
     } = props;
 
     const timingConfig = {
@@ -212,6 +223,19 @@ function Carousel<T extends unknown = any>(
         return isNaN(x) ? 0 : x;
     }, [computedAnimResult]);
 
+    useAnimatedReaction(
+        () => offsetX.value,
+        (value) => {
+            let absoluteProgress = Math.abs(value / width);
+            if (value > 0) {
+                absoluteProgress = data.length - absoluteProgress;
+            }
+            !!onProgressChange &&
+                runOnJS(onProgressChange)(value, absoluteProgress);
+        },
+        [onProgressChange, data]
+    );
+
     const next = React.useCallback(() => {
         return carouselController.next();
     }, [carouselController]);
@@ -305,14 +329,16 @@ function Carousel<T extends unknown = any>(
             [loop, data, onScrollBegin, onScrollEnd]
         );
 
-    React.useImperativeHandle(ref, () => {
-        return {
+    React.useImperativeHandle(
+        ref,
+        () => ({
             next,
             prev,
             getCurrentIndex,
             goToIndex,
-        };
-    });
+        }),
+        [getCurrentIndex, goToIndex, next, prev]
+    );
 
     const Layouts = React.useMemo<React.FC<{ index: number }>>(() => {
         switch (mode) {