Merge pull request #114 from dohooo/release/2.2.2

Release/2.2.2

Author: dohooo

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [2.2.2](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.2.1...v2.2.2) (2022-01-23)
+
+
+### Bug Fixes
+
+* onProgressChange & onSnapToItem bug when only 2 image ([bdb2d74](https://github.com/dohooo/react-native-reanimated-carousel/commit/bdb2d74245dfdefe024ba11b462dbe29bd7e18d6)), closes [#74](https://github.com/dohooo/react-native-reanimated-carousel/issues/74)
+* when autoPlay is false, manual sliding will still autoPlay ([6aa3cc4](https://github.com/dohooo/react-native-reanimated-carousel/commit/6aa3cc4a557efaa9e3262202f4a98ff960255b54)), closes [#111](https://github.com/dohooo/react-native-reanimated-carousel/issues/111)
+
 ## [2.2.1](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.1.2...v2.2.1) (2022-01-16)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "2.2.1",
+    "version": "2.2.2",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",
@@ -35,7 +35,7 @@
         "android": "yarn --cwd example android",
         "android:pretty": "yarn --cwd example android:pretty",
         "pods": "cd example && pod-install --quiet",
-        "bootstrap": "yarn example && yarn && yarn pods",
+        "bootstrap": "yarn && yarn pods",
         "deploy": "cd example && yarn deploy"
     },
     "keywords": [

src/Carousel.tsx

@@ -25,6 +25,7 @@ function Carousel<T>(
 
     const {
         data,
+        rawData,
         loop,
         mode,
         style,
@@ -58,7 +59,7 @@ function Carousel<T>(
     }, [loop, size, data]);
 
     usePropsErrorBoundary(props);
-    useOnProgressChange({ size, offsetX, data, onProgressChange });
+    useOnProgressChange({ size, offsetX, rawData, onProgressChange });
 
     const carouselController = useCarouselController({
         loop,
@@ -135,11 +136,11 @@ function Carousel<T>(
     const renderLayout = React.useCallback(
         (item: T, i: number) => {
             let realIndex = i;
-            if (data.length === DATA_LENGTH.SINGLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
                 realIndex = i % 1;
             }
 
-            if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
                 realIndex = i % 2;
             }
 
@@ -162,7 +163,7 @@ function Carousel<T>(
             );
         },
         [
-            data,
+            rawData,
             offsetX,
             visibleRanges,
             renderItem,

src/hooks/useAutoPlay.ts

@@ -35,9 +35,12 @@ export function useAutoPlay(opts: {
     }, []);
 
     const start = React.useCallback(() => {
+        if (!autoPlay) {
+            return;
+        }
         stopped.current = false;
         play();
-    }, [play]);
+    }, [play, autoPlay]);
 
     React.useEffect(() => {
         if (autoPlay) {

src/hooks/useInitProps.ts

@@ -15,14 +15,17 @@ export type TInitializeCarouselProps<T> = TCarouselProps<T> &
         | 'height'
         | 'scrollAnimationDuration'
         | 'autoPlayInterval'
-    >;
+    > & {
+        // Raw data that has not been processed
+        rawData: T[];
+    };
 
 export function useInitProps<T>(
     props: TCarouselProps<T>
 ): TInitializeCarouselProps<T> {
     const {
         defaultIndex = 0,
-        data: _data = [],
+        data: rawData = [],
         loop = true,
         autoPlayInterval: _autoPlayInterval = 1000,
         scrollAnimationDuration = 500,
@@ -39,18 +42,18 @@ export function useInitProps<T>(
     const autoPlayInterval = Math.max(_autoPlayInterval, 0);
 
     const data = React.useMemo<T[]>(() => {
-        if (!loop) return _data;
+        if (!loop) return rawData;
 
-        if (_data.length === DATA_LENGTH.SINGLE_ITEM) {
-            return [_data[0], _data[0], _data[0]];
+        if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
+            return [rawData[0], rawData[0], rawData[0]];
         }
 
-        if (_data.length === DATA_LENGTH.DOUBLE_ITEM) {
-            return [_data[0], _data[1], _data[0], _data[1]];
+        if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
+            return [rawData[0], rawData[1], rawData[0], rawData[1]];
         }
 
-        return _data;
-    }, [_data, loop]);
+        return rawData;
+    }, [rawData, loop]);
 
     if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') {
         if (!props.modeConfig) {
@@ -63,6 +66,7 @@ export function useInitProps<T>(
         ...props,
         defaultIndex,
         data,
+        rawData,
         loop,
         autoPlayInterval,
         scrollAnimationDuration,

src/hooks/useOnProgressChange.ts

@@ -9,31 +9,32 @@ export function useOnProgressChange(
     opts: {
         size: number;
         offsetX: Animated.SharedValue<number>;
-    } & Pick<TCarouselProps, 'data' | 'onProgressChange'>
+        rawData: TCarouselProps['data'];
+    } & Pick<TCarouselProps, 'onProgressChange'>
 ) {
-    const { offsetX, data, size, onProgressChange } = opts;
+    const { offsetX, rawData, size, onProgressChange } = opts;
     useAnimatedReaction(
         () => offsetX.value,
         (_value) => {
             let value = _value;
 
-            if (data.length === DATA_LENGTH.SINGLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.SINGLE_ITEM) {
                 value = value % size;
             }
 
-            if (data.length === DATA_LENGTH.DOUBLE_ITEM) {
+            if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) {
                 value = value % (size * 2);
             }
 
             let absoluteProgress = Math.abs(value / size);
 
             if (value > 0) {
-                absoluteProgress = data.length - absoluteProgress;
+                absoluteProgress = rawData.length - absoluteProgress;
             }
 
             !!onProgressChange &&
                 runOnJS(onProgressChange)(value, absoluteProgress);
         },
-        [onProgressChange, data]
+        [onProgressChange, rawData]
     );
 }