react-native-reanimated-carousel 3.1.5 → 3.3.0

package/lib/module/hooks/useInitProps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useInitProps.ts"],"names":["React","computedFillDataWithAutoFillData","useInitProps","props","defaultIndex","data","rawData","loop","enabled","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","pagingEnabled","autoFillData","snapEnabled","enableSnap","width","_width","height","_height","Math","round","max","useMemo","dataLength","length","rawDataLength","mode","modeConfig","showLength"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,gCAAT,QAAiD,mCAAjD;AAuBA,OAAO,SAASC,YAAT,CACLC,KADK,EAEwB;AAAA;;AAC7B,QAAM;AACJC,IAAAA,YAAY,GAAG,CADX;AAEJC,IAAAA,IAAI,EAAEC,OAAO,GAAG,EAFZ;AAGJC,IAAAA,IAAI,GAAG,IAHH;AAIJC,IAAAA,OAAO,GAAG,IAJN;AAKJC,IAAAA,gBAAgB,EAAEC,iBAAiB,GAAG,IALlC;AAMJC,IAAAA,uBAAuB,GAAG,GANtB;AAOJC,IAAAA,KAAK,GAAG,EAPJ;AAQJC,IAAAA,sBAAsB,GAAG,EARrB;AASJC,IAAAA,aAAa,GAAG,IATZ;AAUJC,IAAAA,YAAY,GAAG,IAVX;AAWJC,IAAAA,WAAW,wBAAGb,KAAK,CAACc,UAAT,iEAAuB,IAX9B;AAYJC,IAAAA,KAAK,EAAEC,MAZH;AAaJC,IAAAA,MAAM,EAAEC;AAbJ,MAcFlB,KAdJ;AAgBA,QAAMe,KAAK,GAAGI,IAAI,CAACC,KAAL,CAAWJ,MAAM,IAAI,CAArB,CAAd;AACA,QAAMC,MAAM,GAAGE,IAAI,CAACC,KAAL,CAAWF,OAAO,IAAI,CAAtB,CAAf;AACA,QAAMZ,gBAAgB,GAAGa,IAAI,CAACE,GAAL,CAASd,iBAAT,EAA4B,CAA5B,CAAzB;AAEA,QAAML,IAAI,GAAGL,KAAK,CAACyB,OAAN,CACX,MAAM;AACJ,WAAOxB,gCAAgC,CAAI;AACzCM,MAAAA,IADyC;AAEzCQ,MAAAA,YAFyC;AAGzCV,MAAAA,IAAI,EAAEC,OAHmC;AAIzCoB,MAAAA,UAAU,EAAEpB,OAAO,CAACqB;AAJqB,KAAJ,CAAvC;AAMD,GARU,EASX,CAACrB,OAAD,EAAUC,IAAV,EAAgBQ,YAAhB,CATW,CAAb;AAYA,QAAMW,UAAU,GAAGrB,IAAI,CAACsB,MAAxB;AACA,QAAMC,aAAa,GAAGtB,OAAO,CAACqB,MAA9B;;AAEA,MAAIxB,KAAK,CAAC0B,IAAN,KAAe,gBAAf,IAAmC1B,KAAK,CAAC0B,IAAN,KAAe,kBAAtD,EAA0E;AAAA;;AACxE,QAAI,CAAC1B,KAAK,CAAC2B,UAAX,EACE3B,KAAK,CAAC2B,UAAN,GAAmB,EAAnB;AAEF3B,IAAAA,KAAK,CAAC2B,UAAN,CAAiBC,UAAjB,iDAA8B5B,KAAK,CAAC2B,UAApC,sDAA8B,kBAAkBC,UAAhD,yEAA8DL,UAAU,GAAG,CAA3E;AACD;;AAED,SAAO,EACL,GAAGvB,KADE;AAELC,IAAAA,YAFK;AAGLW,IAAAA,YAHK;AAIL;AACAV,IAAAA,IALK;AAML;AACAqB,IAAAA,UAPK;AAQL;AACApB,IAAAA,OATK;AAUL;AACAsB,IAAAA,aAXK;AAYLrB,IAAAA,IAZK;AAaLC,IAAAA,OAbK;AAcLC,IAAAA,gBAdK;AAeLE,IAAAA,uBAfK;AAgBLC,IAAAA,KAhBK;AAiBLC,IAAAA,sBAjBK;AAkBLC,IAAAA,aAlBK;AAmBLE,IAAAA,WAnBK;AAoBLE,IAAAA,KApBK;AAqBLE,IAAAA;AArBK,GAAP;AAuBD","sourcesContent":["import React from \"react\";\n\nimport type { TCarouselProps } from \"../types\";\nimport { computedFillDataWithAutoFillData } from \"../utils/computedWithAutoFillData\";\n\ntype TGetRequiredProps<P extends keyof TCarouselProps> = Record<\nP,\nRequired<TCarouselProps>[P]\n>;\n\nexport type TInitializeCarouselProps<T> = TCarouselProps<T> &\nTGetRequiredProps<\n| \"defaultIndex\"\n| \"loop\"\n| \"width\"\n| \"height\"\n| \"scrollAnimationDuration\"\n| \"autoPlayInterval\"\n| \"autoFillData\"\n> & {\n  // Raw data that has not been processed\n  rawData: T[]\n  dataLength: number\n  rawDataLength: number\n};\n\nexport function useInitProps<T>(\n  props: TCarouselProps<T>,\n): TInitializeCarouselProps<T> {\n  const {\n    defaultIndex = 0,\n    data: rawData = [],\n    loop = true,\n    enabled = true,\n    autoPlayInterval: _autoPlayInterval = 1000,\n    scrollAnimationDuration = 500,\n    style = {},\n    panGestureHandlerProps = {},\n    pagingEnabled = true,\n    autoFillData = true,\n    snapEnabled = props.enableSnap ?? true,\n    width: _width,\n    height: _height,\n  } = props;\n\n  const width = Math.round(_width || 0);\n  const height = Math.round(_height || 0);\n  const autoPlayInterval = Math.max(_autoPlayInterval, 0);\n\n  const data = React.useMemo<T[]>(\n    () => {\n      return computedFillDataWithAutoFillData<T>({\n        loop,\n        autoFillData,\n        data: rawData,\n        dataLength: rawData.length,\n      });\n    },\n    [rawData, loop, autoFillData],\n  );\n\n  const dataLength = data.length;\n  const rawDataLength = rawData.length;\n\n  if (props.mode === \"vertical-stack\" || props.mode === \"horizontal-stack\") {\n    if (!props.modeConfig)\n      props.modeConfig = {};\n\n    props.modeConfig.showLength = props.modeConfig?.showLength ?? dataLength - 1;\n  }\n\n  return {\n    ...props,\n    defaultIndex,\n    autoFillData,\n    // Fill data with autoFillData\n    data,\n    // Length of fill data\n    dataLength,\n    // Raw data that has not been processed\n    rawData,\n    // Length of raw data\n    rawDataLength,\n    loop,\n    enabled,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    style,\n    panGestureHandlerProps,\n    pagingEnabled,\n    snapEnabled,\n    width,\n    height,\n  };\n}\n"]}
+{"version":3,"sources":["useInitProps.ts"],"names":["React","computedFillDataWithAutoFillData","useInitProps","props","defaultIndex","data","rawData","loop","autoPlayInterval","_autoPlayInterval","scrollAnimationDuration","style","panGestureHandlerProps","autoFillData","enabled","pagingEnabled","overscrollEnabled","snapEnabled","enableSnap","width","_width","height","_height","Math","round","max","useMemo","dataLength","length","rawDataLength","mode","modeConfig","showLength"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,gCAAT,QAAiD,mCAAjD;AAuBA,OAAO,SAASC,YAAT,CACLC,KADK,EAEwB;AAAA;;AAC7B,QAAM;AACJC,IAAAA,YAAY,GAAG,CADX;AAEJC,IAAAA,IAAI,EAAEC,OAAO,GAAG,EAFZ;AAGJC,IAAAA,IAAI,GAAG,IAHH;AAIJC,IAAAA,gBAAgB,EAAEC,iBAAiB,GAAG,IAJlC;AAKJC,IAAAA,uBAAuB,GAAG,GALtB;AAMJC,IAAAA,KAAK,GAAG,EANJ;AAOJC,IAAAA,sBAAsB,GAAG,EAPrB;AAQJC,IAAAA,YAAY,GAAG,IARX;AASJ;AACAC,IAAAA,OAAO,GAAG,IAVN;AAWJC,IAAAA,aAAa,GAAG,IAXZ;AAYJC,IAAAA,iBAAiB,GAAG,IAZhB;AAaJC,IAAAA,WAAW,wBAAGd,KAAK,CAACe,UAAT,iEAAuB,IAb9B;AAcJC,IAAAA,KAAK,EAAEC,MAdH;AAeJC,IAAAA,MAAM,EAAEC;AAfJ,MAgBFnB,KAhBJ;AAkBA,QAAMgB,KAAK,GAAGI,IAAI,CAACC,KAAL,CAAWJ,MAAM,IAAI,CAArB,CAAd;AACA,QAAMC,MAAM,GAAGE,IAAI,CAACC,KAAL,CAAWF,OAAO,IAAI,CAAtB,CAAf;AACA,QAAMd,gBAAgB,GAAGe,IAAI,CAACE,GAAL,CAAShB,iBAAT,EAA4B,CAA5B,CAAzB;AAEA,QAAMJ,IAAI,GAAGL,KAAK,CAAC0B,OAAN,CACX,MAAM;AACJ,WAAOzB,gCAAgC,CAAI;AACzCM,MAAAA,IADyC;AAEzCM,MAAAA,YAFyC;AAGzCR,MAAAA,IAAI,EAAEC,OAHmC;AAIzCqB,MAAAA,UAAU,EAAErB,OAAO,CAACsB;AAJqB,KAAJ,CAAvC;AAMD,GARU,EASX,CAACtB,OAAD,EAAUC,IAAV,EAAgBM,YAAhB,CATW,CAAb;AAYA,QAAMc,UAAU,GAAGtB,IAAI,CAACuB,MAAxB;AACA,QAAMC,aAAa,GAAGvB,OAAO,CAACsB,MAA9B;;AAEA,MAAIzB,KAAK,CAAC2B,IAAN,KAAe,gBAAf,IAAmC3B,KAAK,CAAC2B,IAAN,KAAe,kBAAtD,EAA0E;AAAA;;AACxE,QAAI,CAAC3B,KAAK,CAAC4B,UAAX,EACE5B,KAAK,CAAC4B,UAAN,GAAmB,EAAnB;AAEF5B,IAAAA,KAAK,CAAC4B,UAAN,CAAiBC,UAAjB,iDAA8B7B,KAAK,CAAC4B,UAApC,sDAA8B,kBAAkBC,UAAhD,yEAA8DL,UAAU,GAAG,CAA3E;AACD;;AAED,SAAO,EACL,GAAGxB,KADE;AAELC,IAAAA,YAFK;AAGLS,IAAAA,YAHK;AAIL;AACAR,IAAAA,IALK;AAML;AACAsB,IAAAA,UAPK;AAQL;AACArB,IAAAA,OATK;AAUL;AACAuB,IAAAA,aAXK;AAYLtB,IAAAA,IAZK;AAaLO,IAAAA,OAbK;AAcLN,IAAAA,gBAdK;AAeLE,IAAAA,uBAfK;AAgBLC,IAAAA,KAhBK;AAiBLC,IAAAA,sBAjBK;AAkBLG,IAAAA,aAlBK;AAmBLE,IAAAA,WAnBK;AAoBLD,IAAAA,iBApBK;AAqBLG,IAAAA,KArBK;AAsBLE,IAAAA;AAtBK,GAAP;AAwBD","sourcesContent":["import React from \"react\";\n\nimport type { TCarouselProps } from \"../types\";\nimport { computedFillDataWithAutoFillData } from \"../utils/computedWithAutoFillData\";\n\ntype TGetRequiredProps<P extends keyof TCarouselProps> = Record<\nP,\nRequired<TCarouselProps>[P]\n>;\n\nexport type TInitializeCarouselProps<T> = TCarouselProps<T> &\nTGetRequiredProps<\n| \"defaultIndex\"\n| \"loop\"\n| \"width\"\n| \"height\"\n| \"scrollAnimationDuration\"\n| \"autoPlayInterval\"\n| \"autoFillData\"\n> & {\n  // Raw data that has not been processed\n  rawData: T[]\n  dataLength: number\n  rawDataLength: number\n};\n\nexport function useInitProps<T>(\n  props: TCarouselProps<T>,\n): TInitializeCarouselProps<T> {\n  const {\n    defaultIndex = 0,\n    data: rawData = [],\n    loop = true,\n    autoPlayInterval: _autoPlayInterval = 1000,\n    scrollAnimationDuration = 500,\n    style = {},\n    panGestureHandlerProps = {},\n    autoFillData = true,\n    // switchers\n    enabled = true,\n    pagingEnabled = true,\n    overscrollEnabled = true,\n    snapEnabled = props.enableSnap ?? true,\n    width: _width,\n    height: _height,\n  } = props;\n\n  const width = Math.round(_width || 0);\n  const height = Math.round(_height || 0);\n  const autoPlayInterval = Math.max(_autoPlayInterval, 0);\n\n  const data = React.useMemo<T[]>(\n    () => {\n      return computedFillDataWithAutoFillData<T>({\n        loop,\n        autoFillData,\n        data: rawData,\n        dataLength: rawData.length,\n      });\n    },\n    [rawData, loop, autoFillData],\n  );\n\n  const dataLength = data.length;\n  const rawDataLength = rawData.length;\n\n  if (props.mode === \"vertical-stack\" || props.mode === \"horizontal-stack\") {\n    if (!props.modeConfig)\n      props.modeConfig = {};\n\n    props.modeConfig.showLength = props.modeConfig?.showLength ?? dataLength - 1;\n  }\n\n  return {\n    ...props,\n    defaultIndex,\n    autoFillData,\n    // Fill data with autoFillData\n    data,\n    // Length of fill data\n    dataLength,\n    // Raw data that has not been processed\n    rawData,\n    // Length of raw data\n    rawDataLength,\n    loop,\n    enabled,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    style,\n    panGestureHandlerProps,\n    pagingEnabled,\n    snapEnabled,\n    overscrollEnabled,\n    width,\n    height,\n  };\n}\n"]}

package/lib/module/layouts/BaseLayout.js

@@ -68,6 +68,13 @@ export const BaseLayout = props => {
       height: height || "100%",
       position: "absolute"
     }, animatedStyle]
+    /**
+     * We use this testID to know when the carousel item is ready to be tested in test.
+     * 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"}__`
   }, /*#__PURE__*/React.createElement(LazyView, {
     shouldUpdate: shouldUpdate
   }, children({

package/lib/module/layouts/BaseLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useCheckMounted","useOffsetX","LazyView","CTX","BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","useContext","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { LazyView } from \"../LazyView\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n        = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useCheckMounted","useOffsetX","LazyView","CTX","BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","useContext","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { LazyView } from \"../LazyView\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n  = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n      /**\n       * We use this testID to know when the carousel item is ready to be tested in test.\n       * e.g.\n       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.\n       * */\n      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? \"READY\" : \"NOT_READY\"}__`}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/module/utils/dealWithAnimation.js

@@ -4,14 +4,10 @@ export function dealWithAnimation(withAnimation) {
 
   switch (withAnimation.type) {
     case "spring":
-      return (value, cb) => {
-        return withSpring(value, withAnimation.config, isFinished => cb(isFinished));
-      };
+      return (value, cb) => withSpring(value, withAnimation.config, isFinished => cb(isFinished));
 
     case "timing":
-      return (value, cb) => {
-        return withTiming(value, withAnimation.config, isFinished => cb(isFinished));
-      };
+      return (value, cb) => withTiming(value, withAnimation.config, isFinished => cb(isFinished));
   }
 }
 //# sourceMappingURL=dealWithAnimation.js.map

package/lib/module/utils/dealWithAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["dealWithAnimation.ts"],"names":["withSpring","withTiming","dealWithAnimation","withAnimation","type","value","cb","config","isFinished"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,yBAAvC;AAIA,OAAO,SAASC,iBAAT,CACLC,aADK,EAEyD;AAC9D;;AACA,UAAQA,aAAa,CAACC,IAAtB;AACE,SAAK,QAAL;AACE,aAAO,CAACC,KAAD,EAAQC,EAAR,KAAe;AACpB,eAAON,UAAU,CAACK,KAAD,EAAQF,aAAa,CAACI,MAAtB,EAA8BC,UAAU,IACvDF,EAAE,CAACE,UAAD,CADa,CAAjB;AAGD,OAJD;;AAKF,SAAK,QAAL;AACE,aAAO,CAACH,KAAD,EAAQC,EAAR,KAAe;AACpB,eAAOL,UAAU,CAACI,KAAD,EAAQF,aAAa,CAACI,MAAtB,EAA8BC,UAAU,IACvDF,EAAE,CAACE,UAAD,CADa,CAAjB;AAGD,OAJD;AARJ;AAcD","sourcesContent":["import { withSpring, withTiming } from \"react-native-reanimated\";\n\nimport type { WithAnimation } from \"../types\";\n\nexport function dealWithAnimation(\n  withAnimation: WithAnimation,\n): (value: number, cb: (isFinished: boolean) => void) => number {\n  \"worklet\";\n  switch (withAnimation.type) {\n    case \"spring\":\n      return (value, cb) => {\n        return withSpring(value, withAnimation.config, isFinished =>\n          cb(isFinished as boolean),\n        );\n      };\n    case \"timing\":\n      return (value, cb) => {\n        return withTiming(value, withAnimation.config, isFinished =>\n          cb(isFinished as boolean),\n        );\n      };\n  }\n}\n"]}
+{"version":3,"sources":["dealWithAnimation.ts"],"names":["withSpring","withTiming","dealWithAnimation","withAnimation","type","value","cb","config","isFinished"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,yBAAvC;AAIA,OAAO,SAASC,iBAAT,CACLC,aADK,EAEyD;AAC9D;;AACA,UAAQA,aAAa,CAACC,IAAtB;AACE,SAAK,QAAL;AACE,aAAO,CAACC,KAAD,EAAQC,EAAR,KAAeN,UAAU,CAACK,KAAD,EAAQF,aAAa,CAACI,MAAtB,EAA8BC,UAAU,IACtEF,EAAE,CAACE,UAAD,CAD4B,CAAhC;;AAGF,SAAK,QAAL;AACE,aAAO,CAACH,KAAD,EAAQC,EAAR,KAAeL,UAAU,CAACI,KAAD,EAAQF,aAAa,CAACI,MAAtB,EAA8BC,UAAU,IACtEF,EAAE,CAACE,UAAD,CAD4B,CAAhC;AANJ;AAUD","sourcesContent":["import { withSpring, withTiming } from \"react-native-reanimated\";\n\nimport type { WithAnimation } from \"../types\";\n\nexport function dealWithAnimation(\n  withAnimation: WithAnimation,\n): (value: number, cb: (isFinished: boolean) => void) => number {\n  \"worklet\";\n  switch (withAnimation.type) {\n    case \"spring\":\n      return (value, cb) => withSpring(value, withAnimation.config, isFinished =>\n        cb(isFinished as boolean),\n      );\n    case \"timing\":\n      return (value, cb) => withTiming(value, withAnimation.config, isFinished =>\n        cb(isFinished as boolean),\n      );\n  }\n}\n"]}

package/lib/typescript/types.d.ts

@@ -115,15 +115,14 @@ export declare type TCarouselProps<T = any> = {
     /**
        * If enabled, releasing the touch will scroll to the nearest item.
        * valid when pagingEnabled=false
-       * @deprecated please use snapEnabled instead
+       * @default true
        */
-    enableSnap?: boolean;
+    snapEnabled?: boolean;
     /**
-       * If enabled, releasing the touch will scroll to the nearest item.
-       * valid when pagingEnabled=false
+       * 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
        */
-    snapEnabled?: boolean;
+    overscrollEnabled?: boolean;
     /**
        * If false, Carousel will not respond to any gestures.
        * @default true
@@ -168,6 +167,12 @@ export declare type TCarouselProps<T = any> = {
        * @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
+       */
+    enableSnap?: boolean;
 } & (TParallaxModeProps | TStackModeProps);
 export interface ICarouselInstance {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "3.1.5",
+    "version": "3.3.0",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "react-native": "src/index.tsx",
@@ -22,11 +22,11 @@
     ],
     "scripts": {
         "gif": "node scripts/makegif.js ./scripts/gif-works-directory",
-        "test": "vitest run src/**/*",
-        "test:dev": "vitest dev src/**/*",
+        "test": "jest run src/**/*",
+        "test:dev": "jest dev src/**/*",
         "typescript": "tsc --noEmit",
-        "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
-        "lint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
+        "lint": "eslint 'src/**/*.{js,ts,tsx}'",
+        "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
         "dev": "yarn watch 'yarn prepare' ./src",
         "prepare": "bob build",
         "release": "yarn prepare && dotenv release-it --no-git.requireUpstream",
@@ -39,7 +39,9 @@
         "android:pretty": "yarn --cwd exampleExpo android:pretty",
         "pods": "cd exampleExpo && pod-install --quiet",
         "bootstrap": "yarn && yarn pods",
-        "deploy": "cd exampleExpo && yarn deploy"
+        "deploy": "cd exampleExpo && yarn deploy",
+        "publish": "yarn run prepare && changeset publish",
+        "version": "changeset version"
     },
     "keywords": [
         "react-native",
@@ -58,11 +60,13 @@
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@changesets/changelog-git": "^0.1.14",
+        "@changesets/cli": "^2.26.0",
         "@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",
-        "@types/jest": "^26.0.0",
+        "@types/jest": "^29.2.5",
         "@types/react": "~17.0.2",
         "@types/react-native": "^0.66.16",
         "@types/react-native-snap-carousel": "^3.8.5",
@@ -76,7 +80,7 @@
         "eslint-plugin-prettier": "^3.1.3",
         "gifify": "^2.4.3",
         "husky": "^4.2.5",
-        "jest": "^26.0.1",
+        "jest": "^29.3.1",
         "pod-install": "^0.1.0",
         "prettier": "^2.0.5",
         "react": "16.13.1",
@@ -86,8 +90,7 @@
         "react-native-reanimated": "2.8.0",
         "release-it": "^14.2.2",
         "sponsorkit": "^0.1.3",
-        "typescript": "^4.0.8",
-        "vitest": "^0.24.3"
+        "typescript": "^4.0.8"
     },
     "peerDependencies": {
         "react": ">=16.8.0",

package/src/ScrollViewGesture.tsx

@@ -6,9 +6,11 @@ import {
 } from "react-native-gesture-handler";
 import Animated, {
   cancelAnimation,
+  measure,
   runOnJS,
   useAnimatedGestureHandler,
   useAnimatedReaction,
+  useAnimatedRef,
   useDerivedValue,
   useSharedValue,
   withDecay,
@@ -49,6 +51,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
       withAnimation,
       enabled,
       dataLength,
+      overscrollEnabled,
     },
   } = React.useContext(CTX);
 
@@ -68,8 +71,27 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
   const touching = useSharedValue(false);
   const scrollEndTranslation = useSharedValue(0);
   const scrollEndVelocity = useSharedValue(0);
+  const containerRef = useAnimatedRef<Animated.View>();
 
-  const _withSpring = React.useCallback(
+  // Get the limit of the scroll.
+  const getLimit = React.useCallback(() => {
+    "worklet";
+
+    if (!infinite && !overscrollEnabled) {
+      const { width: containerWidth = 0 } = measure(containerRef);
+
+      // If the item's total width is less than the container's width, then there is no need to scroll.
+      if (dataLength * size < containerWidth)
+        return 0;
+
+      // Disable the "overscroll" effect
+      return dataLength * size - containerWidth;
+    }
+
+    return dataLength * size;
+  }, [infinite, size, dataLength, overscrollEnabled]);
+
+  const withSpring = React.useCallback(
     (toValue: number, onFinished?: () => void) => {
       "worklet";
       const defaultWithAnimation: WithTimingAnimation = {
@@ -97,34 +119,49 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
       "worklet";
       const origin = translation.value;
       const velocity = scrollEndVelocity.value;
-      if (!pagingEnabled) {
-        /**
-                 * If enabled, releasing the touch will scroll to the nearest item.
-                 * valid when pagingEnabled=false
-                 */
-        if (snapEnabled) {
-          const nextPage
-                        = Math.round((origin + velocity * 0.4) / size) * size;
-
-          translation.value = _withSpring(nextPage, onFinished);
-          return;
+      // Default to scroll in the direction of the slide (with deceleration)
+      let finalTranslation: number = withDecay({ velocity, deceleration: 0.999 });
+
+      /**
+       * 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
+        const computed = offset < 0 ? Math.ceil : Math.floor;
+        const page = computed(-translation.value / size);
+
+        if (infinite) {
+          const finalPage = page + offset;
+          finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
+        }
+        else {
+          const finalPage = Math.min(maxPage - 1, Math.max(0, page + offset));
+          finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
         }
-        translation.value = withDecay({
-          velocity,
-          deceleration: 0.999,
-        });
-        return;
       }
 
-      const direction = -(scrollEndTranslation.value >= 0 ? 1 : -1);
-      const computed = direction < 0 ? Math.ceil : Math.floor;
-      const page = computed(-translation.value / size);
-      let finalPage = page + direction;
+      if (!pagingEnabled && snapEnabled) {
+        // scroll to the nearest item
+        const nextPage = Math.round((origin + velocity * 0.4) / size) * size;
+        finalTranslation = withSpring(withProcessTranslation(nextPage), onFinished);
+      }
 
-      if (!infinite)
-        finalPage = Math.min(maxPage - 1, Math.max(0, finalPage));
+      translation.value = finalTranslation;
+
+      function withProcessTranslation(translation: number) {
+        if (!infinite && !overscrollEnabled) {
+          const limit = getLimit();
+          const sign = Math.sign(translation);
+          return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
+        }
 
-      translation.value = _withSpring(-finalPage * size, onFinished);
+        return translation;
+      }
     },
     [
       translation,
@@ -133,7 +170,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
       size,
       scrollEndTranslation.value,
       infinite,
-      _withSpring,
+      withSpring,
       snapEnabled,
       maxPage,
     ],
@@ -170,7 +207,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         return;
       }
       if (!infinite) {
-        translation.value = _withSpring(0);
+        translation.value = withSpring(0);
         return;
       }
     }
@@ -181,7 +218,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         return;
       }
       if (!infinite)
-        translation.value = _withSpring(-((maxPage - 1) * size));
+        translation.value = withSpring(-((maxPage - 1) * size));
     }
   }, [
     touching.value,
@@ -191,7 +228,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     scrollEndTranslation.value,
     infinite,
     activeDecay,
-    _withSpring,
+    withSpring,
   ]);
 
   useAnimatedReaction(
@@ -212,7 +249,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         touching.value = true;
         ctx.validStart = true;
         onScrollBegin && runOnJS(onScrollBegin)();
+
         ctx.max = (maxPage - 1) * size;
+        if (!infinite && !overscrollEnabled)
+          ctx.max = getLimit();
+
         ctx.panOffset = translation.value;
       },
       onActive: (e, ctx) => {
@@ -225,19 +266,18 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         const panTranslation = isHorizontal.value
           ? translationX
           : translationY;
-
-        if (
-          !infinite
-                    && (translation.value > 0 || translation.value < -ctx.max)
-        ) {
-          const boundary = translation.value > 0 ? 0 : -ctx.max;
-          const fixed = boundary - ctx.panOffset;
-          const dynamic = panTranslation - fixed;
-          translation.value = boundary + dynamic * 0.5;
-          return;
+        if (!infinite) {
+          if ((translation.value > 0 || translation.value < -ctx.max)) {
+            const boundary = translation.value > 0 ? 0 : -ctx.max;
+            const fixed = boundary - ctx.panOffset;
+            const dynamic = panTranslation - fixed;
+            translation.value = boundary + dynamic * 0.5;
+            return;
+          }
         }
 
-        translation.value = ctx.panOffset + panTranslation;
+        const translationValue = ctx.panOffset + panTranslation;
+        translation.value = translationValue;
       },
       onEnd: (e) => {
         const { velocityX, velocityY, translationX, translationY } = e;
@@ -273,6 +313,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
       onGestureEvent={panGestureEventHandler}
     >
       <Animated.View
+        ref={containerRef}
         testID={testID}
         style={style}
         onTouchStart={onTouchBegin}

package/src/hooks/index.test.ts

@@ -1,5 +1,3 @@
-import { describe, expect, it } from "vitest";
-
 import { computeNewIndexWhenDataChanges } from "./computeNewIndexWhenDataChanges";
 
 describe("should work as expected", () => {

package/src/hooks/useInitProps.ts

@@ -31,13 +31,15 @@ export function useInitProps<T>(
     defaultIndex = 0,
     data: rawData = [],
     loop = true,
-    enabled = true,
     autoPlayInterval: _autoPlayInterval = 1000,
     scrollAnimationDuration = 500,
     style = {},
     panGestureHandlerProps = {},
-    pagingEnabled = true,
     autoFillData = true,
+    // switchers
+    enabled = true,
+    pagingEnabled = true,
+    overscrollEnabled = true,
     snapEnabled = props.enableSnap ?? true,
     width: _width,
     height: _height,
@@ -89,6 +91,7 @@ export function useInitProps<T>(
     panGestureHandlerProps,
     pagingEnabled,
     snapEnabled,
+    overscrollEnabled,
     width,
     height,
   };

package/src/layouts/BaseLayout.tsx

@@ -30,7 +30,7 @@ export const BaseLayout: React.FC<{
 }> = (props) => {
   const mounted = useCheckMounted();
   const { handlerOffset, index, children, visibleRanges, animationStyle }
-        = props;
+  = props;
 
   const context = React.useContext(CTX);
   const {
@@ -109,6 +109,12 @@ export const BaseLayout: React.FC<{
         },
         animatedStyle,
       ]}
+      /**
+       * We use this testID to know when the carousel item is ready to be tested in test.
+       * 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"}__`}
     >
       <LazyView shouldUpdate={shouldUpdate}>
         {children({ animationValue })}

package/src/types.ts

@@ -132,15 +132,14 @@ export type TCarouselProps<T = any> = {
   /**
      * If enabled, releasing the touch will scroll to the nearest item.
      * valid when pagingEnabled=false
-     * @deprecated please use snapEnabled instead
+     * @default true
      */
-  enableSnap?: boolean
+  snapEnabled?: boolean
   /**
-     * If enabled, releasing the touch will scroll to the nearest item.
-     * valid when pagingEnabled=false
+     * 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
      */
-  snapEnabled?: boolean
+  overscrollEnabled?: boolean
   /**
      * If false, Carousel will not respond to any gestures.
      * @default true
@@ -188,6 +187,14 @@ export type TCarouselProps<T = any> = {
     offsetProgress: number,
     absoluteProgress: number
   ) => void
+
+  // ============================== deprecated props ==============================
+  /**
+     * 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 {

package/src/utils/dealWithAnimation.ts

@@ -8,16 +8,12 @@ export function dealWithAnimation(
   "worklet";
   switch (withAnimation.type) {
     case "spring":
-      return (value, cb) => {
-        return withSpring(value, withAnimation.config, isFinished =>
-          cb(isFinished as boolean),
-        );
-      };
+      return (value, cb) => withSpring(value, withAnimation.config, isFinished =>
+        cb(isFinished as boolean),
+      );
     case "timing":
-      return (value, cb) => {
-        return withTiming(value, withAnimation.config, isFinished =>
-          cb(isFinished as boolean),
-        );
-      };
+      return (value, cb) => withTiming(value, withAnimation.config, isFinished =>
+        cb(isFinished as boolean),
+      );
   }
 }