From f49dc2fb2b5700d38621c85395a75ace3a311e92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?=
 <zhaodonghao@zhaodonhaodeMBP.lan>
Date: Sun, 5 Dec 2021 16:26:49 +0800
Subject: [PATCH 1/4] refactor: refactor useOffsetX

---
 example/src/App.tsx          | 18 ++++++++++----
 src/hooks/useComputedAnim.ts |  7 ++++--
 src/hooks/useOffsetX.ts      | 47 ++++++++++++++++++++++++++----------
 3 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index f108c471..d49aed39 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -22,6 +22,7 @@ const data: ImageSourcePropType[] = [
     require('../assets/carousel-0.jpg'),
     require('../assets/carousel-1.jpg'),
     require('../assets/carousel-2.jpg'),
+    require('../assets/carousel-1.jpg'),
 ];
 
 export default function App() {
@@ -37,11 +38,18 @@ export default function App() {
                 paddingTop: 100,
             }}
         >
-            <View style={{ height: 240 }}>
+            <View
+                style={{
+                    height: 240,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: [{ scale: 0.8 }],
+                }}
+            >
                 <Carousel<ImageSourcePropType>
-                    defaultIndex={1}
                     ref={r}
-                    width={window.width}
+                    style={{ borderColor: 'red', borderWidth: 1 }}
+                    width={window.width / 4}
                     data={data}
                     parallaxScrollingScale={0.8}
                     renderItem={(source) => (
@@ -78,7 +86,7 @@ export default function App() {
                 />
             </View>
             <View style={{ height: 240 }}>
-                <Carousel<ImageSourcePropType>
+                {/* <Carousel<ImageSourcePropType>
                     onProgressChange={(_, absoluteProgress) => {
                         progressValue.value = absoluteProgress;
                     }}
@@ -97,7 +105,7 @@ export default function App() {
                             />
                         </View>
                     )}
-                />
+                /> */}
                 {!!progressValue && (
                     <View
                         style={{
diff --git a/src/hooks/useComputedAnim.ts b/src/hooks/useComputedAnim.ts
index b8e0f80c..9f8e9f5a 100644
--- a/src/hooks/useComputedAnim.ts
+++ b/src/hooks/useComputedAnim.ts
@@ -3,14 +3,16 @@ export interface IComputedAnimResult {
     MIN: number;
     TOTAL_WIDTH: number;
     HALF_WIDTH: number;
+    ITEM_LENGTH: number;
 }
 
 export function useComputedAnim(
     width: number,
     ITEM_LENGTH: number
 ): IComputedAnimResult {
-    const MAX = (ITEM_LENGTH - 2) * width;
-    const MIN = -MAX;
+    const VALID_LENGTH = ITEM_LENGTH - 1;
+    const MAX = (VALID_LENGTH - 1) * width;
+    const MIN = -((VALID_LENGTH - 1) * width);
     const TOTAL_WIDTH = width * ITEM_LENGTH;
     const HALF_WIDTH = 0.5 * width;
 
@@ -19,5 +21,6 @@ export function useComputedAnim(
         MIN,
         TOTAL_WIDTH,
         HALF_WIDTH,
+        ITEM_LENGTH,
     };
 }
diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts
index 9cd684a0..3c64e228 100644
--- a/src/hooks/useOffsetX.ts
+++ b/src/hooks/useOffsetX.ts
@@ -16,20 +16,41 @@ interface IOpts {
 export const useOffsetX = (opts: IOpts) => {
     const { handlerOffsetX, index, width, computedAnimResult, loop } = opts;
     const x = useDerivedValue(() => {
-        const { MAX, MIN, TOTAL_WIDTH, HALF_WIDTH } = computedAnimResult;
+        const { ITEM_LENGTH } = computedAnimResult;
+        const VALID_LENGTH = ITEM_LENGTH - 1;
+        const TOTAL_WIDTH = width * ITEM_LENGTH;
+        const HALF_WIDTH = 0.5 * width;
+
         if (loop) {
-            const defaultPos = width * index;
-            const startPos =
-                defaultPos > MAX
-                    ? MAX - defaultPos
-                    : defaultPos < MIN
-                    ? MIN - defaultPos
-                    : defaultPos;
+            function getDefaultPos(
+                type: 'positive' | 'negative' = 'positive',
+                _length: number
+            ) {
+                const defaultPos = width * index;
+                let length = null;
+                if (type === 'positive') {
+                    length = _length;
+                } else {
+                    length = VALID_LENGTH - _length;
+                }
+                const boundary = length * width;
+
+                if (defaultPos > boundary) {
+                    return boundary - defaultPos;
+                }
+                return defaultPos;
+            }
+
+            const ccc = 2;
+            const startPos = getDefaultPos('positive', ccc);
+
+            const MAX = ccc * width;
+            const MIN = -((VALID_LENGTH - ccc) * width);
 
             const inputRange = [
                 -TOTAL_WIDTH,
-                -(MAX + HALF_WIDTH) - startPos - 1,
-                -(MAX + HALF_WIDTH) - startPos,
+                MIN - HALF_WIDTH - startPos - 1,
+                MIN - HALF_WIDTH - startPos,
                 0,
                 MAX + HALF_WIDTH - startPos,
                 MAX + HALF_WIDTH - startPos + 1,
@@ -38,11 +59,11 @@ export const useOffsetX = (opts: IOpts) => {
 
             const outputRange = [
                 startPos,
-                1.5 * width - 1,
-                -(MAX + HALF_WIDTH),
+                ccc * width + HALF_WIDTH - 1,
+                MIN - HALF_WIDTH,
                 startPos,
                 MAX + HALF_WIDTH,
-                -(1.5 * width - 1),
+                -((VALID_LENGTH - ccc) * width) - HALF_WIDTH + 1,
                 startPos,
             ];
 

From 7494522d3ef168ab511548b267b22958a641dca6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= <zhaodonghao586@outlook.com>
Date: Sun, 5 Dec 2021 20:54:26 +0800
Subject: [PATCH 2/4] refactor: refactor useOffsetX,support to custom carousel
 layout components

---
 example/src/App.tsx            | 73 ++++++++++++++++++++--------------
 src/Carousel.tsx               | 14 +++----
 src/CarouselItem.tsx           |  9 +++--
 src/hooks/useComputedAnim.ts   | 26 ------------
 src/hooks/useOffsetX.ts        | 59 +++++++++++++++------------
 src/layouts/ParallaxLayout.tsx |  7 ++--
 6 files changed, 91 insertions(+), 97 deletions(-)
 delete mode 100644 src/hooks/useComputedAnim.ts

diff --git a/example/src/App.tsx b/example/src/App.tsx
index d49aed39..082820d7 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -15,6 +15,7 @@ import Animated, {
     useAnimatedStyle,
     useSharedValue,
 } from 'react-native-reanimated';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 const window = Dimensions.get('window');
 
@@ -22,12 +23,12 @@ const data: ImageSourcePropType[] = [
     require('../assets/carousel-0.jpg'),
     require('../assets/carousel-1.jpg'),
     require('../assets/carousel-2.jpg'),
-    require('../assets/carousel-1.jpg'),
 ];
 
 export default function App() {
     const progressValue = useSharedValue<number>(0);
-    const r = React.useRef<ICarouselInstance | null>(null);
+    const defaultCarouselRef = React.useRef<ICarouselInstance | null>(null);
+    const parallaxCarouselRef = React.useRef<ICarouselInstance | null>(null);
 
     return (
         <View
@@ -35,21 +36,17 @@ export default function App() {
                 flex: 1,
                 alignItems: 'center',
                 backgroundColor: 'black',
-                paddingTop: 100,
+                paddingTop: 50,
             }}
         >
             <View
                 style={{
                     height: 240,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    transform: [{ scale: 0.8 }],
                 }}
             >
                 <Carousel<ImageSourcePropType>
-                    ref={r}
-                    style={{ borderColor: 'red', borderWidth: 1 }}
-                    width={window.width / 4}
+                    ref={defaultCarouselRef}
+                    width={window.width}
                     data={data}
                     parallaxScrollingScale={0.8}
                     renderItem={(source) => (
@@ -75,24 +72,25 @@ export default function App() {
                 <Button
                     title="Prev"
                     onPress={() => {
-                        r.current?.prev();
+                        defaultCarouselRef.current?.prev();
                     }}
                 />
                 <Button
                     title="Next"
                     onPress={() => {
-                        r.current?.next();
+                        defaultCarouselRef.current?.next();
                     }}
                 />
             </View>
             <View style={{ height: 240 }}>
-                {/* <Carousel<ImageSourcePropType>
+                <Carousel<ImageSourcePropType>
                     onProgressChange={(_, absoluteProgress) => {
                         progressValue.value = absoluteProgress;
                     }}
                     mode="parallax"
                     width={window.width}
                     data={data}
+                    ref={parallaxCarouselRef}
                     parallaxScrollingScale={0.8}
                     renderItem={(source) => (
                         <View style={{ flex: 1 }}>
@@ -105,7 +103,7 @@ export default function App() {
                             />
                         </View>
                     )}
-                /> */}
+                />
                 {!!progressValue && (
                     <View
                         style={{
@@ -122,6 +120,12 @@ export default function App() {
                                     index={index}
                                     key={index}
                                     length={data.length}
+                                    onPress={() => {
+                                        parallaxCarouselRef.current?.goToIndex(
+                                            index,
+                                            true
+                                        );
+                                    }}
                                 />
                             );
                         })}
@@ -136,8 +140,9 @@ const PaginationItem: React.FC<{
     index: number;
     length: number;
     animValue: Animated.SharedValue<number>;
+    onPress?: () => void;
 }> = (props) => {
-    const { animValue, index, length } = props;
+    const { onPress, animValue, index, length } = props;
     const width = 20;
 
     const animStyle = useAnimatedStyle(() => {
@@ -162,22 +167,32 @@ const PaginationItem: React.FC<{
             ],
         };
     }, [animValue, index, length]);
+
     return (
-        <View
-            style={{
-                backgroundColor: 'white',
-                width,
-                height: width,
-                borderRadius: 50,
-                overflow: 'hidden',
-            }}
+        <TouchableWithoutFeedback
+            containerStyle={{ flex: 1 }}
+            onPress={onPress}
         >
-            <Animated.View
-                style={[
-                    { borderRadius: 50, backgroundColor: 'tomato', flex: 1 },
-                    animStyle,
-                ]}
-            />
-        </View>
+            <View
+                style={{
+                    backgroundColor: 'white',
+                    width,
+                    height: width,
+                    borderRadius: 50,
+                    overflow: 'hidden',
+                }}
+            >
+                <Animated.View
+                    style={[
+                        {
+                            borderRadius: 50,
+                            backgroundColor: 'tomato',
+                            flex: 1,
+                        },
+                        animStyle,
+                    ]}
+                />
+            </View>
+        </TouchableWithoutFeedback>
     );
 };
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
index fd86c6de..96266f74 100644
--- a/src/Carousel.tsx
+++ b/src/Carousel.tsx
@@ -18,7 +18,6 @@ import { CarouselItem } from './CarouselItem';
 import type { TMode } from './layouts';
 import { ParallaxLayout } from './layouts/index';
 import { useCarouselController } from './hooks/useCarouselController';
-import { useComputedAnim } from './hooks/useComputedAnim';
 import { useAutoPlay } from './hooks/useAutoPlay';
 import { useIndexController } from './hooks/useIndexController';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
@@ -204,8 +203,6 @@ function Carousel<T extends unknown = any>(
         return _data;
     }, [_data, loop]);
 
-    const computedAnimResult = useComputedAnim(width, data.length);
-
     const indexController = useIndexController({
         originalLength: _data.length,
         length: data.length,
@@ -247,13 +244,14 @@ function Carousel<T extends unknown = any>(
     }, [sharedPreIndex, sharedIndex, computedIndex, props, run]);
 
     const offsetX = useDerivedValue(() => {
-        const x = handlerOffsetX.value % computedAnimResult.TOTAL_WIDTH;
+        const totalWidth = width * data.length;
+        const x = handlerOffsetX.value % totalWidth;
 
         if (!loop) {
             return handlerOffsetX.value;
         }
         return isNaN(x) ? 0 : x;
-    }, [computedAnimResult, loop]);
+    }, [loop, width, data]);
 
     useAnimatedReaction(
         () => offsetX.value,
@@ -389,7 +387,7 @@ function Carousel<T extends unknown = any>(
                         <ParallaxLayout
                             parallaxScrollingOffset={parallaxScrollingOffset}
                             parallaxScrollingScale={parallaxScrollingScale}
-                            computedAnimResult={computedAnimResult}
+                            data={data}
                             width={width}
                             handlerOffsetX={offsetX}
                             index={i}
@@ -402,7 +400,7 @@ function Carousel<T extends unknown = any>(
                 default:
                     return (
                         <CarouselItem
-                            computedAnimResult={computedAnimResult}
+                            data={data}
                             width={width}
                             height={height}
                             handlerOffsetX={offsetX}
@@ -418,7 +416,7 @@ function Carousel<T extends unknown = any>(
         [
             loop,
             mode,
-            computedAnimResult,
+            data,
             height,
             offsetX,
             parallaxScrollingOffset,
diff --git a/src/CarouselItem.tsx b/src/CarouselItem.tsx
index d12e82da..cf7f20a7 100644
--- a/src/CarouselItem.tsx
+++ b/src/CarouselItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { FlexStyle, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import type { IComputedAnimResult } from './hooks/useComputedAnim';
 import { useOffsetX } from './hooks/useOffsetX';
 
 export const CarouselItem: React.FC<{
@@ -9,8 +8,8 @@ export const CarouselItem: React.FC<{
     index: number;
     handlerOffsetX: Animated.SharedValue<number>;
     width: number;
+    data: unknown[];
     height?: FlexStyle['height'];
-    computedAnimResult: IComputedAnimResult;
 }> = (props) => {
     const {
         handlerOffsetX,
@@ -18,16 +17,18 @@ export const CarouselItem: React.FC<{
         children,
         width,
         height = '100%',
-        computedAnimResult,
         loop,
+        data,
     } = props;
+
     const x = useOffsetX({
         handlerOffsetX,
         index,
         width,
-        computedAnimResult,
+        data,
         loop,
     });
+
     const offsetXStyle = useAnimatedStyle(() => {
         return {
             transform: [{ translateX: x.value - index * width }],
diff --git a/src/hooks/useComputedAnim.ts b/src/hooks/useComputedAnim.ts
deleted file mode 100644
index 9f8e9f5a..00000000
--- a/src/hooks/useComputedAnim.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface IComputedAnimResult {
-    MAX: number;
-    MIN: number;
-    TOTAL_WIDTH: number;
-    HALF_WIDTH: number;
-    ITEM_LENGTH: number;
-}
-
-export function useComputedAnim(
-    width: number,
-    ITEM_LENGTH: number
-): IComputedAnimResult {
-    const VALID_LENGTH = ITEM_LENGTH - 1;
-    const MAX = (VALID_LENGTH - 1) * width;
-    const MIN = -((VALID_LENGTH - 1) * width);
-    const TOTAL_WIDTH = width * ITEM_LENGTH;
-    const HALF_WIDTH = 0.5 * width;
-
-    return {
-        MAX,
-        MIN,
-        TOTAL_WIDTH,
-        HALF_WIDTH,
-        ITEM_LENGTH,
-    };
-}
diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts
index 3c64e228..9cc7b48e 100644
--- a/src/hooks/useOffsetX.ts
+++ b/src/hooks/useOffsetX.ts
@@ -3,37 +3,46 @@ import Animated, {
     interpolate,
     useDerivedValue,
 } from 'react-native-reanimated';
-import type { IComputedAnimResult } from './useComputedAnim';
 
 interface IOpts {
     index: number;
     width: number;
-    computedAnimResult: IComputedAnimResult;
     handlerOffsetX: Animated.SharedValue<number>;
+    data: unknown[];
+    type?: 'positive' | 'negative';
+    viewCount?: number;
     loop?: boolean;
 }
 
 export const useOffsetX = (opts: IOpts) => {
-    const { handlerOffsetX, index, width, computedAnimResult, loop } = opts;
-    const x = useDerivedValue(() => {
-        const { ITEM_LENGTH } = computedAnimResult;
-        const VALID_LENGTH = ITEM_LENGTH - 1;
-        const TOTAL_WIDTH = width * ITEM_LENGTH;
-        const HALF_WIDTH = 0.5 * width;
+    const {
+        handlerOffsetX,
+        index,
+        width,
+        loop,
+        data,
+        type = 'positive',
+        viewCount = 1,
+    } = opts;
+    const ITEM_LENGTH = data.length;
+    const VALID_LENGTH = ITEM_LENGTH - 1;
+    const TOTAL_WIDTH = width * ITEM_LENGTH;
+    const HALF_WIDTH = 0.5 * width;
 
+    const x = useDerivedValue(() => {
+        const defaultPos = width * index;
         if (loop) {
             function getDefaultPos(
-                type: 'positive' | 'negative' = 'positive',
-                _length: number
+                _type: 'positive' | 'negative',
+                _count: number
             ) {
-                const defaultPos = width * index;
-                let length = null;
-                if (type === 'positive') {
-                    length = _length;
+                let boundary = null;
+
+                if (_type === 'positive') {
+                    boundary = _count * width;
                 } else {
-                    length = VALID_LENGTH - _length;
+                    boundary = (VALID_LENGTH - _count) * width;
                 }
-                const boundary = length * width;
 
                 if (defaultPos > boundary) {
                     return boundary - defaultPos;
@@ -41,11 +50,9 @@ export const useOffsetX = (opts: IOpts) => {
                 return defaultPos;
             }
 
-            const ccc = 2;
-            const startPos = getDefaultPos('positive', ccc);
-
-            const MAX = ccc * width;
-            const MIN = -((VALID_LENGTH - ccc) * width);
+            const startPos = getDefaultPos(type, viewCount);
+            const MAX = viewCount * width;
+            const MIN = -((VALID_LENGTH - viewCount) * width);
 
             const inputRange = [
                 -TOTAL_WIDTH,
@@ -59,11 +66,11 @@ export const useOffsetX = (opts: IOpts) => {
 
             const outputRange = [
                 startPos,
-                ccc * width + HALF_WIDTH - 1,
+                MAX + HALF_WIDTH - 1,
                 MIN - HALF_WIDTH,
                 startPos,
                 MAX + HALF_WIDTH,
-                -((VALID_LENGTH - ccc) * width) - HALF_WIDTH + 1,
+                MIN - HALF_WIDTH + 1,
                 startPos,
             ];
 
@@ -75,8 +82,8 @@ export const useOffsetX = (opts: IOpts) => {
             );
         }
 
-        const startPos = width * index;
-        return handlerOffsetX.value + startPos;
-    }, [loop, computedAnimResult]);
+        return handlerOffsetX.value + defaultPos;
+    }, [loop, data, viewCount, type]);
+
     return x;
 };
diff --git a/src/layouts/ParallaxLayout.tsx b/src/layouts/ParallaxLayout.tsx
index e21f078c..9a11637f 100644
--- a/src/layouts/ParallaxLayout.tsx
+++ b/src/layouts/ParallaxLayout.tsx
@@ -6,7 +6,6 @@ import Animated, {
     interpolate,
     useAnimatedStyle,
 } from 'react-native-reanimated';
-import type { IComputedAnimResult } from 'src/hooks/useComputedAnim';
 import { useOffsetX } from '../hooks/useOffsetX';
 
 export const ParallaxLayout: React.FC<{
@@ -16,7 +15,7 @@ export const ParallaxLayout: React.FC<{
     handlerOffsetX: Animated.SharedValue<number>;
     index: number;
     width: number;
-    computedAnimResult: IComputedAnimResult;
+    data: unknown[];
 }> = (props) => {
     const {
         handlerOffsetX,
@@ -25,15 +24,15 @@ export const ParallaxLayout: React.FC<{
         index,
         width,
         loop,
+        data,
         children,
-        computedAnimResult,
     } = props;
 
     const x = useOffsetX({
         handlerOffsetX,
         index,
         width,
-        computedAnimResult,
+        data,
         loop,
     });
 

From e9a30070dbae04a889015be05aff398079f35e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= <zhaodonghao586@outlook.com>
Date: Sun, 5 Dec 2021 22:59:22 +0800
Subject: [PATCH 3/4] fix: fix computed error with MAX/MIN

---
 src/hooks/useOffsetX.ts | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts
index 9cc7b48e..daf4b60b 100644
--- a/src/hooks/useOffsetX.ts
+++ b/src/hooks/useOffsetX.ts
@@ -35,24 +35,36 @@ export const useOffsetX = (opts: IOpts) => {
             function getDefaultPos(
                 _type: 'positive' | 'negative',
                 _count: number
-            ) {
-                let boundary = null;
+            ): {
+                MAX: number;
+                MIN: number;
+                startPos: number;
+            } {
+                let MAX = null;
+                let MIN = null;
+
+                let startPos: number = defaultPos;
 
                 if (_type === 'positive') {
-                    boundary = _count * width;
+                    MAX = _count * width;
+                    MIN = -(VALID_LENGTH - _count) * width;
                 } else {
-                    boundary = (VALID_LENGTH - _count) * width;
+                    MAX = (VALID_LENGTH - _count) * width;
+                    MIN = -_count * width;
                 }
 
-                if (defaultPos > boundary) {
-                    return boundary - defaultPos;
+                if (defaultPos > MAX) {
+                    startPos = MAX - defaultPos;
                 }
-                return defaultPos;
+
+                return {
+                    startPos,
+                    MAX,
+                    MIN,
+                };
             }
 
-            const startPos = getDefaultPos(type, viewCount);
-            const MAX = viewCount * width;
-            const MIN = -((VALID_LENGTH - viewCount) * width);
+            const { startPos, MAX, MIN } = getDefaultPos(type, viewCount);
 
             const inputRange = [
                 -TOTAL_WIDTH,

From dd30b9c0ec52917eeb1d0a144e46318a1bae7da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= <zhaodonghao586@outlook.com>
Date: Sun, 5 Dec 2021 23:12:07 +0800
Subject: [PATCH 4/4] fix: modify useOffsetX viewCount default value

---
 src/hooks/useOffsetX.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts
index daf4b60b..ff8de154 100644
--- a/src/hooks/useOffsetX.ts
+++ b/src/hooks/useOffsetX.ts
@@ -22,7 +22,7 @@ export const useOffsetX = (opts: IOpts) => {
         loop,
         data,
         type = 'positive',
-        viewCount = 1,
+        viewCount = Math.round((data.length - 1) / 2),
     } = opts;
     const ITEM_LENGTH = data.length;
     const VALID_LENGTH = ITEM_LENGTH - 1;