fix: fix algorithm errors

dohooo · Sep 7, 2021 · af61df8 · af61df8
1 parent 2dcceb8
commit af61df8
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 34 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -20,10 +20,13 @@ export default function App() {
             <View style={{ height: 300 }}>
                 <Carousel<{ color: string }>
                     width={width}
+                    height={300}
                     data={[
                         { color: 'red' },
                         { color: 'purple' },
-                        { color: 'yellow' },
+                        { color: 'blue' },
+                        { color: 'pink' },
+                        { color: 'green' },
                     ]}
                     renderItem={({ color }) => {
                         return (

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated-carousel",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -14,7 +14,7 @@ import Animated, {
 import { CarouselItem } from './CarouselItem';
 import { fillNum } from './fillNum';
 import type { TLayout } from './layouts';
-import { DefaultLayout } from './layouts/DefaultLayout';
+import { DefaultLayout } from './layouts/index';
 import { useCarouselController } from './useCarouselController';
 import { useComputedAnim } from './useComputedAnim';
 
@@ -103,7 +103,7 @@ function Carousel<T extends unknown = any>(
 ) {
     const {
         height = '100%',
-        data,
+        data: _data = [],
         width,
         layout = 'default',
         renderItem,
@@ -117,6 +117,15 @@ function Carousel<T extends unknown = any>(
     const { onPressItem } = props;
     const handlerOffsetX = useSharedValue<number>(0);
     const timer = React.useRef<NodeJS.Timer>();
+    const data = React.useMemo<T[]>(() => {
+        if (_data.length === 1) {
+            return [_data[0], _data[0], _data[0]];
+        }
+        if (_data.length === 2) {
+            return [_data[0], _data[1], _data[0], _data[1]];
+        }
+        return _data;
+    }, [_data]);
     const computedAnimResult = useComputedAnim(width, data.length);
     const { next, prev } = useCarouselController({ width, handlerOffsetX });
     const offsetX = useDerivedValue(
@@ -188,8 +197,9 @@ function Carousel<T extends unknown = any>(
     const Layouts = React.useMemo(() => {
         switch (layout) {
             case 'default':
-            default:
                 return DefaultLayout;
+            default:
+                return undefined;
         }
     }, [layout]);
 
@@ -202,6 +212,7 @@ function Carousel<T extends unknown = any>(
                         width,
                         height,
                         flexDirection: 'row',
+                        position: 'relative',
                     },
                     style,
                 ]}
@@ -217,19 +228,24 @@ function Carousel<T extends unknown = any>(
                             index={index}
                             key={index}
                         >
-                            {/* <View style={{ backgroundColor: "red", flex: 1 }} /> */}
-                            <Layouts
-                                parallaxScrollingOffset={
-                                    parallaxScrollingOffset
-                                }
-                                parallaxScrollingScale={parallaxScrollingScale}
-                                computedAnimResult={computedAnimResult}
-                                width={width}
-                                handlerOffsetX={offsetX}
-                                index={index}
-                            >
-                                {renderItem(item, index)}
-                            </Layouts>
+                            {Layouts ? (
+                                <Layouts
+                                    parallaxScrollingOffset={
+                                        parallaxScrollingOffset
+                                    }
+                                    parallaxScrollingScale={
+                                        parallaxScrollingScale
+                                    }
+                                    computedAnimResult={computedAnimResult}
+                                    width={width}
+                                    handlerOffsetX={offsetX}
+                                    index={index}
+                                >
+                                    {renderItem(item, index)}
+                                </Layouts>
+                            ) : (
+                                renderItem(item, index)
+                            )}
                         </CarouselItem>
                     );
                 })}

diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
@@ -1,5 +1,3 @@
-import { DefaultLayout } from './DefaultLayout';
+export { DefaultLayout } from './DefaultLayout';
 
 export type TLayout = 'default';
-
-export default { DefaultLayout };
diff --git a/src/useComputedAnim.ts b/src/useComputedAnim.ts
@@ -2,19 +2,21 @@ export interface IComputedAnimResult {
     MAX: number;
     MIN: number;
     WL: number;
+    LENGTH: number;
 }
 
 export function useComputedAnim(
     width: number,
-    length: number
+    LENGTH: number
 ): IComputedAnimResult {
-    const MAX = ((length - 1) / 2) * width * 1;
-    const MIN = ((length - 1) / 2) * width * -1;
-    const WL = width * length;
+    const MAX = (LENGTH - 2) * width;
+    const MIN = -MAX;
+    const WL = width * LENGTH;
 
     return {
         MAX,
         MIN,
         WL,
+        LENGTH,
     };
 }
diff --git a/src/useOffsetX.ts b/src/useOffsetX.ts
@@ -14,28 +14,32 @@ interface IOpts {
 
 export const useOffsetX = (opts: IOpts) => {
     const { handlerOffsetX, index, width, computedAnimResult } = opts;
-    const { MAX, WL, MIN } = computedAnimResult;
+    const { MAX, WL, MIN, LENGTH } = computedAnimResult;
     const x = useDerivedValue(() => {
         const Wi = width * index;
         const startPos = Wi > MAX ? MAX - Wi : Wi < MIN ? MIN - Wi : Wi;
         const inputRange = [
             -WL,
-            -WL / 2 - startPos - 1,
-            -WL / 2 - startPos,
+            -((LENGTH - 2) * width + width / 2) - startPos - 1,
+            -((LENGTH - 2) * width + width / 2) - startPos,
             0,
-            WL / 2 - startPos,
-            WL / 2 - startPos + 1,
+            (LENGTH - 2) * width + width / 2 - startPos,
+            (LENGTH - 2) * width + width / 2 - startPos + 1,
             WL,
         ];
         const outputRange = [
             startPos,
-            WL / 2 - 1,
-            -WL / 2,
+            1.5 * width - 1,
+            -((LENGTH - 2) * width + width / 2),
             startPos,
-            WL / 2,
-            -WL / 2 + 1,
+            (LENGTH - 2) * width + width / 2,
+            -(1.5 * width - 1),
             startPos,
         ];
+        if (index === 1) {
+            console.log(JSON.stringify(inputRange));
+            console.log(JSON.stringify(outputRange));
+        }
         return interpolate(
             handlerOffsetX.value,
             inputRange,