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

package/lib/typescript/types.d.ts

@@ -1,33 +1,33 @@
 import type { StyleProp, ViewStyle } from "react-native";
-import type { PanGestureHandlerProps } from "react-native-gesture-handler";
+import type { PanGesture } from "react-native-gesture-handler";
 import type { AnimatedStyleProp, SharedValue, WithSpringConfig, WithTimingConfig } from "react-native-reanimated";
 import type Animated from "react-native-reanimated";
 import type { TParallaxModeProps } from "./layouts/parallax";
 import type { TStackModeProps } from "./layouts/stack";
 export declare type IComputedDirectionTypes<T, VP = {}, HP = {}> = (T & VP & {
     /**
-             * Layout items vertically instead of horizontally
-             */
+                 * Layout items vertically instead of horizontally
+                 */
     vertical: true;
     /**
-             * Layout items vertically instead of horizontally
-             */
+                 * Layout items vertically instead of horizontally
+                 */
     /**
-             * Specified carousel container width.
-             */
+                 * Specified carousel container width.
+                 */
     width?: number;
     height: number;
 }) | (T & HP & {
     /**
-             * Layout items vertically instead of horizontally
-             */
+                 * Layout items vertically instead of horizontally
+                 */
     vertical?: false;
     /**
-             * Layout items vertically instead of horizontally
-             */
+                 * Layout items vertically instead of horizontally
+                 */
     /**
-             * Specified carousel container width.
-             */
+                 * Specified carousel container width.
+                 */
     width: number;
     height?: number;
 });
@@ -47,157 +47,157 @@ export declare type WithAnimation = WithSpringAnimation | WithTimingAnimation;
 export declare type TCarouselProps<T = any> = {
     ref?: React.Ref<ICarouselInstance>;
     /**
-       * The default animated value of the carousel.
-       */
+        * The default animated value of the carousel.
+        */
     defaultScrollOffsetValue?: SharedValue<number>;
     /**
-       * Carousel loop playback.
-       * @default true
-       */
+        * Carousel loop playback.
+        * @default true
+        */
     loop?: boolean;
     /**
-       * Carousel items data set.
-       */
+        * Carousel items data set.
+        */
     data: T[];
     /**
-       * Auto fill data array to allow loop playback when the loop props is true.
-       * @default true
-       * @example
-       * [1] => [1, 1, 1]
-       * [1, 2] => [1, 2, 1, 2]
-       */
+        * Auto fill data array to allow loop playback when the loop props is true.
+        * @default true
+        * @example
+        * [1] => [1, 1, 1]
+        * [1, 2] => [1, 2, 1, 2]
+        */
     autoFillData?: boolean;
     /**
-       * Default index
-       * @default 0
-       */
+        * Default index
+        * @default 0
+        */
     defaultIndex?: number;
     /**
-       * Auto play
-       */
+        * Auto play
+        */
     autoPlay?: boolean;
     /**
-       * Auto play
-       * @description reverse playback
-       */
+        * Auto play
+        * @description reverse playback
+        */
     autoPlayReverse?: boolean;
     /**
-       * Auto play
-       * @description playback interval
-       */
+        * Auto play
+        * @description playback interval
+        */
     autoPlayInterval?: number;
     /**
-       * Time a scroll animation takes to finish
-       * @default 500 (ms)
-       */
+        * Time a scroll animation takes to finish
+        * @default 500 (ms)
+        */
     scrollAnimationDuration?: number;
     /**
-       * Carousel container style
-       */
+        * Carousel container style
+        */
     style?: StyleProp<ViewStyle>;
     /**
-       * PanGestureHandler props
-       */
-    panGestureHandlerProps?: Partial<Omit<PanGestureHandlerProps, "onHandlerStateChange" | "enabled">>;
+        * PanGesture config
+        */
+    onConfigurePanGesture?: (panGesture: PanGesture) => void;
     /**
-       * Determines the maximum number of items will respond to pan gesture events,
-       * windowSize={11} will active visible item plus up to 5 items above and 5 below the viewpor,
-       * Reducing this number will reduce the calculation of the animation value and may improve performance.
-       * @default 0 all items will respond to pan gesture events.
-       */
+        * Determines the maximum number of items will respond to pan gesture events,
+        * windowSize={11} will active visible item plus up to 5 items above and 5 below the viewpor,
+        * Reducing this number will reduce the calculation of the animation value and may improve performance.
+        * @default 0 all items will respond to pan gesture events.
+        */
     windowSize?: number;
     /**
-       * When true, the scroll view stops on multiples of the scroll view's size when scrolling.
-       * @default true
-       */
+        * When true, the scroll view stops on multiples of the scroll view's size when scrolling.
+        * @default true
+        */
     pagingEnabled?: boolean;
     /**
-       * If enabled, releasing the touch will scroll to the nearest item.
-       * valid when pagingEnabled=false
-       * @default true
-       */
+        * If enabled, releasing the touch will scroll to the nearest item.
+        * valid when pagingEnabled=false
+        * @default true
+        */
     snapEnabled?: boolean;
     /**
-       * If enabled, items will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false)
-       * @default true
-       */
+        * If enabled, items will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false)
+        * @default true
+        */
     overscrollEnabled?: boolean;
     /**
-       * If false, Carousel will not respond to any gestures.
-       * @default true
-       */
+        * If false, Carousel will not respond to any gestures.
+        * @default true
+        */
     enabled?: boolean;
     /**
-       * Specifies the scrolling animation effect.
-       */
+        * Specifies the scrolling animation effect.
+        */
     withAnimation?: WithAnimation;
     /**
-       * Used to locate this view in end-to-end tests.
-       */
+        * Used to locate this view in end-to-end tests.
+        */
     testID?: string;
     /**
-      * Maximum offset value for once scroll.
-      * props.vertical = true => maxScrollDistancePerSwipeY
-      * props.vertical = false => maxScrollDistancePerSwipeX
-      * */
+       * Maximum offset value for once scroll.
+       * props.vertical = true => maxScrollDistancePerSwipeY
+       * props.vertical = false => maxScrollDistancePerSwipeX
+       * */
     maxScrollDistancePerSwipe?: number;
     /**
-       * Custom carousel config.
-       */
+        * Custom carousel config.
+        */
     customConfig?: () => CustomConfig;
     /**
-       * Custom animations.
-       * Must use `worklet`, Details: https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
-       */
+        * Custom animations.
+        * Must use `worklet`, Details: https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
+        */
     customAnimation?: (value: number) => AnimatedStyleProp<ViewStyle>;
     /**
-       * Render carousel item.
-       */
+        * Render carousel item.
+        */
     renderItem: CarouselRenderItem<T>;
     /**
-       * Callback fired when navigating to an item.
-       */
+        * Callback fired when navigating to an item.
+        */
     onSnapToItem?: (index: number) => void;
     /**
-       * On scroll begin
-       */
+        * On scroll begin
+        */
     onScrollBegin?: () => void;
     /**
-       * On scroll end
-       */
+        * On scroll end
+        */
     onScrollEnd?: (index: number) => void;
     /**
-       * On progress change
-       * @param offsetProgress Total of offset distance (0 390 780 ...)
-       * @param absoluteProgress Convert to index (0 1 2 ...)
-       */
+        * On progress change
+        * @param offsetProgress Total of offset distance (0 390 780 ...)
+        * @param absoluteProgress Convert to index (0 1 2 ...)
+        */
     onProgressChange?: (offsetProgress: number, absoluteProgress: number) => void;
     /**
-       * If enabled, releasing the touch will scroll to the nearest item.
-       * valid when pagingEnabled=false
-       * @deprecated please use snapEnabled instead
-       */
+        * If enabled, releasing the touch will scroll to the nearest item.
+        * valid when pagingEnabled=false
+        * @deprecated please use snapEnabled instead
+        */
     enableSnap?: boolean;
 } & (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(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
+        */
     scrollTo: (opts?: TCarouselActionOptions) => void;
 }
 export interface CarouselRenderItemInfo<ItemT> {

package/package.json

@@ -1,8 +1,9 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "4.0.0-alpha.0",
+    "version": "4.0.0-alpha.1",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
+    "module": "lib/module/index",
     "react-native": "src/index.tsx",
     "types": "lib/typescript/index.d.ts",
     "source": "src/index",
@@ -50,8 +51,8 @@
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@changesets/changelog-git": "^0.1.14",
-        "@changesets/cli": "^2.26.0",
+        "@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",
@@ -85,11 +86,21 @@
         "watch": "^1.0.2"
     },
     "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-native": "*",
         "react": ">=18.0.0",
         "react-native": ">=0.70.3",
         "react-native-gesture-handler": ">=2.9.0",
         "react-native-reanimated": ">=3.0.0"
     },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        },
+        "@types/react-native": {
+            "optional": true
+        }
+    },
     "jest": {
         "preset": "react-native",
         "modulePathIgnorePatterns": [
@@ -144,24 +155,15 @@
         "source": "src",
         "output": "lib",
         "targets": [
-            [
-                "commonjs",
-                {
-                    "configFile": "./babel.config.js"
-                }
-            ],
+            "commonjs",
             "module",
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json"
-                }
-            ]
+            "typescript"
         ]
     },
     "config": {
         "commitizen": {
             "path": "./node_modules/cz-conventional-changelog"
         }
-    }
+    },
+    "packageManager": "yarn@4.0.2"
 }

package/src/{Carousel.tsx → components/Carousel.tsx}

@@ -1,22 +1,22 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
 import React from "react";
 import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { runOnJS, useDerivedValue } from "react-native-reanimated";
 
-import { useAutoPlay } from "./hooks/useAutoPlay";
-import { useCarouselController } from "./hooks/useCarouselController";
-import { useCommonVariables } from "./hooks/useCommonVariables";
-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 { ScrollViewGesture } from "./ScrollViewGesture";
-import { CTX } from "./store";
-import type { ICarouselInstance, TCarouselProps } from "./types";
-import { computedRealIndexWithAutoFillData } from "./utils/computedWithAutoFillData";
+
+import { useAutoPlay } from "../hooks/useAutoPlay";
+import { useCarouselController } from "../hooks/useCarouselController";
+import { useCommonVariables } from "../hooks/useCommonVariables";
+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";
 
 const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
   (_props, ref) => {

package/src/{ScrollViewGesture.tsx → components/ScrollViewGesture.tsx}

@@ -17,10 +17,11 @@ import Animated, {
   withDecay,
 } from "react-native-reanimated";
 
-import { Easing } from "./constants";
-import { CTX } from "./store";
-import type { WithTimingAnimation } from "./types";
-import { dealWithAnimation } from "./utils/dealWithAnimation";
+import { Easing } from "../constants";
+import { useUpdateGestureConfig } from "../hooks/useUpdateGestureConfig";
+import { CTX } from "../store";
+import type { WithTimingAnimation } from "../types";
+import { dealWithAnimation } from "../utils/deal-with-animation";
 
 interface Props {
   size: number
@@ -37,6 +38,7 @@ interface Props {
 const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const {
     props: {
+      onConfigurePanGesture,
       vertical,
       pagingEnabled,
       snapEnabled,
@@ -126,13 +128,13 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         finalTranslation = origin;
       }
       else {
-      /**
-       * The page size is the same as the item size.
-       * If direction is vertical, the page size is the height of the item.
-       * If direction is horizontal, the page size is the width of the item.
-      *
-      * `page size` equals to `size` variable.
-      * */
+        /**
+         * The page size is the same as the item size.
+         * If direction is vertical, the page size is the height of the item.
+         * If direction is horizontal, the page size is the width of the item.
+        *
+        * `page size` equals to `size` variable.
+        * */
         if (pagingEnabled) {
           // distance with direction
           const offset = -(scrollEndTranslation.value >= 0 ? 1 : -1); // 1 or -1
@@ -359,15 +361,28 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     onScrollEnd,
   ]);
 
-  const gesture = useMemo(() => Gesture.Pan().onBegin(onGestureBegin).onUpdate(onGestureUpdate).onEnd(onGestureFinish), [
+  const gesture = useMemo(() => {
+    const gesture = Gesture.Pan()
+      .onBegin(onGestureBegin)
+      .onUpdate(onGestureUpdate)
+      .onEnd(onGestureFinish);
+
+    if (onConfigurePanGesture)
+      onConfigurePanGesture(gesture);
+
+    return gesture;
+  },
+  [
     onGestureBegin,
     onGestureUpdate,
     onGestureFinish,
+    onConfigurePanGesture,
   ]);
-  const GestureContainer = enabled ? GestureDetector : React.Fragment;
+
+  useUpdateGestureConfig(gesture, { enabled });
 
   return (
-    <GestureContainer gesture={gesture}>
+    <GestureDetector gesture={gesture}>
       <Animated.View
         ref={containerRef}
         testID={testID}
@@ -377,7 +392,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       >
         {props.children}
       </Animated.View>
-    </GestureContainer>
+    </GestureDetector>
   );
 };
 

package/src/hooks/useCarouselController.tsx

@@ -12,9 +12,9 @@ import type {
   TCarouselProps,
   WithTimingAnimation,
 } from "../types";
-import { computedRealIndexWithAutoFillData, convertToSharedIndex } from "../utils/computedWithAutoFillData";
-import { dealWithAnimation } from "../utils/dealWithAnimation";
-import { handlerOffsetDirection } from "../utils/handlerOffsetDirection";
+import { computedRealIndexWithAutoFillData, convertToSharedIndex } from "../utils/computed-with-auto-fill-data";
+import { dealWithAnimation } from "../utils/deal-with-animation";
+import { handlerOffsetDirection } from "../utils/handleroffset-direction";
 import { round } from "../utils/log";
 
 interface IOpts {

package/src/hooks/useCommonVariables.ts

@@ -2,10 +2,10 @@ import React from "react";
 import type Animated from "react-native-reanimated";
 import { useSharedValue, useAnimatedReaction } from "react-native-reanimated";
 
-import { computeNewIndexWhenDataChanges } from "./computeNewIndexWhenDataChanges";
 import type { TInitializeCarouselProps } from "./useInitProps";
 
-import { handlerOffsetDirection } from "../utils/handlerOffsetDirection";
+import { computeNewIndexWhenDataChanges } from "../utils/computeNewIndexWhenDataChanges";
+import { handlerOffsetDirection } from "../utils/handleroffset-direction";
 
 interface ICommonVariables {
   size: number

package/src/hooks/useInitProps.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { TCarouselProps } from "../types";
-import { computedFillDataWithAutoFillData } from "../utils/computedWithAutoFillData";
+import { computedFillDataWithAutoFillData } from "../utils/computed-with-auto-fill-data";
 
 type TGetRequiredProps<P extends keyof TCarouselProps> = Record<
 P,
@@ -34,7 +34,6 @@ export function useInitProps<T>(
     autoPlayInterval: _autoPlayInterval = 1000,
     scrollAnimationDuration = 500,
     style = {},
-    panGestureHandlerProps = {},
     autoFillData = true,
     // switchers
     enabled = true,
@@ -88,7 +87,6 @@ export function useInitProps<T>(
     autoPlayInterval,
     scrollAnimationDuration,
     style,
-    panGestureHandlerProps,
     pagingEnabled,
     snapEnabled,
     overscrollEnabled,

package/src/hooks/useOnProgressChange.ts

@@ -5,7 +5,7 @@ import {
 } from "react-native-reanimated";
 
 import type { TCarouselProps } from "../types";
-import { computedOffsetXValueWithAutoFillData } from "../utils/computedWithAutoFillData";
+import { computedOffsetXValueWithAutoFillData } from "../utils/computed-with-auto-fill-data";
 
 export function useOnProgressChange(
   opts: {

package/src/hooks/useUpdateGestureConfig.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import type { PanGesture } from "react-native-gesture-handler";
+
+export const useUpdateGestureConfig = (gesture: PanGesture, config: {
+  enabled?: boolean
+}) => {
+  const { enabled } = config;
+
+  useEffect(() => {
+    if (typeof enabled !== "undefined")
+      gesture.enabled(enabled);
+  }, [enabled, gesture]);
+};

package/src/index.tsx

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

package/src/layouts/BaseLayout.tsx

@@ -10,11 +10,11 @@ import Animated, {
 
 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 { LazyView } from "../LazyView";
 import { CTX } from "../store";
 
 export type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;

package/src/layouts/ParallaxLayout.tsx

@@ -10,9 +10,9 @@ import Animated, {
 
 import type { ILayoutConfig } from "./parallax";
 
+import { LazyView } from "../components/LazyView";
 import { useOffsetX } from "../hooks/useOffsetX";
 import type { IVisibleRanges } from "../hooks/useVisibleRanges";
-import { LazyView } from "../LazyView";
 import type { IComputedDirectionTypes } from "../types";
 
 export const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<