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

package/lib/typescript/hooks/useLayoutConfig.d.ts

@@ -1,5 +1,5 @@
 import type { TInitializeCarouselProps } from "./useInitProps";
-import type { TAnimationStyle } from "../layouts/BaseLayout";
+import type { TAnimationStyle } from "../components/BaseLayout";
 declare type TLayoutConfigOpts<T> = TInitializeCarouselProps<T> & {
     size: number;
 };

package/lib/typescript/hooks/useOffsetX.test.d.ts

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

package/lib/typescript/hooks/usePanGestureProxy.d.ts

@@ -0,0 +1,9 @@
+import type { GestureStateChangeEvent, GestureUpdateEvent, PanGesture, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
+import type { GestureConfig } from "./useUpdateGestureConfig";
+export declare const usePanGestureProxy: (customization: {
+    onConfigurePanGesture?: ((gesture: PanGesture) => void) | undefined;
+    onGestureStart: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+    onGestureUpdate: (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+    onGestureEnd: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>, success: boolean) => void;
+    options?: GestureConfig | undefined;
+}) => import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;

package/lib/typescript/hooks/usePanGestureProxy.test.d.ts

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

package/lib/typescript/hooks/useUpdateGestureConfig.d.ts

@@ -1,4 +1,5 @@
 import type { PanGesture } from "react-native-gesture-handler";
-export declare const useUpdateGestureConfig: (gesture: PanGesture, config: {
+export interface GestureConfig {
     enabled?: boolean;
-}) => void;
+}
+export declare const useUpdateGestureConfig: (gesture: PanGesture, config: GestureConfig) => void;

package/lib/typescript/hooks/useVisibleRanges.d.ts

@@ -1,11 +1,15 @@
 import type Animated from "react-native-reanimated";
-export declare type IVisibleRanges = Animated.SharedValue<{
-    negativeRange: number[];
-    positiveRange: number[];
-}>;
+declare type Range = [number, number];
+export interface VisibleRanges {
+    negativeRange: Range;
+    positiveRange: Range;
+}
+export declare type IVisibleRanges = Animated.SharedValue<VisibleRanges>;
 export declare function useVisibleRanges(options: {
     total: number;
     viewSize: number;
     windowSize?: number;
     translation: Animated.SharedValue<number>;
+    loop?: boolean;
 }): IVisibleRanges;
+export {};

package/lib/typescript/hooks/useVisibleRanges.test.d.ts

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

package/lib/typescript/index.d.ts

@@ -1,4 +1,6 @@
 import Carousel from "./components/Carousel";
+export { Pagination } from "./components/Pagination";
 export type { TCarouselProps, ICarouselInstance, IComputedDirectionTypes, CarouselRenderItem, } from "./types";
+export type { TAnimationStyle } from "./components/BaseLayout";
 export type { ILayoutConfig } from "./layouts/stack";
 export default Carousel;

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
         */
@@ -170,8 +179,10 @@ export declare type TCarouselProps<T = any> = {
         * On progress change
         * @param offsetProgress Total of offset distance (0 390 780 ...)
         * @param absoluteProgress Convert to index (0 1 2 ...)
+        *
+        * If you want to update a shared value automatically, you can use the shared value as a parameter directly.
         */
-    onProgressChange?: (offsetProgress: number, absoluteProgress: number) => void;
+    onProgressChange?: ((offsetProgress: number, absoluteProgress: number) => void) | SharedValue<number>;
     /**
         * If enabled, releasing the touch will scroll to the nearest item.
         * valid when pagingEnabled=false
@@ -181,23 +192,23 @@ export declare type TCarouselProps<T = any> = {
 } & (TParallaxModeProps | TStackModeProps);
 export interface ICarouselInstance {
     /**
-        * Scroll to previous item, it takes one optional argument (count),
-        * which allows you to specify how many items to cross
-        */
+       * Scroll to previous item, it takes one optional argument (count),
+       * which allows you to specify how many items to cross
+       */
     prev: (opts?: Omit<TCarouselActionOptions, "index">) => void;
     /**
-        * Scroll to next item, it takes one optional argument (count),
-        * which allows you to specify how many items to cross
-        */
+       * Scroll to next item, it takes one optional argument (count),
+       * which allows you to specify how many items to cross
+       */
     next: (opts?: Omit<TCarouselActionOptions, "index">) => void;
     /**
-        * Get current item index
-        */
+       * Get current item index
+       */
     getCurrentIndex: () => number;
     /**
-        * Use value to scroll to a position where relative to the current position,
-        * scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
-        */
+       * Use value to scroll to a position where relative to the current position,
+       * scrollTo({count: -2}) is equivalent to prev(2), scrollTo({count: 2}) is equivalent to next(2)
+       */
     scrollTo: (opts?: TCarouselActionOptions) => void;
 }
 export interface CarouselRenderItemInfo<ItemT> {

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.11",
     "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,29 @@
         "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",
+        "@stylistic/eslint-plugin-js": "^1.8.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",
-        "eslint": "^8.26.0",
+        "del-cli": "^5.0.0",
+        "eslint": "^8.57.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 +77,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 +98,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 +109,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,
@@ -61,14 +59,13 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       const totalSize = size * dataLength;
       const x = handlerOffset.value % totalSize;
 
-      if (!loop)
-        return handlerOffset.value;
+      if (!loop) return handlerOffset.value;
 
       return isNaN(x) ? 0 : x;
     }, [loop, size, dataLength]);
 
     usePropsErrorBoundary({ ...props, dataLength });
-    useOnProgressChange({
+    const progressValue = useOnProgressChange({
       autoFillData,
       loop,
       size,
@@ -85,13 +82,14 @@ 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 }
-            = carouselController;
+    const { next, prev, scrollTo, getSharedIndex, getCurrentIndex } =
+      carouselController;
 
     const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({
       autoPlay,
@@ -110,11 +108,9 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
         autoFillData,
       });
 
-      if (onSnapToItem)
-        onSnapToItem(realIndex);
+      if (onSnapToItem) onSnapToItem(realIndex);
 
-      if (onScrollEnd)
-        onScrollEnd(realIndex);
+      if (onScrollEnd) onScrollEnd(realIndex);
     }, [
       loop,
       autoFillData,
@@ -124,10 +120,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();
@@ -149,58 +145,13 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
         prev,
         getCurrentIndex,
         scrollTo,
+        progressValue,
       }),
       [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 }}>
@@ -215,17 +166,28 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
                 height: height || "100%",
               },
               style,
-              vertical
-                ? styles.itemsVertical
-                : styles.itemsHorizontal,
+              vertical ? styles.itemsVertical : 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>
@@ -234,7 +196,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
 );
 
 export default Carousel as <T extends any>(
-  props: React.PropsWithChildren<TCarouselProps<T>>
+  props: React.PropsWithChildren<TCarouselProps<T>>,
 ) => React.ReactElement;
 
 const styles = StyleSheet.create({