fix: issue onPageChange call multiple times

Author: r0b0t3d

example/src/App.tsx

@@ -134,12 +134,13 @@ export default function App() {
           currentPage={currentPage}
           containerStyle={{ marginTop: 20 }}
           activeIndicatorStyle={{
-            width: 20,
-            height: 10,
+            height: 20,
             borderRadius: 5,
           }}
           indicatorConfigs={{
             spaceBetween: 10,
+            indicatorWidth: 10,
+            indicatorSelectedWidth: 20,
           }}
         />
       </View>

src/components/Carousel.tsx

@@ -166,8 +166,7 @@ function Carousel<TData>(
       animatedPage.value = actualPage;
       if (onPageChange) {
         onPageChange(actualPage);
-      }
-      currentPage.value = page;
+      }      
       if (!loop) return;
       if (page === pageItems.length - 1) {
         jumpTo(additionalPagesPerSide * 2 - 1);
@@ -189,6 +188,7 @@ function Carousel<TData>(
         if (expectedPosition.current === pageNum) {
           freeze.value = false;
         }
+        currentPage.value = pageNum;
         runOnJS(handlePageChange)(pageNum);
       }
     },
@@ -220,12 +220,16 @@ function Carousel<TData>(
   }, []);
 
   const beginDrag = useCallback(() => {
-    setDragging(true);
-  }, []);
+    if (autoPlay) {
+      setDragging(true);
+    }
+  }, [autoPlay]);
 
   const endDrag = useCallback(() => {
-    setTimeout(() => setDragging(false), 200);
-  }, []);
+    if (autoPlay) {
+      setTimeout(() => setDragging(false), 200);
+    }
+  }, [autoPlay]);
 
   const getItemKey = useCallback(
     (item: TData, index: number): string => {
@@ -257,24 +261,27 @@ function Carousel<TData>(
     [beginDrag, endDrag, refreshPage]
   );
 
-  function renderPage(item: TData, i: number) {
-    const containerStyle = useMemo(() => {
+  const containerStyle = useCallback(
+    (index: number) => {
       if (firstItemAlignment === 'start') {
         return {
-          paddingLeft: i === 0 ? 0 : spaceBetween / 2,
-          paddingRight: i === data.length - 1 ? 0 : spaceBetween / 2,
+          paddingLeft: index === 0 ? 0 : spaceBetween / 2,
+          paddingRight: index === data.length - 1 ? 0 : spaceBetween / 2,
         };
       }
       return {
         paddingLeft: spaceBetween / 2,
         paddingRight: spaceBetween / 2,
       };
-    }, [spaceBetween, firstItemAlignment]);
+    },
+    [spaceBetween, firstItemAlignment]
+  );
 
+  function renderPage(item: TData, i: number) {
     return (
       <PageItem
         key={getItemKey(item, i)}
-        containerStyle={containerStyle}
+        containerStyle={containerStyle(i)}
         item={item}
         index={i}
         offset={offsets[i]}

src/components/PaginationIndicator.tsx

@@ -1,16 +1,18 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useCallback, useMemo } from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   withSpring,
 } from 'react-native-reanimated';
-import type { PaginationProps } from '../types';
+import type { IndicatorConfigs, PaginationProps } from '../types';
 
-const defaultIndicatorConfigs = {
+const defaultIndicatorConfigs: IndicatorConfigs = {
   indicatorColor: 'gray',
-  indicatorSelectedColor: 'blue',
   indicatorWidth: 6,
+  indicatorSelectedColor: 'blue',
+  indicatorSelectedWidth: 6,  
   spaceBetween: 3,
 };
 
@@ -54,7 +56,7 @@ export default function PaginationIndicator({
 
   const translateX = useDerivedValue(() => {
     return withSpring(
-      currentPage.value * (configs.indicatorWidth + configs.spaceBetween),
+      currentPage.value * (configs.indicatorWidth! + configs.spaceBetween!),
       defaultSpringConfig
     );
   }, []);
@@ -70,10 +72,18 @@ export default function PaginationIndicator({
   }, []);
 
   const renderItem = useCallback((pageNumber: number) => {
+    // @ts-ignore
+    if (activeIndicatorStyle?.width) {
+      console.error("Do not use activeIndicatorStyle: { width }. Please use indicatorConfigs: { indicatorSelectedWidth } instead");
+    }
+    // @ts-ignore
+    if (indicatorStyle?.width) {
+      console.error("Do not use indicatorStyle: { width }. Please use indicatorConfigs: { indicatorWidth } instead");
+    }
     const dotContainerStyle: ViewStyle = StyleSheet.flatten([
       styles.dotContainer,
       {
-        width: configs.indicatorWidth,
+        width: configs.indicatorSelectedWidth,
         height: configs.indicatorWidth,
         marginEnd: configs.spaceBetween,
       },
@@ -87,18 +97,19 @@ export default function PaginationIndicator({
       {
         width: configs.indicatorWidth,
         height: configs.indicatorWidth,
-        borderRadius: configs.indicatorWidth / 2,
+        borderRadius: configs.indicatorWidth! / 2,
         backgroundColor: configs.indicatorColor,
       },
       indicatorStyle,
     ]);
 
+    console.log(configs);
+    
+
     const aStyle = useAnimatedStyle(() => {
       return {
         width: withSpring(
-          currentPage.value === pageNumber
-            ? (dotContainerStyle.width as number || configs.indicatorWidth)
-            : (dotStyle.width as number || configs.indicatorWidth),
+          currentPage.value === pageNumber ? configs.indicatorSelectedWidth! : configs.indicatorWidth!,
           defaultSpringConfig
         ),
       };
@@ -120,9 +131,9 @@ export default function PaginationIndicator({
         style={[
           styles.dotSelectedStyle,
           {
-            width: configs.indicatorWidth,
+            width: configs.indicatorSelectedWidth,
             height: configs.indicatorWidth,
-            borderRadius: configs.indicatorWidth / 2,
+            borderRadius: configs.indicatorWidth! / 2,
             backgroundColor: configs.indicatorSelectedColor,
           },
           activeIndicatorStyle,

src/types.ts

@@ -47,14 +47,15 @@ export type PaginationProps = {
   totalPage: number;
   currentPage: Animated.SharedValue<number>;
   containerStyle?: StyleProp<ViewStyle>;
-  indicatorStyle?: StyleProp<ViewStyle>;
-  activeIndicatorStyle?: StyleProp<ViewStyle>;
+  indicatorStyle?: Omit<StyleProp<ViewStyle>, 'width'>;
+  activeIndicatorStyle?: Omit<StyleProp<ViewStyle>, 'width'>;
   indicatorConfigs?: IndicatorConfigs;
 };
 
 export type IndicatorConfigs = {
   indicatorColor?: string;
-  indicatorSelectedColor?: string;
   indicatorWidth?: number;
+  indicatorSelectedColor?: string;
+  indicatorSelectedWidth?: number;
   spaceBetween?: number;
 };