react-native-reanimated-carousel 4.0.0-alpha.1 → 4.0.0-alpha.10

package/lib/typescript/types.d.ts

@@ -137,10 +137,19 @@ export declare type TCarouselProps<T = any> = {
     testID?: string;
     /**
        * Maximum offset value for once scroll.
-       * props.vertical = true => maxScrollDistancePerSwipeY
-       * props.vertical = false => maxScrollDistancePerSwipeX
+       * Carousel cannot scroll over than this value.
        * */
     maxScrollDistancePerSwipe?: number;
+    /**
+      * Minimum offset value for once scroll.
+      * If the translation value is less than this value, the carousel will not scroll.
+      * */
+    minScrollDistancePerSwipe?: number;
+    /**
+       * @experimental This API will be changed in the future.
+       * If positive, the carousel will scroll to the positive direction and vice versa.
+       * */
+    fixedDirection?: "positive" | "negative";
     /**
         * Custom carousel config.
         */
@@ -159,9 +168,9 @@ export declare type TCarouselProps<T = any> = {
         */
     onSnapToItem?: (index: number) => void;
     /**
-        * On scroll begin
+        * On scroll start
         */
-    onScrollBegin?: () => void;
+    onScrollStart?: () => void;
     /**
         * On scroll end
         */

package/lib/typescript/utils/{computeNewIndexWhenDataChanges.d.ts → compute-offset-if-data-changed.d.ts}

@@ -1,5 +1,5 @@
 export declare function omitZero(a: number, b: number): number;
-export declare function computeNewIndexWhenDataChanges(params: {
+export declare function computeOffsetIfDataChanged(params: {
     direction: number;
     handlerOffset: number;
     size: number;

package/lib/typescript/utils/compute-offset-if-data-changed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/utils/compute-offset-if-size-changed.d.ts

@@ -0,0 +1,5 @@
+export declare function computeOffsetIfSizeChanged(params: {
+    handlerOffset: number;
+    prevSize: number;
+    size: number;
+}): number;

package/lib/typescript/utils/compute-offset-if-size-changed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/utils/handleroffset-direction.d.ts

@@ -1,2 +1,3 @@
 import type { SharedValue } from "react-native-reanimated";
-export declare function handlerOffsetDirection(handlerOffset: SharedValue<number>): -1 | 1;
+import type { TCarouselProps } from "../types";
+export declare function handlerOffsetDirection(handlerOffset: SharedValue<number>, fixedDirection?: TCarouselProps["fixedDirection"]): -1 | 1;

package/lib/typescript/utils/handleroffset-direction.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "4.0.0-alpha.1",
+    "version": "4.0.0-alpha.10",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",
@@ -14,24 +14,13 @@
     "scripts": {
         "gif": "node scripts/makegif.js ./scripts/gif-works-directory",
         "test": "jest run src/**/*",
-        "test:dev": "jest dev src/**/*",
+        "test:dev": "jest dev src/**/* --watch",
         "typescript": "tsc --noEmit",
         "lint": "eslint 'src/**/*.{js,ts,tsx}'",
         "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
         "dev": "watch 'yarn prepare' ./src",
         "prepare": "bob build",
-        "release": "yarn prepare && dotenv release-it --no-git.requireUpstream",
-        "preRelease": "yarn prepare && dotenv release-it --no-git.requireUpstream --preRelease=beta",
-        "ios": "yarn --cwd exampleExpo ios",
-        "ios:pretty": "yarn --cwd exampleExpo ios:pretty",
-        "web": "yarn --cwd exampleExpo web",
-        "web:pretty": "yarn --cwd exampleExpo web:pretty",
-        "android": "yarn --cwd exampleExpo android",
-        "android:pretty": "yarn --cwd exampleExpo android:pretty",
-        "pods": "cd exampleExpo && pod-install --quiet",
-        "bootstrap": "yarn && yarn pods",
-        "deploy": "cd exampleExpo && yarn deploy",
-        "publish": "yarn run prepare && changeset publish",
+        "clean": "del-cli lib",
         "version": "changeset version"
     },
     "keywords": [
@@ -39,7 +28,10 @@
         "ios",
         "android"
     ],
-    "repository": "https://github.com/dohooo/react-native-reanimated-carousel",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dohooo/react-native-reanimated-carousel.git"
+    },
     "author": "Doho <zhaodonghao586@outlook.com> (https://github.com/dohooo)",
     "license": "MIT",
     "bugs": {
@@ -50,24 +42,28 @@
         "registry": "https://registry.npmjs.org/"
     },
     "devDependencies": {
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "latest",
         "@commitlint/config-conventional": "^11.0.0",
         "@dohooo/eslint-config": "^0.0.7",
         "@react-native-community/eslint-config": "^2.0.0",
-        "@release-it/conventional-changelog": "^2.0.0",
+        "@testing-library/jest-native": "^4.0.4",
+        "@testing-library/react-hooks": "^8.0.0",
+        "@testing-library/react-native": "^7.1.0",
         "@types/jest": "^29.2.5",
         "@types/react": "^18.2.15",
         "@types/react-native": "^0.66.16",
-        "@types/react-native-snap-carousel": "^3.8.5",
-        "babel-plugin-inline-dotenv": "^1.6.0",
+        "@types/react-test-renderer": "^18.0.7",
         "babel-plugin-module-resolver": "^4.1.0",
         "commitlint": "^11.0.0",
         "cz-conventional-changelog": "^3.3.0",
-        "dotenv-cli": "^5.1.0",
+        "del-cli": "^5.0.0",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^7.0.0",
+        "eslint-plugin-jest": "^27.6.0",
         "eslint-plugin-prettier": "^3.1.3",
         "gifify": "^2.4.3",
         "husky": "^4.2.5",
@@ -80,7 +76,7 @@
         "react-native-builder-bob": "^0.18.1",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-reanimated": "~3.3.0",
-        "release-it": "^14.2.2",
+        "react-test-renderer": "^18.2.0",
         "sponsorkit": "^0.1.3",
         "typescript": "^4.0.8",
         "watch": "^1.0.2"
@@ -101,14 +97,6 @@
             "optional": true
         }
     },
-    "jest": {
-        "preset": "react-native",
-        "modulePathIgnorePatterns": [
-            "<rootDir>/exampleExpo/node_modules",
-            "<rootDir>/exampleBare/node_modules",
-            "<rootDir>/lib/"
-        ]
-    },
     "husky": {
         "hooks": {
             "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
@@ -120,37 +108,6 @@
             "@commitlint/config-conventional"
         ]
     },
-    "release-it": {
-        "git": {
-            "commitMessage": "chore: release ${version}",
-            "tagName": "v${version}"
-        },
-        "npm": {
-            "publish": true
-        },
-        "github": {
-            "release": true
-        },
-        "plugins": {
-            "@release-it/conventional-changelog": {
-                "preset": {
-                    "name": "angular",
-                    "types": [
-                        {
-                            "type": "feat",
-                            "section": "Features"
-                        },
-                        {
-                            "type": "fix",
-                            "section": "Bug Fixes"
-                        },
-                        {}
-                    ]
-                },
-                "infile": "CHANGELOG.md"
-            }
-        }
-    },
     "react-native-builder-bob": {
         "source": "src",
         "output": "lib",

package/src/{layouts → components}/BaseLayout.tsx

@@ -2,19 +2,14 @@ import React from "react";
 import type { ViewStyle } from "react-native";
 import type { AnimatedStyleProp } from "react-native-reanimated";
 import Animated, {
-  runOnJS,
-  useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
 } from "react-native-reanimated";
 
-import type { ILayoutConfig } from "./stack";
-
-import { LazyView } from "../components/LazyView";
-import { useCheckMounted } from "../hooks/useCheckMounted";
 import type { IOpts } from "../hooks/useOffsetX";
 import { useOffsetX } from "../hooks/useOffsetX";
 import type { IVisibleRanges } from "../hooks/useVisibleRanges";
+import type { ILayoutConfig } from "../layouts/stack";
 import { CTX } from "../store";
 
 export type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;
@@ -28,9 +23,8 @@ export const BaseLayout: React.FC<{
     animationValue: Animated.SharedValue<number>
   }) => React.ReactElement
 }> = (props) => {
-  const mounted = useCheckMounted();
   const { handlerOffset, index, children, visibleRanges, animationStyle }
-  = props;
+    = props;
 
   const context = React.useContext(CTX);
   const {
@@ -46,7 +40,7 @@ export const BaseLayout: React.FC<{
     },
   } = context;
   const size = vertical ? height : width;
-  const [shouldUpdate, setShouldUpdate] = React.useState(false);
+
   let offsetXConfig: IOpts = {
     handlerOffset,
     index,
@@ -73,30 +67,10 @@ export const BaseLayout: React.FC<{
   const x = useOffsetX(offsetXConfig, visibleRanges);
   const animationValue = useDerivedValue(() => x.value / size, [x, size]);
   const animatedStyle = useAnimatedStyle(
-    () => animationStyle(x.value / size),
-    [animationStyle],
-  );
-
-  const updateView = React.useCallback(
-    (negativeRange: number[], positiveRange: number[]) => {
-      mounted.current
-                && setShouldUpdate(
-                  (index >= negativeRange[0] && index <= negativeRange[1])
-                        || (index >= positiveRange[0] && index <= positiveRange[1]),
-                );
-    },
-    [index, mounted],
-  );
-
-  useAnimatedReaction(
-    () => visibleRanges.value,
     () => {
-      runOnJS(updateView)(
-        visibleRanges.value.negativeRange,
-        visibleRanges.value.positiveRange,
-      );
+      return animationStyle(x.value / size);
     },
-    [visibleRanges.value],
+    [animationStyle],
   );
 
   return (
@@ -114,11 +88,9 @@ export const BaseLayout: React.FC<{
        * e.g.
        *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.
        * */
-      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? "READY" : "NOT_READY"}__`}
+      testID={`__CAROUSEL_ITEM_${index}__`}
     >
-      <LazyView shouldUpdate={shouldUpdate}>
-        {children({ animationValue })}
-      </LazyView>
+      {children({ animationValue })}
     </Animated.View>
   );
 };

package/src/components/Carousel.tsx

@@ -3,6 +3,7 @@ import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { runOnJS, useDerivedValue } from "react-native-reanimated";
 
+import { ItemRenderer } from "./ItemRenderer";
 import { ScrollViewGesture } from "./ScrollViewGesture";
 
 import { useAutoPlay } from "../hooks/useAutoPlay";
@@ -12,8 +13,6 @@ import { useInitProps } from "../hooks/useInitProps";
 import { useLayoutConfig } from "../hooks/useLayoutConfig";
 import { useOnProgressChange } from "../hooks/useOnProgressChange";
 import { usePropsErrorBoundary } from "../hooks/usePropsErrorBoundary";
-import { useVisibleRanges } from "../hooks/useVisibleRanges";
-import { BaseLayout } from "../layouts/BaseLayout";
 import { CTX } from "../store";
 import type { ICarouselInstance, TCarouselProps } from "../types";
 import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
@@ -30,8 +29,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       data,
       // Length of fill data
       dataLength,
-      // Raw data that has not been processed
-      rawData,
       // Length of raw data
       rawDataLength,
       mode,
@@ -45,10 +42,11 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       autoPlayInterval,
       scrollAnimationDuration,
       withAnimation,
+      fixedDirection,
       renderItem,
       onScrollEnd,
       onSnapToItem,
-      onScrollBegin,
+      onScrollStart,
       onProgressChange,
       customAnimation,
       defaultIndex,
@@ -85,9 +83,10 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       handlerOffset,
       withAnimation,
       defaultIndex,
-      onScrollEnd: () => runOnJS(_onScrollEnd)(),
-      onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
+      fixedDirection,
       duration: scrollAnimationDuration,
+      onScrollEnd: () => runOnJS(_onScrollEnd)(),
+      onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),
     });
 
     const { next, prev, scrollTo, getSharedIndex, getCurrentIndex }
@@ -124,10 +123,10 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       onScrollEnd,
     ]);
 
-    const scrollViewGestureOnScrollBegin = React.useCallback(() => {
+    const scrollViewGestureOnScrollStart = React.useCallback(() => {
       pauseAutoPlay();
-      onScrollBegin?.();
-    }, [onScrollBegin, pauseAutoPlay]);
+      onScrollStart?.();
+    }, [onScrollStart, pauseAutoPlay]);
 
     const scrollViewGestureOnScrollEnd = React.useCallback(() => {
       startAutoPlay();
@@ -153,54 +152,8 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       [getCurrentIndex, next, prev, scrollTo],
     );
 
-    const visibleRanges = useVisibleRanges({
-      total: dataLength,
-      viewSize: size,
-      translation: handlerOffset,
-      windowSize,
-    });
-
     const layoutConfig = useLayoutConfig({ ...props, size });
 
-    const renderLayout = React.useCallback(
-      (item: any, i: number) => {
-        const realIndex = computedRealIndexWithAutoFillData({
-          index: i,
-          dataLength: rawDataLength,
-          loop,
-          autoFillData,
-        });
-
-        return (
-          <BaseLayout
-            key={i}
-            index={i}
-            handlerOffset={offsetX}
-            visibleRanges={visibleRanges}
-            animationStyle={customAnimation || layoutConfig}
-          >
-            {({ animationValue }) =>
-              renderItem({
-                item,
-                index: realIndex,
-                animationValue,
-              })
-            }
-          </BaseLayout>
-        );
-      },
-      [
-        loop,
-        rawData,
-        offsetX,
-        visibleRanges,
-        autoFillData,
-        renderItem,
-        layoutConfig,
-        customAnimation,
-      ],
-    );
-
     return (
       <GestureHandlerRootView>
         <CTX.Provider value={{ props, common: commonVariables }}>
@@ -220,12 +173,25 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
                 : styles.itemsHorizontal,
             ]}
             testID={testID}
-            onScrollBegin={scrollViewGestureOnScrollBegin}
+            onScrollStart={scrollViewGestureOnScrollStart}
             onScrollEnd={scrollViewGestureOnScrollEnd}
             onTouchBegin={scrollViewGestureOnTouchBegin}
             onTouchEnd={scrollViewGestureOnTouchEnd}
           >
-            {data.map(renderLayout)}
+            <ItemRenderer
+              data={data}
+              dataLength={dataLength}
+              rawDataLength={rawDataLength}
+              loop={loop}
+              size={size}
+              windowSize={windowSize}
+              autoFillData={autoFillData}
+              offsetX={offsetX}
+              handlerOffset={handlerOffset}
+              layoutConfig={layoutConfig}
+              renderItem={renderItem}
+              customAnimation={customAnimation}
+            />
           </ScrollViewGesture>
         </CTX.Provider>
       </GestureHandlerRootView>

package/src/components/ItemRenderer.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import type { FC } from "react";
+import type { ViewStyle } from "react-native";
+import type Animated from "react-native-reanimated";
+import { useAnimatedReaction, type AnimatedStyleProp, runOnJS } from "react-native-reanimated";
+
+import type { TAnimationStyle } from "./BaseLayout";
+import { BaseLayout } from "./BaseLayout";
+
+import type { VisibleRanges } from "../hooks/useVisibleRanges";
+import { useVisibleRanges } from "../hooks/useVisibleRanges";
+import type { CarouselRenderItem } from "../types";
+import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+
+interface Props {
+  data: any[]
+  dataLength: number
+  rawDataLength: number
+  loop: boolean
+  size: number
+  windowSize?: number
+  autoFillData: boolean
+  offsetX: Animated.SharedValue<number>
+  handlerOffset: Animated.SharedValue<number>
+  layoutConfig: TAnimationStyle
+  renderItem: CarouselRenderItem<any>
+  customAnimation?: ((value: number) => AnimatedStyleProp<ViewStyle>)
+}
+
+export const ItemRenderer: FC<Props> = (props) => {
+  const {
+    data,
+    size,
+    windowSize,
+    handlerOffset,
+    offsetX,
+    dataLength,
+    rawDataLength,
+    loop,
+    autoFillData,
+    layoutConfig,
+    renderItem,
+    customAnimation,
+  } = props;
+
+  const visibleRanges = useVisibleRanges({
+    total: dataLength,
+    viewSize: size,
+    translation: handlerOffset,
+    windowSize,
+    loop,
+  });
+
+  const [displayedItems, setDisplayedItems] = React.useState<VisibleRanges>(null!);
+
+  useAnimatedReaction(
+    () => visibleRanges.value,
+    ranges => runOnJS(setDisplayedItems)(ranges),
+    [visibleRanges],
+  );
+
+  if (!displayedItems)
+    return null;
+
+  return (
+    <>
+      {
+        data.map((item, index) => {
+          const realIndex = computedRealIndexWithAutoFillData({
+            index,
+            dataLength: rawDataLength,
+            loop,
+            autoFillData,
+          });
+
+          const { negativeRange, positiveRange } = displayedItems;
+
+          const shouldRender = (index >= negativeRange[0] && index <= negativeRange[1])
+          || (index >= positiveRange[0] && index <= positiveRange[1]);
+
+          if (!shouldRender)
+            return null;
+
+          return (
+            <BaseLayout
+              key={index}
+              index={index}
+              handlerOffset={offsetX}
+              visibleRanges={visibleRanges}
+              animationStyle={customAnimation || layoutConfig}
+            >
+              {({ animationValue }) =>
+                renderItem({
+                  item,
+                  index: realIndex,
+                  animationValue,
+                })
+              }
+            </BaseLayout>
+          );
+        })
+      }
+    </>
+  );
+};