react-native-reanimated-carousel 4.0.0-canary.22 → 4.0.0

package/lib/commonjs/components/CarouselLayout.js

@@ -85,7 +85,7 @@ const CarouselLayout = /*#__PURE__*/_react.default.forwardRef((_props, ref) => {
     const x = handlerOffset.value % totalSize;
     if (!loop) return handlerOffset.value;
     return Number.isNaN(x) ? 0 : x;
-  }, [loop, size, dataLength]);
+  }, [loop, size, dataLength, handlerOffset]);
   (0, _useOnProgressChange.useOnProgressChange)({
     autoFillData,
     loop,

package/lib/commonjs/components/CarouselLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselLayout.tsx"],"names":["CarouselLayout","React","forwardRef","_props","ref","props","layout","itemDimensions","testID","loop","autoFillData","data","dataLength","rawDataLength","mode","style","containerStyle","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","fixedDirection","renderItem","onScrollEnd","onSnapToItem","onScrollStart","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffset","layoutConfig","offsetX","totalSize","x","value","Number","isNaN","carouselController","duration","_onScrollEnd","getSharedIndex","useCallback","_sharedIndex","Math","round","realIndex","index","start","startAutoPlay","pause","pauseAutoPlay","scrollViewGestureOnScrollStart","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","layoutStyle","styles","layoutContainer","contentContainer","itemsVertical","itemsHorizontal","StyleSheet","create","display","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { StyleSheet, type ViewStyle } from \"react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { runOnJS, useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\nimport { useAutoPlay } from \"../hooks/useAutoPlay\";\nimport { useCarouselController } from \"../hooks/useCarouselController\";\nimport { useCommonVariables } from \"../hooks/useCommonVariables\";\nimport { useLayoutConfig } from \"../hooks/useLayoutConfig\";\nimport { useOnProgressChange } from \"../hooks/useOnProgressChange\";\nimport { useGlobalState } from \"../store\";\nimport { ICarouselInstance } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\nimport { ItemRenderer } from \"./ItemRenderer\";\nimport { ScrollViewGesture } from \"./ScrollViewGesture\";\n\nexport type TAnimationStyle = (value: number) => ViewStyle;\n\nexport const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref) => {\n  const { props, layout } = useGlobalState();\n  const { itemDimensions } = layout;\n\n  const {\n    testID,\n    loop,\n    autoFillData,\n    // Fill data with autoFillData\n    data,\n    // Length of fill data\n    dataLength,\n    // Length of raw data\n    rawDataLength,\n    mode,\n    style,\n    containerStyle,\n    width,\n    height,\n    vertical,\n    autoPlay,\n    windowSize,\n    autoPlayReverse,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    withAnimation,\n    fixedDirection,\n    renderItem,\n    onScrollEnd,\n    onSnapToItem,\n    onScrollStart,\n    onProgressChange,\n    customAnimation,\n    defaultIndex,\n  } = props;\n\n  const commonVariables = useCommonVariables(props);\n  const { size, handlerOffset } = commonVariables;\n  const layoutConfig = useLayoutConfig({ ...props, size });\n\n  const offsetX = useDerivedValue(() => {\n    const totalSize = size * dataLength;\n    const x = handlerOffset.value % totalSize;\n\n    if (!loop) return handlerOffset.value;\n\n    return Number.isNaN(x) ? 0 : x;\n  }, [loop, size, dataLength]);\n\n  useOnProgressChange({\n    autoFillData,\n    loop,\n    size,\n    offsetX,\n    rawDataLength,\n    onProgressChange,\n  });\n\n  const carouselController = useCarouselController({\n    ref,\n    loop,\n    size,\n    dataLength,\n    autoFillData,\n    handlerOffset,\n    withAnimation,\n    defaultIndex,\n    fixedDirection,\n    duration: scrollAnimationDuration,\n    onScrollEnd: () => runOnJS(_onScrollEnd)(),\n    onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),\n  });\n\n  const {\n    getSharedIndex,\n    // index, // Animated index. Could be used for dynamic dimension\n  } = carouselController;\n\n  const _onScrollEnd = React.useCallback(() => {\n    const _sharedIndex = Math.round(getSharedIndex());\n\n    const realIndex = computedRealIndexWithAutoFillData({\n      index: _sharedIndex,\n      dataLength: rawDataLength,\n      loop,\n      autoFillData,\n    });\n\n    if (onSnapToItem) onSnapToItem(realIndex);\n\n    if (onScrollEnd) onScrollEnd(realIndex);\n  }, [loop, autoFillData, rawDataLength, getSharedIndex, onSnapToItem, onScrollEnd]);\n\n  const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({\n    autoPlay,\n    autoPlayInterval,\n    autoPlayReverse,\n    carouselController,\n  });\n\n  const scrollViewGestureOnScrollStart = React.useCallback(() => {\n    pauseAutoPlay();\n    onScrollStart?.();\n  }, [onScrollStart, pauseAutoPlay]);\n\n  const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n    startAutoPlay();\n    _onScrollEnd();\n  }, [_onScrollEnd, startAutoPlay]);\n\n  const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [pauseAutoPlay]);\n\n  const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [startAutoPlay]);\n\n  const layoutStyle = useAnimatedStyle(() => {\n    // const dimension = itemDimensions.value[index.value];\n\n    // if (!dimension) {\n    //   return {};\n    // }\n    return {\n      // height: dimension.height, // For dynamic dimension in the future\n\n      width: width || \"100%\", // [width is deprecated]\n      height: height || \"100%\", // [height is deprecated]\n    };\n  }, [width, height, size, itemDimensions]);\n\n  return (\n    <GestureHandlerRootView style={[styles.layoutContainer, containerStyle]}>\n      <ScrollViewGesture\n        size={size}\n        key={mode}\n        translation={handlerOffset}\n        style={[\n          styles.contentContainer, // [deprecated]\n          layoutStyle,\n          style,\n          vertical ? styles.itemsVertical : styles.itemsHorizontal,\n        ]}\n        testID={testID}\n        onScrollStart={scrollViewGestureOnScrollStart}\n        onScrollEnd={scrollViewGestureOnScrollEnd}\n        onTouchBegin={scrollViewGestureOnTouchBegin}\n        onTouchEnd={scrollViewGestureOnTouchEnd}\n      >\n        <ItemRenderer\n          data={data}\n          dataLength={dataLength}\n          rawDataLength={rawDataLength}\n          loop={loop}\n          size={size}\n          windowSize={windowSize}\n          autoFillData={autoFillData}\n          offsetX={offsetX}\n          handlerOffset={handlerOffset}\n          layoutConfig={layoutConfig}\n          renderItem={renderItem}\n          customAnimation={customAnimation}\n        />\n      </ScrollViewGesture>\n    </GestureHandlerRootView>\n  );\n});\n\nconst styles = StyleSheet.create({\n  layoutContainer: {\n    display: \"flex\",\n  },\n  contentContainer: {\n    overflow: \"hidden\",\n  },\n  itemsHorizontal: {\n    flexDirection: \"row\",\n  },\n  itemsVertical: {\n    flexDirection: \"column\",\n  },\n});\n"]}
+{"version":3,"sources":["CarouselLayout.tsx"],"names":["CarouselLayout","React","forwardRef","_props","ref","props","layout","itemDimensions","testID","loop","autoFillData","data","dataLength","rawDataLength","mode","style","containerStyle","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","fixedDirection","renderItem","onScrollEnd","onSnapToItem","onScrollStart","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffset","layoutConfig","offsetX","totalSize","x","value","Number","isNaN","carouselController","duration","_onScrollEnd","getSharedIndex","useCallback","_sharedIndex","Math","round","realIndex","index","start","startAutoPlay","pause","pauseAutoPlay","scrollViewGestureOnScrollStart","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","layoutStyle","styles","layoutContainer","contentContainer","itemsVertical","itemsHorizontal","StyleSheet","create","display","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { StyleSheet, type ViewStyle } from \"react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { runOnJS, useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\nimport { useAutoPlay } from \"../hooks/useAutoPlay\";\nimport { useCarouselController } from \"../hooks/useCarouselController\";\nimport { useCommonVariables } from \"../hooks/useCommonVariables\";\nimport { useLayoutConfig } from \"../hooks/useLayoutConfig\";\nimport { useOnProgressChange } from \"../hooks/useOnProgressChange\";\nimport { useGlobalState } from \"../store\";\nimport { ICarouselInstance } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\nimport { ItemRenderer } from \"./ItemRenderer\";\nimport { ScrollViewGesture } from \"./ScrollViewGesture\";\n\nexport type TAnimationStyle = (value: number) => ViewStyle;\n\nexport const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref) => {\n  const { props, layout } = useGlobalState();\n  const { itemDimensions } = layout;\n\n  const {\n    testID,\n    loop,\n    autoFillData,\n    // Fill data with autoFillData\n    data,\n    // Length of fill data\n    dataLength,\n    // Length of raw data\n    rawDataLength,\n    mode,\n    style,\n    containerStyle,\n    width,\n    height,\n    vertical,\n    autoPlay,\n    windowSize,\n    autoPlayReverse,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    withAnimation,\n    fixedDirection,\n    renderItem,\n    onScrollEnd,\n    onSnapToItem,\n    onScrollStart,\n    onProgressChange,\n    customAnimation,\n    defaultIndex,\n  } = props;\n\n  const commonVariables = useCommonVariables(props);\n  const { size, handlerOffset } = commonVariables;\n  const layoutConfig = useLayoutConfig({ ...props, size });\n\n  const offsetX = useDerivedValue(() => {\n    const totalSize = size * dataLength;\n    const x = handlerOffset.value % totalSize;\n\n    if (!loop) return handlerOffset.value;\n\n    return Number.isNaN(x) ? 0 : x;\n  }, [loop, size, dataLength, handlerOffset]);\n\n  useOnProgressChange({\n    autoFillData,\n    loop,\n    size,\n    offsetX,\n    rawDataLength,\n    onProgressChange,\n  });\n\n  const carouselController = useCarouselController({\n    ref,\n    loop,\n    size,\n    dataLength,\n    autoFillData,\n    handlerOffset,\n    withAnimation,\n    defaultIndex,\n    fixedDirection,\n    duration: scrollAnimationDuration,\n    onScrollEnd: () => runOnJS(_onScrollEnd)(),\n    onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),\n  });\n\n  const {\n    getSharedIndex,\n    // index, // Animated index. Could be used for dynamic dimension\n  } = carouselController;\n\n  const _onScrollEnd = React.useCallback(() => {\n    const _sharedIndex = Math.round(getSharedIndex());\n\n    const realIndex = computedRealIndexWithAutoFillData({\n      index: _sharedIndex,\n      dataLength: rawDataLength,\n      loop,\n      autoFillData,\n    });\n\n    if (onSnapToItem) onSnapToItem(realIndex);\n\n    if (onScrollEnd) onScrollEnd(realIndex);\n  }, [loop, autoFillData, rawDataLength, getSharedIndex, onSnapToItem, onScrollEnd]);\n\n  const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({\n    autoPlay,\n    autoPlayInterval,\n    autoPlayReverse,\n    carouselController,\n  });\n\n  const scrollViewGestureOnScrollStart = React.useCallback(() => {\n    pauseAutoPlay();\n    onScrollStart?.();\n  }, [onScrollStart, pauseAutoPlay]);\n\n  const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n    startAutoPlay();\n    _onScrollEnd();\n  }, [_onScrollEnd, startAutoPlay]);\n\n  const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [pauseAutoPlay]);\n\n  const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [startAutoPlay]);\n\n  const layoutStyle = useAnimatedStyle(() => {\n    // const dimension = itemDimensions.value[index.value];\n\n    // if (!dimension) {\n    //   return {};\n    // }\n    return {\n      // height: dimension.height, // For dynamic dimension in the future\n\n      width: width || \"100%\", // [width is deprecated]\n      height: height || \"100%\", // [height is deprecated]\n    };\n  }, [width, height, size, itemDimensions]);\n\n  return (\n    <GestureHandlerRootView style={[styles.layoutContainer, containerStyle]}>\n      <ScrollViewGesture\n        size={size}\n        key={mode}\n        translation={handlerOffset}\n        style={[\n          styles.contentContainer, // [deprecated]\n          layoutStyle,\n          style,\n          vertical ? styles.itemsVertical : styles.itemsHorizontal,\n        ]}\n        testID={testID}\n        onScrollStart={scrollViewGestureOnScrollStart}\n        onScrollEnd={scrollViewGestureOnScrollEnd}\n        onTouchBegin={scrollViewGestureOnTouchBegin}\n        onTouchEnd={scrollViewGestureOnTouchEnd}\n      >\n        <ItemRenderer\n          data={data}\n          dataLength={dataLength}\n          rawDataLength={rawDataLength}\n          loop={loop}\n          size={size}\n          windowSize={windowSize}\n          autoFillData={autoFillData}\n          offsetX={offsetX}\n          handlerOffset={handlerOffset}\n          layoutConfig={layoutConfig}\n          renderItem={renderItem}\n          customAnimation={customAnimation}\n        />\n      </ScrollViewGesture>\n    </GestureHandlerRootView>\n  );\n});\n\nconst styles = StyleSheet.create({\n  layoutContainer: {\n    display: \"flex\",\n  },\n  contentContainer: {\n    overflow: \"hidden\",\n  },\n  itemsHorizontal: {\n    flexDirection: \"row\",\n  },\n  itemsVertical: {\n    flexDirection: \"column\",\n  },\n});\n"]}

package/lib/commonjs/components/ItemLayout.js

@@ -69,7 +69,7 @@ const ItemLayout = props => {
 
   const x = (0, _useOffsetX.useOffsetX)(offsetXConfig, visibleRanges);
   const animationValue = (0, _reactNativeReanimated.useDerivedValue)(() => x.value / size, [x, size]);
-  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => animationStyle(x.value / size, index), [animationStyle, index]); // TODO: For dynamic dimension in the future
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => animationStyle(x.value / size, index), [animationStyle, index, x, size]); // TODO: For dynamic dimension in the future
   // function handleLayout(e: LayoutChangeEvent) {
   //   const { width, height } = e.nativeEvent.layout;
   //   updateItemDimensions(index, { width, height });

package/lib/commonjs/components/ItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ItemLayout.tsx"],"names":["ItemLayout","props","handlerOffset","index","children","visibleRanges","animationStyle","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","position","pointerEvents"],"mappings":";;;;;;;AAAA;;AAGA;;AAIA;;AAGA;;;;;;;;AAIO,MAAMA,UAQX,GAAIC,KAAD,IAAW;AACd,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MAAoEL,KAA1E;AAEA,QAAM;AACJA,IAAAA,KAAK,EAAE;AAAEM,MAAAA,IAAF;AAAQC,MAAAA,UAAR;AAAoBC,MAAAA,KAApB;AAA2BC,MAAAA,MAA3B;AAAmCC,MAAAA,QAAnC;AAA6CC,MAAAA,YAA7C;AAA2DC,MAAAA,IAA3D;AAAiEC,MAAAA;AAAjE,KADH,CAEJ;AACA;;AAHI,MAIF,4BAJJ;AAMA,QAAMC,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AAEA,MAAIO,aAAoB,GAAG;AACzBd,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBY,IAAAA,IAHyB;AAIzBP,IAAAA,UAJyB;AAKzBD,IAAAA,IALyB;AAMzB,QAAI,OAAOK,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsD,EAA1D;AANyB,GAA3B;;AASA,MAAIC,IAAI,KAAK,kBAAb,EAAiC;AAC/B,UAAM;AAAEI,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCJ,UAAtC;AAEAE,IAAAA,aAAa,GAAG;AACdd,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdY,MAAAA,IAHc;AAIdP,MAAAA,UAJc;AAKdD,MAAAA,IALc;AAMdY,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAG,4BAAWL,aAAX,EAA0BX,aAA1B,CAAV;AACA,QAAMiB,cAAc,GAAG,4CAAgB,MAAMD,CAAC,CAACE,KAAF,GAAUR,IAAhC,EAAsC,CAACM,CAAD,EAAIN,IAAJ,CAAtC,CAAvB;AACA,QAAMS,aAAa,GAAG,6CACpB,MAAMlB,cAAc,CAACe,CAAC,CAACE,KAAF,GAAUR,IAAX,EAAiBZ,KAAjB,CADA,EAEpB,CAACG,cAAD,EAAiBH,KAAjB,CAFoB,CAAtB,CApCc,CAyCd;AACA;AACA;AACA;AACA;;AAEA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEM,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEe,MAAAA,QAAQ,EAAE,UAHZ;AAIEC,MAAAA,aAAa,EAAE;AAJjB,KADK,EAOLF,aAPK,CADT,CAUE;;AACA;AACN;AACA;AACA;AACA;AAfI;AAgBE,IAAA,MAAM,EAAG,mBAAkBrB,KAAM;AAhBnC,KAkBGC,QAAQ,CAAC;AAAEkB,IAAAA;AAAF,GAAD,CAlBX,CADF;AAsBD,CA7EM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\nimport Animated, { useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\n\nimport { TCarouselProps } from \"src/types\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { ILayoutConfig } from \"../layouts/stack\";\nimport { useGlobalState } from \"../store\";\n\nexport type TAnimationStyle = NonNullable<TCarouselProps[\"customAnimation\"]>;\n\nexport const ItemLayout: React.FC<{\n  index: number;\n  handlerOffset: SharedValue<number>;\n  visibleRanges: IVisibleRanges;\n  animationStyle: TAnimationStyle;\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>;\n  }) => React.ReactElement;\n}> = (props) => {\n  const { handlerOffset, index, children, visibleRanges, animationStyle } = props;\n\n  const {\n    props: { loop, dataLength, width, height, vertical, customConfig, mode, modeConfig },\n    // TODO: For dynamic dimension in the future\n    // layout: { updateItemDimensions },\n  } = useGlobalState();\n\n  const size = vertical ? height : width;\n\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<ViewStyle>(\n    () => animationStyle(x.value / size, index),\n    [animationStyle, index]\n  );\n\n  // TODO: For dynamic dimension in the future\n  // function handleLayout(e: LayoutChangeEvent) {\n  //   const { width, height } = e.nativeEvent.layout;\n  //   updateItemDimensions(index, { width, height });\n  // }\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n          pointerEvents: \"box-none\",\n        },\n        animatedStyle,\n      ]}\n      // onLayout={handleLayout}\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}__`}\n    >\n      {children({ animationValue })}\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"sources":["ItemLayout.tsx"],"names":["ItemLayout","props","handlerOffset","index","children","visibleRanges","animationStyle","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","position","pointerEvents"],"mappings":";;;;;;;AAAA;;AAGA;;AAIA;;AAGA;;;;;;;;AAIO,MAAMA,UAQX,GAAIC,KAAD,IAAW;AACd,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MAAoEL,KAA1E;AAEA,QAAM;AACJA,IAAAA,KAAK,EAAE;AAAEM,MAAAA,IAAF;AAAQC,MAAAA,UAAR;AAAoBC,MAAAA,KAApB;AAA2BC,MAAAA,MAA3B;AAAmCC,MAAAA,QAAnC;AAA6CC,MAAAA,YAA7C;AAA2DC,MAAAA,IAA3D;AAAiEC,MAAAA;AAAjE,KADH,CAEJ;AACA;;AAHI,MAIF,4BAJJ;AAMA,QAAMC,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AAEA,MAAIO,aAAoB,GAAG;AACzBd,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBY,IAAAA,IAHyB;AAIzBP,IAAAA,UAJyB;AAKzBD,IAAAA,IALyB;AAMzB,QAAI,OAAOK,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsD,EAA1D;AANyB,GAA3B;;AASA,MAAIC,IAAI,KAAK,kBAAb,EAAiC;AAC/B,UAAM;AAAEI,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCJ,UAAtC;AAEAE,IAAAA,aAAa,GAAG;AACdd,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdY,MAAAA,IAHc;AAIdP,MAAAA,UAJc;AAKdD,MAAAA,IALc;AAMdY,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAG,4BAAWL,aAAX,EAA0BX,aAA1B,CAAV;AACA,QAAMiB,cAAc,GAAG,4CAAgB,MAAMD,CAAC,CAACE,KAAF,GAAUR,IAAhC,EAAsC,CAACM,CAAD,EAAIN,IAAJ,CAAtC,CAAvB;AACA,QAAMS,aAAa,GAAG,6CACpB,MAAMlB,cAAc,CAACe,CAAC,CAACE,KAAF,GAAUR,IAAX,EAAiBZ,KAAjB,CADA,EAEpB,CAACG,cAAD,EAAiBH,KAAjB,EAAwBkB,CAAxB,EAA2BN,IAA3B,CAFoB,CAAtB,CApCc,CAyCd;AACA;AACA;AACA;AACA;;AAEA,sBACE,6BAAC,8BAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEN,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEe,MAAAA,QAAQ,EAAE,UAHZ;AAIEC,MAAAA,aAAa,EAAE;AAJjB,KADK,EAOLF,aAPK,CADT,CAUE;;AACA;AACN;AACA;AACA;AACA;AAfI;AAgBE,IAAA,MAAM,EAAG,mBAAkBrB,KAAM;AAhBnC,KAkBGC,QAAQ,CAAC;AAAEkB,IAAAA;AAAF,GAAD,CAlBX,CADF;AAsBD,CA7EM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\nimport Animated, { useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\n\nimport { TCarouselProps } from \"src/types\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { ILayoutConfig } from \"../layouts/stack\";\nimport { useGlobalState } from \"../store\";\n\nexport type TAnimationStyle = NonNullable<TCarouselProps[\"customAnimation\"]>;\n\nexport const ItemLayout: React.FC<{\n  index: number;\n  handlerOffset: SharedValue<number>;\n  visibleRanges: IVisibleRanges;\n  animationStyle: TAnimationStyle;\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>;\n  }) => React.ReactElement;\n}> = (props) => {\n  const { handlerOffset, index, children, visibleRanges, animationStyle } = props;\n\n  const {\n    props: { loop, dataLength, width, height, vertical, customConfig, mode, modeConfig },\n    // TODO: For dynamic dimension in the future\n    // layout: { updateItemDimensions },\n  } = useGlobalState();\n\n  const size = vertical ? height : width;\n\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<ViewStyle>(\n    () => animationStyle(x.value / size, index),\n    [animationStyle, index, x, size]\n  );\n\n  // TODO: For dynamic dimension in the future\n  // function handleLayout(e: LayoutChangeEvent) {\n  //   const { width, height } = e.nativeEvent.layout;\n  //   updateItemDimensions(index, { width, height });\n  // }\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n          pointerEvents: \"box-none\",\n        },\n        animatedStyle,\n      ]}\n      // onLayout={handleLayout}\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}__`}\n    >\n      {children({ animationValue })}\n    </Animated.View>\n  );\n};\n"]}

package/lib/commonjs/hooks/useOffsetX.js

@@ -44,7 +44,7 @@ const useOffsetX = (opts, visibleRanges) => {
     }
 
     return Number.MAX_SAFE_INTEGER;
-  }, [loop, dataLength, viewCount, type, size, visibleRanges]);
+  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);
   return x;
 };
 

package/lib/commonjs/hooks/useOffsetX.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOffsetX.ts"],"names":["useOffsetX","opts","visibleRanges","handlerOffset","index","size","loop","dataLength","type","viewCount","_viewCount","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","Math","round","positiveCount","startPos","MAX","MIN","x","negativeRange","positiveRange","value","inputRange","Number","MIN_VALUE","outputRange","Extrapolation","CLAMP","MAX_SAFE_INTEGER"],"mappings":";;;;;;;AACA;;AAcO,MAAMA,UAAU,GAAG,CAACC,IAAD,EAAcC,aAAd,KAAgD;AACxE,QAAM;AACJC,IAAAA,aADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,IAAI,GAAG,UANH;AAOJC,IAAAA,SAAS,EAAEC;AAPP,MAQFT,IARJ;AAUA,QAAMU,WAAW,GAAGJ,UAApB;AACA,QAAMK,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGR,IAAI,GAAGM,WAA3B;AACA,QAAMG,UAAU,GAAG,MAAMT,IAAzB;AAEA,QAAMI,SAAS,GAAGC,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBK,IAAI,CAACC,KAAL,CAAW,CAACL,WAAW,GAAG,CAAf,IAAoB,CAA/B,CAAhC;AACA,QAAMM,aAAa,GAAGT,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCG,YAAY,GAAGH,SAAvE;AAEA,MAAIS,QAAQ,GAAGb,IAAI,GAAGD,KAAtB;AACA,MAAIA,KAAK,GAAGa,aAAZ,EAA2BC,QAAQ,GAAG,CAACd,KAAK,GAAGO,WAAT,IAAwBN,IAAnC;AAE3B,QAAMc,GAAG,GAAGF,aAAa,GAAGZ,IAA5B;AACA,QAAMe,GAAG,GAAG,EAAE,CAACR,YAAY,GAAGK,aAAhB,IAAiCZ,IAAnC,CAAZ;AAEA,QAAMgB,CAAC,GAAG,4CAAgB,MAAM;AAC9B,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCrB,aAAa,CAACsB,KAAvD;;AAEA,QACGpB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAAtB,IAA6BlB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAApD,IACClB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAAtB,IAA6BnB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAFtD,EAGE;AACA,UAAIjB,IAAJ,EAAU;AACR,cAAMmB,UAAU,GAAG,CACjB,CAACZ,WADgB,EAEjBO,GAAG,GAAGN,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SAFpB,EAGjBP,GAAG,GAAGN,UAAN,GAAmBI,QAHF,EAIjB,CAJiB,EAKjBC,GAAG,GAAGL,UAAN,GAAmBI,QALF,EAMjBC,GAAG,GAAGL,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SANpB,EAOjBd,WAPiB,CAAnB;AAUA,cAAMe,WAAW,GAAG,CAClBV,QADkB,EAElBC,GAAG,GAAGL,UAAN,GAAmBY,MAAM,CAACC,SAFR,EAGlBP,GAAG,GAAGN,UAHY,EAIlBI,QAJkB,EAKlBC,GAAG,GAAGL,UALY,EAMlBM,GAAG,GAAGN,UAAN,GAAmBY,MAAM,CAACC,SANR,EAOlBT,QAPkB,CAApB;AAUA,eAAO,wCAAYf,aAAa,CAACqB,KAA1B,EAAiCC,UAAjC,EAA6CG,WAA7C,EAA0DC,qCAAcC,KAAxE,CAAP;AACD;;AAED,aAAO3B,aAAa,CAACqB,KAAd,GAAsBnB,IAAI,GAAGD,KAApC;AACD;;AAED,WAAOsB,MAAM,CAACK,gBAAd;AACD,GAnCS,EAmCP,CAACzB,IAAD,EAAOC,UAAP,EAAmBE,SAAnB,EAA8BD,IAA9B,EAAoCH,IAApC,EAA0CH,aAA1C,CAnCO,CAAV;AAqCA,SAAOmB,CAAP;AACD,CA/DM","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport { Extrapolation, interpolate, useDerivedValue } from \"react-native-reanimated\";\n\nimport type { IVisibleRanges } from \"./useVisibleRanges\";\n\nexport interface IOpts {\n  index: number;\n  size: number;\n  handlerOffset: Animated.SharedValue<number>;\n  dataLength: number;\n  type?: \"positive\" | \"negative\";\n  viewCount?: number;\n  loop?: boolean;\n}\n\nexport const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {\n  const {\n    handlerOffset,\n    index,\n    size,\n    loop,\n    dataLength,\n    type = \"positive\",\n    viewCount: _viewCount,\n  } = opts;\n\n  const ITEM_LENGTH = dataLength;\n  const VALID_LENGTH = ITEM_LENGTH - 1;\n  const TOTAL_WIDTH = size * ITEM_LENGTH;\n  const HALF_WIDTH = 0.5 * size;\n\n  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);\n  const positiveCount = type === \"positive\" ? viewCount : VALID_LENGTH - viewCount;\n\n  let startPos = size * index;\n  if (index > positiveCount) startPos = (index - ITEM_LENGTH) * size;\n\n  const MAX = positiveCount * size;\n  const MIN = -((VALID_LENGTH - positiveCount) * size);\n\n  const x = useDerivedValue(() => {\n    const { negativeRange, positiveRange } = visibleRanges.value;\n\n    if (\n      (index >= negativeRange[0] && index <= negativeRange[1]) ||\n      (index >= positiveRange[0] && index <= positiveRange[1])\n    ) {\n      if (loop) {\n        const inputRange = [\n          -TOTAL_WIDTH,\n          MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,\n          MIN - HALF_WIDTH - startPos,\n          0,\n          MAX + HALF_WIDTH - startPos,\n          MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,\n          TOTAL_WIDTH,\n        ];\n\n        const outputRange = [\n          startPos,\n          MAX + HALF_WIDTH - Number.MIN_VALUE,\n          MIN - HALF_WIDTH,\n          startPos,\n          MAX + HALF_WIDTH,\n          MIN - HALF_WIDTH + Number.MIN_VALUE,\n          startPos,\n        ];\n\n        return interpolate(handlerOffset.value, inputRange, outputRange, Extrapolation.CLAMP);\n      }\n\n      return handlerOffset.value + size * index;\n    }\n\n    return Number.MAX_SAFE_INTEGER;\n  }, [loop, dataLength, viewCount, type, size, visibleRanges]);\n\n  return x;\n};\n"]}
+{"version":3,"sources":["useOffsetX.ts"],"names":["useOffsetX","opts","visibleRanges","handlerOffset","index","size","loop","dataLength","type","viewCount","_viewCount","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","Math","round","positiveCount","startPos","MAX","MIN","x","negativeRange","positiveRange","value","inputRange","Number","MIN_VALUE","outputRange","Extrapolation","CLAMP","MAX_SAFE_INTEGER"],"mappings":";;;;;;;AACA;;AAcO,MAAMA,UAAU,GAAG,CAACC,IAAD,EAAcC,aAAd,KAAgD;AACxE,QAAM;AACJC,IAAAA,aADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,IAAI,GAAG,UANH;AAOJC,IAAAA,SAAS,EAAEC;AAPP,MAQFT,IARJ;AAUA,QAAMU,WAAW,GAAGJ,UAApB;AACA,QAAMK,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGR,IAAI,GAAGM,WAA3B;AACA,QAAMG,UAAU,GAAG,MAAMT,IAAzB;AAEA,QAAMI,SAAS,GAAGC,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBK,IAAI,CAACC,KAAL,CAAW,CAACL,WAAW,GAAG,CAAf,IAAoB,CAA/B,CAAhC;AACA,QAAMM,aAAa,GAAGT,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCG,YAAY,GAAGH,SAAvE;AAEA,MAAIS,QAAQ,GAAGb,IAAI,GAAGD,KAAtB;AACA,MAAIA,KAAK,GAAGa,aAAZ,EAA2BC,QAAQ,GAAG,CAACd,KAAK,GAAGO,WAAT,IAAwBN,IAAnC;AAE3B,QAAMc,GAAG,GAAGF,aAAa,GAAGZ,IAA5B;AACA,QAAMe,GAAG,GAAG,EAAE,CAACR,YAAY,GAAGK,aAAhB,IAAiCZ,IAAnC,CAAZ;AAEA,QAAMgB,CAAC,GAAG,4CAAgB,MAAM;AAC9B,UAAM;AAAEC,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCrB,aAAa,CAACsB,KAAvD;;AAEA,QACGpB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAAtB,IAA6BlB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAApD,IACClB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAAtB,IAA6BnB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAFtD,EAGE;AACA,UAAIjB,IAAJ,EAAU;AACR,cAAMmB,UAAU,GAAG,CACjB,CAACZ,WADgB,EAEjBO,GAAG,GAAGN,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SAFpB,EAGjBP,GAAG,GAAGN,UAAN,GAAmBI,QAHF,EAIjB,CAJiB,EAKjBC,GAAG,GAAGL,UAAN,GAAmBI,QALF,EAMjBC,GAAG,GAAGL,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SANpB,EAOjBd,WAPiB,CAAnB;AAUA,cAAMe,WAAW,GAAG,CAClBV,QADkB,EAElBC,GAAG,GAAGL,UAAN,GAAmBY,MAAM,CAACC,SAFR,EAGlBP,GAAG,GAAGN,UAHY,EAIlBI,QAJkB,EAKlBC,GAAG,GAAGL,UALY,EAMlBM,GAAG,GAAGN,UAAN,GAAmBY,MAAM,CAACC,SANR,EAOlBT,QAPkB,CAApB;AAUA,eAAO,wCAAYf,aAAa,CAACqB,KAA1B,EAAiCC,UAAjC,EAA6CG,WAA7C,EAA0DC,qCAAcC,KAAxE,CAAP;AACD;;AAED,aAAO3B,aAAa,CAACqB,KAAd,GAAsBnB,IAAI,GAAGD,KAApC;AACD;;AAED,WAAOsB,MAAM,CAACK,gBAAd;AACD,GAnCS,EAmCP,CAACzB,IAAD,EAAOC,UAAP,EAAmBE,SAAnB,EAA8BD,IAA9B,EAAoCH,IAApC,EAA0CH,aAA1C,EAAyDC,aAAzD,CAnCO,CAAV;AAqCA,SAAOkB,CAAP;AACD,CA/DM","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport { Extrapolation, interpolate, useDerivedValue } from \"react-native-reanimated\";\n\nimport type { IVisibleRanges } from \"./useVisibleRanges\";\n\nexport interface IOpts {\n  index: number;\n  size: number;\n  handlerOffset: Animated.SharedValue<number>;\n  dataLength: number;\n  type?: \"positive\" | \"negative\";\n  viewCount?: number;\n  loop?: boolean;\n}\n\nexport const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {\n  const {\n    handlerOffset,\n    index,\n    size,\n    loop,\n    dataLength,\n    type = \"positive\",\n    viewCount: _viewCount,\n  } = opts;\n\n  const ITEM_LENGTH = dataLength;\n  const VALID_LENGTH = ITEM_LENGTH - 1;\n  const TOTAL_WIDTH = size * ITEM_LENGTH;\n  const HALF_WIDTH = 0.5 * size;\n\n  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);\n  const positiveCount = type === \"positive\" ? viewCount : VALID_LENGTH - viewCount;\n\n  let startPos = size * index;\n  if (index > positiveCount) startPos = (index - ITEM_LENGTH) * size;\n\n  const MAX = positiveCount * size;\n  const MIN = -((VALID_LENGTH - positiveCount) * size);\n\n  const x = useDerivedValue(() => {\n    const { negativeRange, positiveRange } = visibleRanges.value;\n\n    if (\n      (index >= negativeRange[0] && index <= negativeRange[1]) ||\n      (index >= positiveRange[0] && index <= positiveRange[1])\n    ) {\n      if (loop) {\n        const inputRange = [\n          -TOTAL_WIDTH,\n          MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,\n          MIN - HALF_WIDTH - startPos,\n          0,\n          MAX + HALF_WIDTH - startPos,\n          MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,\n          TOTAL_WIDTH,\n        ];\n\n        const outputRange = [\n          startPos,\n          MAX + HALF_WIDTH - Number.MIN_VALUE,\n          MIN - HALF_WIDTH,\n          startPos,\n          MAX + HALF_WIDTH,\n          MIN - HALF_WIDTH + Number.MIN_VALUE,\n          startPos,\n        ];\n\n        return interpolate(handlerOffset.value, inputRange, outputRange, Extrapolation.CLAMP);\n      }\n\n      return handlerOffset.value + size * index;\n    }\n\n    return Number.MAX_SAFE_INTEGER;\n  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);\n\n  return x;\n};\n"]}

package/lib/commonjs/layouts/stack.js

@@ -29,7 +29,6 @@ function horizontalStackLayout() {
       opacityInterval = 0.1,
       rotateZDeg = 30
     } = modeConfig;
-    const transform = [];
     const {
       validLength,
       value,
@@ -48,11 +47,6 @@ function horizontalStackLayout() {
       opacityInterval,
       snapDirection
     });
-    const styles = {
-      transform,
-      zIndex,
-      opacity
-    };
     let translateX;
     let scale;
     let rotateZ;
@@ -67,13 +61,18 @@ function horizontalStackLayout() {
       rotateZ = `${(0, _reactNativeReanimated.interpolate)(value, inputRange, [0, 0, rotateZDeg], _reactNativeReanimated.Extrapolation.CLAMP)}deg`;
     }
 
-    transform.push({
+    const transform = [{
       translateX: translateX
     }, {
       scale: scale
     }, {
       rotateZ: rotateZ
-    });
+    }];
+    const styles = {
+      transform,
+      zIndex,
+      opacity
+    };
     return styles;
   };
 }
@@ -106,7 +105,6 @@ function verticalStackLayout() {
       opacityInterval = 0.1,
       rotateZDeg = 30
     } = modeConfig;
-    const transform = [];
     const {
       validLength,
       value,
@@ -125,11 +123,6 @@ function verticalStackLayout() {
       opacityInterval,
       snapDirection
     });
-    const styles = {
-      transform,
-      zIndex,
-      opacity
-    };
     let translateX;
     let scale;
     let rotateZ;
@@ -147,7 +140,7 @@ function verticalStackLayout() {
       translateY = (0, _reactNativeReanimated.interpolate)(value, inputRange, [validLength * stackInterval, 0, 0], _reactNativeReanimated.Extrapolation.CLAMP);
     }
 
-    transform.push({
+    const transform = [{
       translateX: translateX
     }, {
       scale: scale
@@ -155,7 +148,12 @@ function verticalStackLayout() {
       rotateZ: rotateZ
     }, {
       translateY: translateY
-    });
+    }];
+    const styles = {
+      transform,
+      zIndex,
+      opacity
+    };
     return styles;
   };
 }
@@ -209,7 +207,7 @@ function getCommonStyles(opts) {
   }
 
   return {
-    zIndex,
+    zIndex: Math.round(zIndex),
     opacity
   };
 }

package/lib/commonjs/layouts/stack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["stack.ts"],"names":["screen","Dimensions","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","transform","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","styles","translateX","scale","rotateZ","Extrapolation","CLAMP","push","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","page","Math","floor","abs","diff","Error","Number","MIN_VALUE"],"mappings":"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","sourcesContent":["import { useMemo } from \"react\";\nimport type { TransformsStyle, ViewStyle } from \"react-native\";\nimport { Dimensions } from \"react-native\";\nimport { Extrapolation, interpolate } from \"react-native-reanimated\";\n\nimport type { CustomConfig, IComputedDirectionTypes } from \"../types\";\n\nconst screen = Dimensions.get(\"window\");\n\nexport interface ILayoutConfig {\n  showLength?: number;\n  moveSize?: number;\n  stackInterval?: number;\n  scaleInterval?: number;\n  opacityInterval?: number;\n  rotateZDeg?: number;\n  snapDirection?: \"left\" | \"right\";\n}\n\nexport type TStackModeProps = IComputedDirectionTypes<{\n  /**\n   * Carousel Animated transitions.\n   */\n  mode?: \"horizontal-stack\" | \"vertical-stack\";\n  /**\n   * Stack animation style.\n   * @default\n   *     snapDirection: 'right',\n   *     moveSize: window.width,\n   *     stackInterval: 30,\n   *     scaleInterval: 0.08,\n   *     rotateZDeg: 135,\n   *     opacityInterval: 0.1,\n   */\n  modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n\n    const transform: TransformsStyle[\"transform\"] = [];\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-moveSize, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-validLength * stackInterval, 0, moveSize],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n    }\n\n    transform.push(\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      }\n    );\n\n    return styles;\n  };\n}\n\nexport function useHorizontalStackLayout(\n  customAnimationConfig: ILayoutConfig = {},\n  customConfig: CustomConfig = {}\n) {\n  const config = useMemo(\n    () => ({\n      type: customAnimationConfig.snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: customAnimationConfig.showLength,\n      ...customConfig,\n    }),\n    [customAnimationConfig, customConfig]\n  );\n\n  return {\n    layout: horizontalStackLayout(customAnimationConfig),\n    config,\n  };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n    const transform: TransformsStyle[\"transform\"] = [];\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n    let translateY: number;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(value, inputRange, [-moveSize, 0, 0], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [0, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(value, inputRange, [0, 0, moveSize], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [validLength * stackInterval, 0, 0],\n        Extrapolation.CLAMP\n      );\n    }\n\n    transform.push(\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      },\n      {\n        translateY: translateY!,\n      }\n    );\n\n    return styles;\n  };\n}\n\nfunction getCommonVariables(opts: {\n  value: number;\n  showLength: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { showLength, value: _value, snapDirection } = opts;\n  function easeInOutCubic(v: number): number {\n    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;\n  }\n  const page = Math.floor(Math.abs(_value));\n  const diff = Math.abs(_value) % 1;\n  const value = _value < 0 ? -(page + easeInOutCubic(diff)) : page + easeInOutCubic(diff);\n  const validLength = showLength! - 1;\n\n  let inputRange: [number, number, number];\n\n  if (snapDirection === \"left\") inputRange = [-1, 0, validLength];\n  else if (snapDirection === \"right\") inputRange = [-validLength, 0, 1];\n  else throw new Error(\"snapDirection must be set to either left or right\");\n\n  return {\n    inputRange,\n    validLength,\n    value,\n  };\n}\n\nfunction getCommonStyles(opts: {\n  value: number;\n  validLength: number;\n  opacityInterval: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { snapDirection, validLength, value, opacityInterval } = opts;\n\n  let zIndex: number;\n  let opacity: number;\n\n  if (snapDirection === \"left\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n          [Number.MIN_VALUE, validLength, validLength, validLength - 1, -1]\n        ) * 10000\n      ) / 100;\n\n    opacity = interpolate(\n      value,\n      [-1, 0, validLength - 1, validLength],\n      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n    );\n  } else if (snapDirection === \"right\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n          [1, validLength - 1, validLength, validLength, Number.MIN_VALUE]\n        ) * 10000\n      ) / 100;\n    opacity = interpolate(\n      value,\n      [-validLength, 1 - validLength, 0, 1],\n      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n    );\n  } else {\n    throw new Error(\"snapDirection must be set to either left or right\");\n  }\n\n  return {\n    zIndex,\n    opacity,\n  };\n}\n"]}
+{"version":3,"sources":["stack.ts"],"names":["screen","Dimensions","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","translateX","scale","rotateZ","Extrapolation","CLAMP","transform","styles","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","page","Math","floor","abs","diff","Error","Number","MIN_VALUE","round"],"mappings":"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","sourcesContent":["import { useMemo } from \"react\";\nimport type { TransformsStyle, ViewStyle } from \"react-native\";\nimport { Dimensions } from \"react-native\";\nimport { Extrapolation, interpolate } from \"react-native-reanimated\";\n\nimport type { CustomConfig, IComputedDirectionTypes } from \"../types\";\n\nconst screen = Dimensions.get(\"window\");\n\nexport interface ILayoutConfig {\n  showLength?: number;\n  moveSize?: number;\n  stackInterval?: number;\n  scaleInterval?: number;\n  opacityInterval?: number;\n  rotateZDeg?: number;\n  snapDirection?: \"left\" | \"right\";\n}\n\nexport type TStackModeProps = IComputedDirectionTypes<{\n  /**\n   * Carousel Animated transitions.\n   */\n  mode?: \"horizontal-stack\" | \"vertical-stack\";\n  /**\n   * Stack animation style.\n   * @default\n   *     snapDirection: 'right',\n   *     moveSize: window.width,\n   *     stackInterval: 30,\n   *     scaleInterval: 0.08,\n   *     rotateZDeg: 135,\n   *     opacityInterval: 0.1,\n   */\n  modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-moveSize, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-validLength * stackInterval, 0, moveSize],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n    }\n\n    const transform: TransformsStyle[\"transform\"] = [\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      },\n    ];\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    return styles;\n  };\n}\n\nexport function useHorizontalStackLayout(\n  customAnimationConfig: ILayoutConfig = {},\n  customConfig: CustomConfig = {}\n) {\n  const config = useMemo(\n    () => ({\n      type: customAnimationConfig.snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: customAnimationConfig.showLength,\n      ...customConfig,\n    }),\n    [customAnimationConfig, customConfig]\n  );\n\n  return {\n    layout: horizontalStackLayout(customAnimationConfig),\n    config,\n  };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n    let translateY: number;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(value, inputRange, [-moveSize, 0, 0], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [0, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(value, inputRange, [0, 0, moveSize], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [validLength * stackInterval, 0, 0],\n        Extrapolation.CLAMP\n      );\n    }\n\n    const transform: TransformsStyle[\"transform\"] = [\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      },\n      {\n        translateY: translateY!,\n      },\n    ];\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    return styles;\n  };\n}\n\nfunction getCommonVariables(opts: {\n  value: number;\n  showLength: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { showLength, value: _value, snapDirection } = opts;\n  function easeInOutCubic(v: number): number {\n    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;\n  }\n  const page = Math.floor(Math.abs(_value));\n  const diff = Math.abs(_value) % 1;\n  const value = _value < 0 ? -(page + easeInOutCubic(diff)) : page + easeInOutCubic(diff);\n  const validLength = showLength! - 1;\n\n  let inputRange: [number, number, number];\n\n  if (snapDirection === \"left\") inputRange = [-1, 0, validLength];\n  else if (snapDirection === \"right\") inputRange = [-validLength, 0, 1];\n  else throw new Error(\"snapDirection must be set to either left or right\");\n\n  return {\n    inputRange,\n    validLength,\n    value,\n  };\n}\n\nfunction getCommonStyles(opts: {\n  value: number;\n  validLength: number;\n  opacityInterval: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { snapDirection, validLength, value, opacityInterval } = opts;\n\n  let zIndex: number;\n  let opacity: number;\n\n  if (snapDirection === \"left\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n          [Number.MIN_VALUE, validLength, validLength, validLength - 1, -1]\n        ) * 10000\n      ) / 100;\n\n    opacity = interpolate(\n      value,\n      [-1, 0, validLength - 1, validLength],\n      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n    );\n  } else if (snapDirection === \"right\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n          [1, validLength - 1, validLength, validLength, Number.MIN_VALUE]\n        ) * 10000\n      ) / 100;\n    opacity = interpolate(\n      value,\n      [-validLength, 1 - validLength, 0, 1],\n      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n    );\n  } else {\n    throw new Error(\"snapDirection must be set to either left or right\");\n  }\n\n  return {\n    zIndex: Math.round(zIndex),\n    opacity,\n  };\n}\n"]}

package/lib/module/components/CarouselLayout.js

@@ -63,7 +63,7 @@ export const CarouselLayout = /*#__PURE__*/React.forwardRef((_props, ref) => {
     const x = handlerOffset.value % totalSize;
     if (!loop) return handlerOffset.value;
     return Number.isNaN(x) ? 0 : x;
-  }, [loop, size, dataLength]);
+  }, [loop, size, dataLength, handlerOffset]);
   useOnProgressChange({
     autoFillData,
     loop,

package/lib/module/components/CarouselLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CarouselLayout.tsx"],"names":["React","StyleSheet","GestureHandlerRootView","runOnJS","useAnimatedStyle","useDerivedValue","useAutoPlay","useCarouselController","useCommonVariables","useLayoutConfig","useOnProgressChange","useGlobalState","computedRealIndexWithAutoFillData","ItemRenderer","ScrollViewGesture","CarouselLayout","forwardRef","_props","ref","props","layout","itemDimensions","testID","loop","autoFillData","data","dataLength","rawDataLength","mode","style","containerStyle","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","fixedDirection","renderItem","onScrollEnd","onSnapToItem","onScrollStart","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffset","layoutConfig","offsetX","totalSize","x","value","Number","isNaN","carouselController","duration","_onScrollEnd","getSharedIndex","useCallback","_sharedIndex","Math","round","realIndex","index","start","startAutoPlay","pause","pauseAutoPlay","scrollViewGestureOnScrollStart","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","layoutStyle","styles","layoutContainer","contentContainer","itemsVertical","itemsHorizontal","create","display","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { StyleSheet, type ViewStyle } from \"react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { runOnJS, useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\nimport { useAutoPlay } from \"../hooks/useAutoPlay\";\nimport { useCarouselController } from \"../hooks/useCarouselController\";\nimport { useCommonVariables } from \"../hooks/useCommonVariables\";\nimport { useLayoutConfig } from \"../hooks/useLayoutConfig\";\nimport { useOnProgressChange } from \"../hooks/useOnProgressChange\";\nimport { useGlobalState } from \"../store\";\nimport { ICarouselInstance } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\nimport { ItemRenderer } from \"./ItemRenderer\";\nimport { ScrollViewGesture } from \"./ScrollViewGesture\";\n\nexport type TAnimationStyle = (value: number) => ViewStyle;\n\nexport const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref) => {\n  const { props, layout } = useGlobalState();\n  const { itemDimensions } = layout;\n\n  const {\n    testID,\n    loop,\n    autoFillData,\n    // Fill data with autoFillData\n    data,\n    // Length of fill data\n    dataLength,\n    // Length of raw data\n    rawDataLength,\n    mode,\n    style,\n    containerStyle,\n    width,\n    height,\n    vertical,\n    autoPlay,\n    windowSize,\n    autoPlayReverse,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    withAnimation,\n    fixedDirection,\n    renderItem,\n    onScrollEnd,\n    onSnapToItem,\n    onScrollStart,\n    onProgressChange,\n    customAnimation,\n    defaultIndex,\n  } = props;\n\n  const commonVariables = useCommonVariables(props);\n  const { size, handlerOffset } = commonVariables;\n  const layoutConfig = useLayoutConfig({ ...props, size });\n\n  const offsetX = useDerivedValue(() => {\n    const totalSize = size * dataLength;\n    const x = handlerOffset.value % totalSize;\n\n    if (!loop) return handlerOffset.value;\n\n    return Number.isNaN(x) ? 0 : x;\n  }, [loop, size, dataLength]);\n\n  useOnProgressChange({\n    autoFillData,\n    loop,\n    size,\n    offsetX,\n    rawDataLength,\n    onProgressChange,\n  });\n\n  const carouselController = useCarouselController({\n    ref,\n    loop,\n    size,\n    dataLength,\n    autoFillData,\n    handlerOffset,\n    withAnimation,\n    defaultIndex,\n    fixedDirection,\n    duration: scrollAnimationDuration,\n    onScrollEnd: () => runOnJS(_onScrollEnd)(),\n    onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),\n  });\n\n  const {\n    getSharedIndex,\n    // index, // Animated index. Could be used for dynamic dimension\n  } = carouselController;\n\n  const _onScrollEnd = React.useCallback(() => {\n    const _sharedIndex = Math.round(getSharedIndex());\n\n    const realIndex = computedRealIndexWithAutoFillData({\n      index: _sharedIndex,\n      dataLength: rawDataLength,\n      loop,\n      autoFillData,\n    });\n\n    if (onSnapToItem) onSnapToItem(realIndex);\n\n    if (onScrollEnd) onScrollEnd(realIndex);\n  }, [loop, autoFillData, rawDataLength, getSharedIndex, onSnapToItem, onScrollEnd]);\n\n  const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({\n    autoPlay,\n    autoPlayInterval,\n    autoPlayReverse,\n    carouselController,\n  });\n\n  const scrollViewGestureOnScrollStart = React.useCallback(() => {\n    pauseAutoPlay();\n    onScrollStart?.();\n  }, [onScrollStart, pauseAutoPlay]);\n\n  const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n    startAutoPlay();\n    _onScrollEnd();\n  }, [_onScrollEnd, startAutoPlay]);\n\n  const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [pauseAutoPlay]);\n\n  const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [startAutoPlay]);\n\n  const layoutStyle = useAnimatedStyle(() => {\n    // const dimension = itemDimensions.value[index.value];\n\n    // if (!dimension) {\n    //   return {};\n    // }\n    return {\n      // height: dimension.height, // For dynamic dimension in the future\n\n      width: width || \"100%\", // [width is deprecated]\n      height: height || \"100%\", // [height is deprecated]\n    };\n  }, [width, height, size, itemDimensions]);\n\n  return (\n    <GestureHandlerRootView style={[styles.layoutContainer, containerStyle]}>\n      <ScrollViewGesture\n        size={size}\n        key={mode}\n        translation={handlerOffset}\n        style={[\n          styles.contentContainer, // [deprecated]\n          layoutStyle,\n          style,\n          vertical ? styles.itemsVertical : styles.itemsHorizontal,\n        ]}\n        testID={testID}\n        onScrollStart={scrollViewGestureOnScrollStart}\n        onScrollEnd={scrollViewGestureOnScrollEnd}\n        onTouchBegin={scrollViewGestureOnTouchBegin}\n        onTouchEnd={scrollViewGestureOnTouchEnd}\n      >\n        <ItemRenderer\n          data={data}\n          dataLength={dataLength}\n          rawDataLength={rawDataLength}\n          loop={loop}\n          size={size}\n          windowSize={windowSize}\n          autoFillData={autoFillData}\n          offsetX={offsetX}\n          handlerOffset={handlerOffset}\n          layoutConfig={layoutConfig}\n          renderItem={renderItem}\n          customAnimation={customAnimation}\n        />\n      </ScrollViewGesture>\n    </GestureHandlerRootView>\n  );\n});\n\nconst styles = StyleSheet.create({\n  layoutContainer: {\n    display: \"flex\",\n  },\n  contentContainer: {\n    overflow: \"hidden\",\n  },\n  itemsHorizontal: {\n    flexDirection: \"row\",\n  },\n  itemsVertical: {\n    flexDirection: \"column\",\n  },\n});\n"]}
+{"version":3,"sources":["CarouselLayout.tsx"],"names":["React","StyleSheet","GestureHandlerRootView","runOnJS","useAnimatedStyle","useDerivedValue","useAutoPlay","useCarouselController","useCommonVariables","useLayoutConfig","useOnProgressChange","useGlobalState","computedRealIndexWithAutoFillData","ItemRenderer","ScrollViewGesture","CarouselLayout","forwardRef","_props","ref","props","layout","itemDimensions","testID","loop","autoFillData","data","dataLength","rawDataLength","mode","style","containerStyle","width","height","vertical","autoPlay","windowSize","autoPlayReverse","autoPlayInterval","scrollAnimationDuration","withAnimation","fixedDirection","renderItem","onScrollEnd","onSnapToItem","onScrollStart","onProgressChange","customAnimation","defaultIndex","commonVariables","size","handlerOffset","layoutConfig","offsetX","totalSize","x","value","Number","isNaN","carouselController","duration","_onScrollEnd","getSharedIndex","useCallback","_sharedIndex","Math","round","realIndex","index","start","startAutoPlay","pause","pauseAutoPlay","scrollViewGestureOnScrollStart","scrollViewGestureOnScrollEnd","scrollViewGestureOnTouchBegin","scrollViewGestureOnTouchEnd","layoutStyle","styles","layoutContainer","contentContainer","itemsVertical","itemsHorizontal","create","display","overflow","flexDirection"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { StyleSheet, type ViewStyle } from \"react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { runOnJS, useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\nimport { useAutoPlay } from \"../hooks/useAutoPlay\";\nimport { useCarouselController } from \"../hooks/useCarouselController\";\nimport { useCommonVariables } from \"../hooks/useCommonVariables\";\nimport { useLayoutConfig } from \"../hooks/useLayoutConfig\";\nimport { useOnProgressChange } from \"../hooks/useOnProgressChange\";\nimport { useGlobalState } from \"../store\";\nimport { ICarouselInstance } from \"../types\";\nimport { computedRealIndexWithAutoFillData } from \"../utils/computed-with-auto-fill-data\";\nimport { ItemRenderer } from \"./ItemRenderer\";\nimport { ScrollViewGesture } from \"./ScrollViewGesture\";\n\nexport type TAnimationStyle = (value: number) => ViewStyle;\n\nexport const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref) => {\n  const { props, layout } = useGlobalState();\n  const { itemDimensions } = layout;\n\n  const {\n    testID,\n    loop,\n    autoFillData,\n    // Fill data with autoFillData\n    data,\n    // Length of fill data\n    dataLength,\n    // Length of raw data\n    rawDataLength,\n    mode,\n    style,\n    containerStyle,\n    width,\n    height,\n    vertical,\n    autoPlay,\n    windowSize,\n    autoPlayReverse,\n    autoPlayInterval,\n    scrollAnimationDuration,\n    withAnimation,\n    fixedDirection,\n    renderItem,\n    onScrollEnd,\n    onSnapToItem,\n    onScrollStart,\n    onProgressChange,\n    customAnimation,\n    defaultIndex,\n  } = props;\n\n  const commonVariables = useCommonVariables(props);\n  const { size, handlerOffset } = commonVariables;\n  const layoutConfig = useLayoutConfig({ ...props, size });\n\n  const offsetX = useDerivedValue(() => {\n    const totalSize = size * dataLength;\n    const x = handlerOffset.value % totalSize;\n\n    if (!loop) return handlerOffset.value;\n\n    return Number.isNaN(x) ? 0 : x;\n  }, [loop, size, dataLength, handlerOffset]);\n\n  useOnProgressChange({\n    autoFillData,\n    loop,\n    size,\n    offsetX,\n    rawDataLength,\n    onProgressChange,\n  });\n\n  const carouselController = useCarouselController({\n    ref,\n    loop,\n    size,\n    dataLength,\n    autoFillData,\n    handlerOffset,\n    withAnimation,\n    defaultIndex,\n    fixedDirection,\n    duration: scrollAnimationDuration,\n    onScrollEnd: () => runOnJS(_onScrollEnd)(),\n    onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),\n  });\n\n  const {\n    getSharedIndex,\n    // index, // Animated index. Could be used for dynamic dimension\n  } = carouselController;\n\n  const _onScrollEnd = React.useCallback(() => {\n    const _sharedIndex = Math.round(getSharedIndex());\n\n    const realIndex = computedRealIndexWithAutoFillData({\n      index: _sharedIndex,\n      dataLength: rawDataLength,\n      loop,\n      autoFillData,\n    });\n\n    if (onSnapToItem) onSnapToItem(realIndex);\n\n    if (onScrollEnd) onScrollEnd(realIndex);\n  }, [loop, autoFillData, rawDataLength, getSharedIndex, onSnapToItem, onScrollEnd]);\n\n  const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({\n    autoPlay,\n    autoPlayInterval,\n    autoPlayReverse,\n    carouselController,\n  });\n\n  const scrollViewGestureOnScrollStart = React.useCallback(() => {\n    pauseAutoPlay();\n    onScrollStart?.();\n  }, [onScrollStart, pauseAutoPlay]);\n\n  const scrollViewGestureOnScrollEnd = React.useCallback(() => {\n    startAutoPlay();\n    _onScrollEnd();\n  }, [_onScrollEnd, startAutoPlay]);\n\n  const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [pauseAutoPlay]);\n\n  const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [startAutoPlay]);\n\n  const layoutStyle = useAnimatedStyle(() => {\n    // const dimension = itemDimensions.value[index.value];\n\n    // if (!dimension) {\n    //   return {};\n    // }\n    return {\n      // height: dimension.height, // For dynamic dimension in the future\n\n      width: width || \"100%\", // [width is deprecated]\n      height: height || \"100%\", // [height is deprecated]\n    };\n  }, [width, height, size, itemDimensions]);\n\n  return (\n    <GestureHandlerRootView style={[styles.layoutContainer, containerStyle]}>\n      <ScrollViewGesture\n        size={size}\n        key={mode}\n        translation={handlerOffset}\n        style={[\n          styles.contentContainer, // [deprecated]\n          layoutStyle,\n          style,\n          vertical ? styles.itemsVertical : styles.itemsHorizontal,\n        ]}\n        testID={testID}\n        onScrollStart={scrollViewGestureOnScrollStart}\n        onScrollEnd={scrollViewGestureOnScrollEnd}\n        onTouchBegin={scrollViewGestureOnTouchBegin}\n        onTouchEnd={scrollViewGestureOnTouchEnd}\n      >\n        <ItemRenderer\n          data={data}\n          dataLength={dataLength}\n          rawDataLength={rawDataLength}\n          loop={loop}\n          size={size}\n          windowSize={windowSize}\n          autoFillData={autoFillData}\n          offsetX={offsetX}\n          handlerOffset={handlerOffset}\n          layoutConfig={layoutConfig}\n          renderItem={renderItem}\n          customAnimation={customAnimation}\n        />\n      </ScrollViewGesture>\n    </GestureHandlerRootView>\n  );\n});\n\nconst styles = StyleSheet.create({\n  layoutContainer: {\n    display: \"flex\",\n  },\n  contentContainer: {\n    overflow: \"hidden\",\n  },\n  itemsHorizontal: {\n    flexDirection: \"row\",\n  },\n  itemsVertical: {\n    flexDirection: \"column\",\n  },\n});\n"]}

package/lib/module/components/ItemLayout.js

@@ -52,7 +52,7 @@ export const ItemLayout = props => {
 
   const x = useOffsetX(offsetXConfig, visibleRanges);
   const animationValue = useDerivedValue(() => x.value / size, [x, size]);
-  const animatedStyle = useAnimatedStyle(() => animationStyle(x.value / size, index), [animationStyle, index]); // TODO: For dynamic dimension in the future
+  const animatedStyle = useAnimatedStyle(() => animationStyle(x.value / size, index), [animationStyle, index, x, size]); // TODO: For dynamic dimension in the future
   // function handleLayout(e: LayoutChangeEvent) {
   //   const { width, height } = e.nativeEvent.layout;
   //   updateItemDimensions(index, { width, height });

package/lib/module/components/ItemLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ItemLayout.tsx"],"names":["React","Animated","useAnimatedStyle","useDerivedValue","useOffsetX","useGlobalState","ItemLayout","props","handlerOffset","index","children","visibleRanges","animationStyle","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","position","pointerEvents"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,eAArC,QAA4D,yBAA5D;AAIA,SAASC,UAAT,QAA2B,qBAA3B;AAGA,SAASC,cAAT,QAA+B,UAA/B;AAIA,OAAO,MAAMC,UAQX,GAAIC,KAAD,IAAW;AACd,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MAAoEL,KAA1E;AAEA,QAAM;AACJA,IAAAA,KAAK,EAAE;AAAEM,MAAAA,IAAF;AAAQC,MAAAA,UAAR;AAAoBC,MAAAA,KAApB;AAA2BC,MAAAA,MAA3B;AAAmCC,MAAAA,QAAnC;AAA6CC,MAAAA,YAA7C;AAA2DC,MAAAA,IAA3D;AAAiEC,MAAAA;AAAjE,KADH,CAEJ;AACA;;AAHI,MAIFf,cAAc,EAJlB;AAMA,QAAMgB,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AAEA,MAAIO,aAAoB,GAAG;AACzBd,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBY,IAAAA,IAHyB;AAIzBP,IAAAA,UAJyB;AAKzBD,IAAAA,IALyB;AAMzB,QAAI,OAAOK,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsD,EAA1D;AANyB,GAA3B;;AASA,MAAIC,IAAI,KAAK,kBAAb,EAAiC;AAC/B,UAAM;AAAEI,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCJ,UAAtC;AAEAE,IAAAA,aAAa,GAAG;AACdd,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdY,MAAAA,IAHc;AAIdP,MAAAA,UAJc;AAKdD,MAAAA,IALc;AAMdY,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAGvB,UAAU,CAACkB,aAAD,EAAgBX,aAAhB,CAApB;AACA,QAAMiB,cAAc,GAAGzB,eAAe,CAAC,MAAMwB,CAAC,CAACE,KAAF,GAAUR,IAAjB,EAAuB,CAACM,CAAD,EAAIN,IAAJ,CAAvB,CAAtC;AACA,QAAMS,aAAa,GAAG5B,gBAAgB,CACpC,MAAMU,cAAc,CAACe,CAAC,CAACE,KAAF,GAAUR,IAAX,EAAiBZ,KAAjB,CADgB,EAEpC,CAACG,cAAD,EAAiBH,KAAjB,CAFoC,CAAtC,CApCc,CAyCd;AACA;AACA;AACA;AACA;;AAEA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEM,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEe,MAAAA,QAAQ,EAAE,UAHZ;AAIEC,MAAAA,aAAa,EAAE;AAJjB,KADK,EAOLF,aAPK,CADT,CAUE;;AACA;AACN;AACA;AACA;AACA;AAfI;AAgBE,IAAA,MAAM,EAAG,mBAAkBrB,KAAM;AAhBnC,KAkBGC,QAAQ,CAAC;AAAEkB,IAAAA;AAAF,GAAD,CAlBX,CADF;AAsBD,CA7EM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\nimport Animated, { useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\n\nimport { TCarouselProps } from \"src/types\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { ILayoutConfig } from \"../layouts/stack\";\nimport { useGlobalState } from \"../store\";\n\nexport type TAnimationStyle = NonNullable<TCarouselProps[\"customAnimation\"]>;\n\nexport const ItemLayout: React.FC<{\n  index: number;\n  handlerOffset: SharedValue<number>;\n  visibleRanges: IVisibleRanges;\n  animationStyle: TAnimationStyle;\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>;\n  }) => React.ReactElement;\n}> = (props) => {\n  const { handlerOffset, index, children, visibleRanges, animationStyle } = props;\n\n  const {\n    props: { loop, dataLength, width, height, vertical, customConfig, mode, modeConfig },\n    // TODO: For dynamic dimension in the future\n    // layout: { updateItemDimensions },\n  } = useGlobalState();\n\n  const size = vertical ? height : width;\n\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<ViewStyle>(\n    () => animationStyle(x.value / size, index),\n    [animationStyle, index]\n  );\n\n  // TODO: For dynamic dimension in the future\n  // function handleLayout(e: LayoutChangeEvent) {\n  //   const { width, height } = e.nativeEvent.layout;\n  //   updateItemDimensions(index, { width, height });\n  // }\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n          pointerEvents: \"box-none\",\n        },\n        animatedStyle,\n      ]}\n      // onLayout={handleLayout}\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}__`}\n    >\n      {children({ animationValue })}\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"sources":["ItemLayout.tsx"],"names":["React","Animated","useAnimatedStyle","useDerivedValue","useOffsetX","useGlobalState","ItemLayout","props","handlerOffset","index","children","visibleRanges","animationStyle","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","position","pointerEvents"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IAAmBC,gBAAnB,EAAqCC,eAArC,QAA4D,yBAA5D;AAIA,SAASC,UAAT,QAA2B,qBAA3B;AAGA,SAASC,cAAT,QAA+B,UAA/B;AAIA,OAAO,MAAMC,UAQX,GAAIC,KAAD,IAAW;AACd,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MAAoEL,KAA1E;AAEA,QAAM;AACJA,IAAAA,KAAK,EAAE;AAAEM,MAAAA,IAAF;AAAQC,MAAAA,UAAR;AAAoBC,MAAAA,KAApB;AAA2BC,MAAAA,MAA3B;AAAmCC,MAAAA,QAAnC;AAA6CC,MAAAA,YAA7C;AAA2DC,MAAAA,IAA3D;AAAiEC,MAAAA;AAAjE,KADH,CAEJ;AACA;;AAHI,MAIFf,cAAc,EAJlB;AAMA,QAAMgB,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AAEA,MAAIO,aAAoB,GAAG;AACzBd,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBY,IAAAA,IAHyB;AAIzBP,IAAAA,UAJyB;AAKzBD,IAAAA,IALyB;AAMzB,QAAI,OAAOK,YAAP,KAAwB,UAAxB,GAAqCA,YAAY,EAAjD,GAAsD,EAA1D;AANyB,GAA3B;;AASA,MAAIC,IAAI,KAAK,kBAAb,EAAiC;AAC/B,UAAM;AAAEI,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCJ,UAAtC;AAEAE,IAAAA,aAAa,GAAG;AACdd,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdY,MAAAA,IAHc;AAIdP,MAAAA,UAJc;AAKdD,MAAAA,IALc;AAMdY,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAGvB,UAAU,CAACkB,aAAD,EAAgBX,aAAhB,CAApB;AACA,QAAMiB,cAAc,GAAGzB,eAAe,CAAC,MAAMwB,CAAC,CAACE,KAAF,GAAUR,IAAjB,EAAuB,CAACM,CAAD,EAAIN,IAAJ,CAAvB,CAAtC;AACA,QAAMS,aAAa,GAAG5B,gBAAgB,CACpC,MAAMU,cAAc,CAACe,CAAC,CAACE,KAAF,GAAUR,IAAX,EAAiBZ,KAAjB,CADgB,EAEpC,CAACG,cAAD,EAAiBH,KAAjB,EAAwBkB,CAAxB,EAA2BN,IAA3B,CAFoC,CAAtC,CApCc,CAyCd;AACA;AACA;AACA;AACA;;AAEA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEN,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEe,MAAAA,QAAQ,EAAE,UAHZ;AAIEC,MAAAA,aAAa,EAAE;AAJjB,KADK,EAOLF,aAPK,CADT,CAUE;;AACA;AACN;AACA;AACA;AACA;AAfI;AAgBE,IAAA,MAAM,EAAG,mBAAkBrB,KAAM;AAhBnC,KAkBGC,QAAQ,CAAC;AAAEkB,IAAAA;AAAF,GAAD,CAlBX,CADF;AAsBD,CA7EM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\nimport Animated, { useAnimatedStyle, useDerivedValue } from \"react-native-reanimated\";\n\nimport { TCarouselProps } from \"src/types\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { ILayoutConfig } from \"../layouts/stack\";\nimport { useGlobalState } from \"../store\";\n\nexport type TAnimationStyle = NonNullable<TCarouselProps[\"customAnimation\"]>;\n\nexport const ItemLayout: React.FC<{\n  index: number;\n  handlerOffset: SharedValue<number>;\n  visibleRanges: IVisibleRanges;\n  animationStyle: TAnimationStyle;\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>;\n  }) => React.ReactElement;\n}> = (props) => {\n  const { handlerOffset, index, children, visibleRanges, animationStyle } = props;\n\n  const {\n    props: { loop, dataLength, width, height, vertical, customConfig, mode, modeConfig },\n    // TODO: For dynamic dimension in the future\n    // layout: { updateItemDimensions },\n  } = useGlobalState();\n\n  const size = vertical ? height : width;\n\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<ViewStyle>(\n    () => animationStyle(x.value / size, index),\n    [animationStyle, index, x, size]\n  );\n\n  // TODO: For dynamic dimension in the future\n  // function handleLayout(e: LayoutChangeEvent) {\n  //   const { width, height } = e.nativeEvent.layout;\n  //   updateItemDimensions(index, { width, height });\n  // }\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n          pointerEvents: \"box-none\",\n        },\n        animatedStyle,\n      ]}\n      // onLayout={handleLayout}\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}__`}\n    >\n      {children({ animationValue })}\n    </Animated.View>\n  );\n};\n"]}

package/lib/module/hooks/useOffsetX.js

@@ -36,7 +36,7 @@ export const useOffsetX = (opts, visibleRanges) => {
     }
 
     return Number.MAX_SAFE_INTEGER;
-  }, [loop, dataLength, viewCount, type, size, visibleRanges]);
+  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);
   return x;
 };
 //# sourceMappingURL=useOffsetX.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useOffsetX.ts"],"names":["Extrapolation","interpolate","useDerivedValue","useOffsetX","opts","visibleRanges","handlerOffset","index","size","loop","dataLength","type","viewCount","_viewCount","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","Math","round","positiveCount","startPos","MAX","MIN","x","negativeRange","positiveRange","value","inputRange","Number","MIN_VALUE","outputRange","CLAMP","MAX_SAFE_INTEGER"],"mappings":"AACA,SAASA,aAAT,EAAwBC,WAAxB,EAAqCC,eAArC,QAA4D,yBAA5D;AAcA,OAAO,MAAMC,UAAU,GAAG,CAACC,IAAD,EAAcC,aAAd,KAAgD;AACxE,QAAM;AACJC,IAAAA,aADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,IAAI,GAAG,UANH;AAOJC,IAAAA,SAAS,EAAEC;AAPP,MAQFT,IARJ;AAUA,QAAMU,WAAW,GAAGJ,UAApB;AACA,QAAMK,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGR,IAAI,GAAGM,WAA3B;AACA,QAAMG,UAAU,GAAG,MAAMT,IAAzB;AAEA,QAAMI,SAAS,GAAGC,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBK,IAAI,CAACC,KAAL,CAAW,CAACL,WAAW,GAAG,CAAf,IAAoB,CAA/B,CAAhC;AACA,QAAMM,aAAa,GAAGT,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCG,YAAY,GAAGH,SAAvE;AAEA,MAAIS,QAAQ,GAAGb,IAAI,GAAGD,KAAtB;AACA,MAAIA,KAAK,GAAGa,aAAZ,EAA2BC,QAAQ,GAAG,CAACd,KAAK,GAAGO,WAAT,IAAwBN,IAAnC;AAE3B,QAAMc,GAAG,GAAGF,aAAa,GAAGZ,IAA5B;AACA,QAAMe,GAAG,GAAG,EAAE,CAACR,YAAY,GAAGK,aAAhB,IAAiCZ,IAAnC,CAAZ;AAEA,QAAMgB,CAAC,GAAGtB,eAAe,CAAC,MAAM;AAC9B,UAAM;AAAEuB,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCrB,aAAa,CAACsB,KAAvD;;AAEA,QACGpB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAAtB,IAA6BlB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAApD,IACClB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAAtB,IAA6BnB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAFtD,EAGE;AACA,UAAIjB,IAAJ,EAAU;AACR,cAAMmB,UAAU,GAAG,CACjB,CAACZ,WADgB,EAEjBO,GAAG,GAAGN,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SAFpB,EAGjBP,GAAG,GAAGN,UAAN,GAAmBI,QAHF,EAIjB,CAJiB,EAKjBC,GAAG,GAAGL,UAAN,GAAmBI,QALF,EAMjBC,GAAG,GAAGL,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SANpB,EAOjBd,WAPiB,CAAnB;AAUA,cAAMe,WAAW,GAAG,CAClBV,QADkB,EAElBC,GAAG,GAAGL,UAAN,GAAmBY,MAAM,CAACC,SAFR,EAGlBP,GAAG,GAAGN,UAHY,EAIlBI,QAJkB,EAKlBC,GAAG,GAAGL,UALY,EAMlBM,GAAG,GAAGN,UAAN,GAAmBY,MAAM,CAACC,SANR,EAOlBT,QAPkB,CAApB;AAUA,eAAOpB,WAAW,CAACK,aAAa,CAACqB,KAAf,EAAsBC,UAAtB,EAAkCG,WAAlC,EAA+C/B,aAAa,CAACgC,KAA7D,CAAlB;AACD;;AAED,aAAO1B,aAAa,CAACqB,KAAd,GAAsBnB,IAAI,GAAGD,KAApC;AACD;;AAED,WAAOsB,MAAM,CAACI,gBAAd;AACD,GAnCwB,EAmCtB,CAACxB,IAAD,EAAOC,UAAP,EAAmBE,SAAnB,EAA8BD,IAA9B,EAAoCH,IAApC,EAA0CH,aAA1C,CAnCsB,CAAzB;AAqCA,SAAOmB,CAAP;AACD,CA/DM","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport { Extrapolation, interpolate, useDerivedValue } from \"react-native-reanimated\";\n\nimport type { IVisibleRanges } from \"./useVisibleRanges\";\n\nexport interface IOpts {\n  index: number;\n  size: number;\n  handlerOffset: Animated.SharedValue<number>;\n  dataLength: number;\n  type?: \"positive\" | \"negative\";\n  viewCount?: number;\n  loop?: boolean;\n}\n\nexport const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {\n  const {\n    handlerOffset,\n    index,\n    size,\n    loop,\n    dataLength,\n    type = \"positive\",\n    viewCount: _viewCount,\n  } = opts;\n\n  const ITEM_LENGTH = dataLength;\n  const VALID_LENGTH = ITEM_LENGTH - 1;\n  const TOTAL_WIDTH = size * ITEM_LENGTH;\n  const HALF_WIDTH = 0.5 * size;\n\n  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);\n  const positiveCount = type === \"positive\" ? viewCount : VALID_LENGTH - viewCount;\n\n  let startPos = size * index;\n  if (index > positiveCount) startPos = (index - ITEM_LENGTH) * size;\n\n  const MAX = positiveCount * size;\n  const MIN = -((VALID_LENGTH - positiveCount) * size);\n\n  const x = useDerivedValue(() => {\n    const { negativeRange, positiveRange } = visibleRanges.value;\n\n    if (\n      (index >= negativeRange[0] && index <= negativeRange[1]) ||\n      (index >= positiveRange[0] && index <= positiveRange[1])\n    ) {\n      if (loop) {\n        const inputRange = [\n          -TOTAL_WIDTH,\n          MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,\n          MIN - HALF_WIDTH - startPos,\n          0,\n          MAX + HALF_WIDTH - startPos,\n          MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,\n          TOTAL_WIDTH,\n        ];\n\n        const outputRange = [\n          startPos,\n          MAX + HALF_WIDTH - Number.MIN_VALUE,\n          MIN - HALF_WIDTH,\n          startPos,\n          MAX + HALF_WIDTH,\n          MIN - HALF_WIDTH + Number.MIN_VALUE,\n          startPos,\n        ];\n\n        return interpolate(handlerOffset.value, inputRange, outputRange, Extrapolation.CLAMP);\n      }\n\n      return handlerOffset.value + size * index;\n    }\n\n    return Number.MAX_SAFE_INTEGER;\n  }, [loop, dataLength, viewCount, type, size, visibleRanges]);\n\n  return x;\n};\n"]}
+{"version":3,"sources":["useOffsetX.ts"],"names":["Extrapolation","interpolate","useDerivedValue","useOffsetX","opts","visibleRanges","handlerOffset","index","size","loop","dataLength","type","viewCount","_viewCount","ITEM_LENGTH","VALID_LENGTH","TOTAL_WIDTH","HALF_WIDTH","Math","round","positiveCount","startPos","MAX","MIN","x","negativeRange","positiveRange","value","inputRange","Number","MIN_VALUE","outputRange","CLAMP","MAX_SAFE_INTEGER"],"mappings":"AACA,SAASA,aAAT,EAAwBC,WAAxB,EAAqCC,eAArC,QAA4D,yBAA5D;AAcA,OAAO,MAAMC,UAAU,GAAG,CAACC,IAAD,EAAcC,aAAd,KAAgD;AACxE,QAAM;AACJC,IAAAA,aADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,IAAI,GAAG,UANH;AAOJC,IAAAA,SAAS,EAAEC;AAPP,MAQFT,IARJ;AAUA,QAAMU,WAAW,GAAGJ,UAApB;AACA,QAAMK,YAAY,GAAGD,WAAW,GAAG,CAAnC;AACA,QAAME,WAAW,GAAGR,IAAI,GAAGM,WAA3B;AACA,QAAMG,UAAU,GAAG,MAAMT,IAAzB;AAEA,QAAMI,SAAS,GAAGC,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBK,IAAI,CAACC,KAAL,CAAW,CAACL,WAAW,GAAG,CAAf,IAAoB,CAA/B,CAAhC;AACA,QAAMM,aAAa,GAAGT,IAAI,KAAK,UAAT,GAAsBC,SAAtB,GAAkCG,YAAY,GAAGH,SAAvE;AAEA,MAAIS,QAAQ,GAAGb,IAAI,GAAGD,KAAtB;AACA,MAAIA,KAAK,GAAGa,aAAZ,EAA2BC,QAAQ,GAAG,CAACd,KAAK,GAAGO,WAAT,IAAwBN,IAAnC;AAE3B,QAAMc,GAAG,GAAGF,aAAa,GAAGZ,IAA5B;AACA,QAAMe,GAAG,GAAG,EAAE,CAACR,YAAY,GAAGK,aAAhB,IAAiCZ,IAAnC,CAAZ;AAEA,QAAMgB,CAAC,GAAGtB,eAAe,CAAC,MAAM;AAC9B,UAAM;AAAEuB,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAmCrB,aAAa,CAACsB,KAAvD;;AAEA,QACGpB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAAtB,IAA6BlB,KAAK,IAAIkB,aAAa,CAAC,CAAD,CAApD,IACClB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAAtB,IAA6BnB,KAAK,IAAImB,aAAa,CAAC,CAAD,CAFtD,EAGE;AACA,UAAIjB,IAAJ,EAAU;AACR,cAAMmB,UAAU,GAAG,CACjB,CAACZ,WADgB,EAEjBO,GAAG,GAAGN,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SAFpB,EAGjBP,GAAG,GAAGN,UAAN,GAAmBI,QAHF,EAIjB,CAJiB,EAKjBC,GAAG,GAAGL,UAAN,GAAmBI,QALF,EAMjBC,GAAG,GAAGL,UAAN,GAAmBI,QAAnB,GAA8BQ,MAAM,CAACC,SANpB,EAOjBd,WAPiB,CAAnB;AAUA,cAAMe,WAAW,GAAG,CAClBV,QADkB,EAElBC,GAAG,GAAGL,UAAN,GAAmBY,MAAM,CAACC,SAFR,EAGlBP,GAAG,GAAGN,UAHY,EAIlBI,QAJkB,EAKlBC,GAAG,GAAGL,UALY,EAMlBM,GAAG,GAAGN,UAAN,GAAmBY,MAAM,CAACC,SANR,EAOlBT,QAPkB,CAApB;AAUA,eAAOpB,WAAW,CAACK,aAAa,CAACqB,KAAf,EAAsBC,UAAtB,EAAkCG,WAAlC,EAA+C/B,aAAa,CAACgC,KAA7D,CAAlB;AACD;;AAED,aAAO1B,aAAa,CAACqB,KAAd,GAAsBnB,IAAI,GAAGD,KAApC;AACD;;AAED,WAAOsB,MAAM,CAACI,gBAAd;AACD,GAnCwB,EAmCtB,CAACxB,IAAD,EAAOC,UAAP,EAAmBE,SAAnB,EAA8BD,IAA9B,EAAoCH,IAApC,EAA0CH,aAA1C,EAAyDC,aAAzD,CAnCsB,CAAzB;AAqCA,SAAOkB,CAAP;AACD,CA/DM","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport { Extrapolation, interpolate, useDerivedValue } from \"react-native-reanimated\";\n\nimport type { IVisibleRanges } from \"./useVisibleRanges\";\n\nexport interface IOpts {\n  index: number;\n  size: number;\n  handlerOffset: Animated.SharedValue<number>;\n  dataLength: number;\n  type?: \"positive\" | \"negative\";\n  viewCount?: number;\n  loop?: boolean;\n}\n\nexport const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {\n  const {\n    handlerOffset,\n    index,\n    size,\n    loop,\n    dataLength,\n    type = \"positive\",\n    viewCount: _viewCount,\n  } = opts;\n\n  const ITEM_LENGTH = dataLength;\n  const VALID_LENGTH = ITEM_LENGTH - 1;\n  const TOTAL_WIDTH = size * ITEM_LENGTH;\n  const HALF_WIDTH = 0.5 * size;\n\n  const viewCount = _viewCount ?? Math.round((ITEM_LENGTH - 1) / 2);\n  const positiveCount = type === \"positive\" ? viewCount : VALID_LENGTH - viewCount;\n\n  let startPos = size * index;\n  if (index > positiveCount) startPos = (index - ITEM_LENGTH) * size;\n\n  const MAX = positiveCount * size;\n  const MIN = -((VALID_LENGTH - positiveCount) * size);\n\n  const x = useDerivedValue(() => {\n    const { negativeRange, positiveRange } = visibleRanges.value;\n\n    if (\n      (index >= negativeRange[0] && index <= negativeRange[1]) ||\n      (index >= positiveRange[0] && index <= positiveRange[1])\n    ) {\n      if (loop) {\n        const inputRange = [\n          -TOTAL_WIDTH,\n          MIN - HALF_WIDTH - startPos - Number.MIN_VALUE,\n          MIN - HALF_WIDTH - startPos,\n          0,\n          MAX + HALF_WIDTH - startPos,\n          MAX + HALF_WIDTH - startPos + Number.MIN_VALUE,\n          TOTAL_WIDTH,\n        ];\n\n        const outputRange = [\n          startPos,\n          MAX + HALF_WIDTH - Number.MIN_VALUE,\n          MIN - HALF_WIDTH,\n          startPos,\n          MAX + HALF_WIDTH,\n          MIN - HALF_WIDTH + Number.MIN_VALUE,\n          startPos,\n        ];\n\n        return interpolate(handlerOffset.value, inputRange, outputRange, Extrapolation.CLAMP);\n      }\n\n      return handlerOffset.value + size * index;\n    }\n\n    return Number.MAX_SAFE_INTEGER;\n  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);\n\n  return x;\n};\n"]}

package/lib/module/layouts/stack.js

@@ -16,7 +16,6 @@ export function horizontalStackLayout() {
       opacityInterval = 0.1,
       rotateZDeg = 30
     } = modeConfig;
-    const transform = [];
     const {
       validLength,
       value,
@@ -35,11 +34,6 @@ export function horizontalStackLayout() {
       opacityInterval,
       snapDirection
     });
-    const styles = {
-      transform,
-      zIndex,
-      opacity
-    };
     let translateX;
     let scale;
     let rotateZ;
@@ -54,13 +48,18 @@ export function horizontalStackLayout() {
       rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;
     }
 
-    transform.push({
+    const transform = [{
       translateX: translateX
     }, {
       scale: scale
     }, {
       rotateZ: rotateZ
-    });
+    }];
+    const styles = {
+      transform,
+      zIndex,
+      opacity
+    };
     return styles;
   };
 }
@@ -91,7 +90,6 @@ export function verticalStackLayout() {
       opacityInterval = 0.1,
       rotateZDeg = 30
     } = modeConfig;
-    const transform = [];
     const {
       validLength,
       value,
@@ -110,11 +108,6 @@ export function verticalStackLayout() {
       opacityInterval,
       snapDirection
     });
-    const styles = {
-      transform,
-      zIndex,
-      opacity
-    };
     let translateX;
     let scale;
     let rotateZ;
@@ -132,7 +125,7 @@ export function verticalStackLayout() {
       translateY = interpolate(value, inputRange, [validLength * stackInterval, 0, 0], Extrapolation.CLAMP);
     }
 
-    transform.push({
+    const transform = [{
       translateX: translateX
     }, {
       scale: scale
@@ -140,7 +133,12 @@ export function verticalStackLayout() {
       rotateZ: rotateZ
     }, {
       translateY: translateY
-    });
+    }];
+    const styles = {
+      transform,
+      zIndex,
+      opacity
+    };
     return styles;
   };
 }
@@ -194,7 +192,7 @@ function getCommonStyles(opts) {
   }
 
   return {
-    zIndex,
+    zIndex: Math.round(zIndex),
     opacity
   };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["stack.ts"],"names":["useMemo","Dimensions","Extrapolation","interpolate","screen","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","transform","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","styles","translateX","scale","rotateZ","CLAMP","push","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","page","Math","floor","abs","diff","Error","Number","MIN_VALUE"],"mappings":"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","sourcesContent":["import { useMemo } from \"react\";\nimport type { TransformsStyle, ViewStyle } from \"react-native\";\nimport { Dimensions } from \"react-native\";\nimport { Extrapolation, interpolate } from \"react-native-reanimated\";\n\nimport type { CustomConfig, IComputedDirectionTypes } from \"../types\";\n\nconst screen = Dimensions.get(\"window\");\n\nexport interface ILayoutConfig {\n  showLength?: number;\n  moveSize?: number;\n  stackInterval?: number;\n  scaleInterval?: number;\n  opacityInterval?: number;\n  rotateZDeg?: number;\n  snapDirection?: \"left\" | \"right\";\n}\n\nexport type TStackModeProps = IComputedDirectionTypes<{\n  /**\n   * Carousel Animated transitions.\n   */\n  mode?: \"horizontal-stack\" | \"vertical-stack\";\n  /**\n   * Stack animation style.\n   * @default\n   *     snapDirection: 'right',\n   *     moveSize: window.width,\n   *     stackInterval: 30,\n   *     scaleInterval: 0.08,\n   *     rotateZDeg: 135,\n   *     opacityInterval: 0.1,\n   */\n  modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n\n    const transform: TransformsStyle[\"transform\"] = [];\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-moveSize, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-validLength * stackInterval, 0, moveSize],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n    }\n\n    transform.push(\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      }\n    );\n\n    return styles;\n  };\n}\n\nexport function useHorizontalStackLayout(\n  customAnimationConfig: ILayoutConfig = {},\n  customConfig: CustomConfig = {}\n) {\n  const config = useMemo(\n    () => ({\n      type: customAnimationConfig.snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: customAnimationConfig.showLength,\n      ...customConfig,\n    }),\n    [customAnimationConfig, customConfig]\n  );\n\n  return {\n    layout: horizontalStackLayout(customAnimationConfig),\n    config,\n  };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n    const transform: TransformsStyle[\"transform\"] = [];\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n    let translateY: number;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(value, inputRange, [-moveSize, 0, 0], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [0, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(value, inputRange, [0, 0, moveSize], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [validLength * stackInterval, 0, 0],\n        Extrapolation.CLAMP\n      );\n    }\n\n    transform.push(\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      },\n      {\n        translateY: translateY!,\n      }\n    );\n\n    return styles;\n  };\n}\n\nfunction getCommonVariables(opts: {\n  value: number;\n  showLength: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { showLength, value: _value, snapDirection } = opts;\n  function easeInOutCubic(v: number): number {\n    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;\n  }\n  const page = Math.floor(Math.abs(_value));\n  const diff = Math.abs(_value) % 1;\n  const value = _value < 0 ? -(page + easeInOutCubic(diff)) : page + easeInOutCubic(diff);\n  const validLength = showLength! - 1;\n\n  let inputRange: [number, number, number];\n\n  if (snapDirection === \"left\") inputRange = [-1, 0, validLength];\n  else if (snapDirection === \"right\") inputRange = [-validLength, 0, 1];\n  else throw new Error(\"snapDirection must be set to either left or right\");\n\n  return {\n    inputRange,\n    validLength,\n    value,\n  };\n}\n\nfunction getCommonStyles(opts: {\n  value: number;\n  validLength: number;\n  opacityInterval: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { snapDirection, validLength, value, opacityInterval } = opts;\n\n  let zIndex: number;\n  let opacity: number;\n\n  if (snapDirection === \"left\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n          [Number.MIN_VALUE, validLength, validLength, validLength - 1, -1]\n        ) * 10000\n      ) / 100;\n\n    opacity = interpolate(\n      value,\n      [-1, 0, validLength - 1, validLength],\n      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n    );\n  } else if (snapDirection === \"right\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n          [1, validLength - 1, validLength, validLength, Number.MIN_VALUE]\n        ) * 10000\n      ) / 100;\n    opacity = interpolate(\n      value,\n      [-validLength, 1 - validLength, 0, 1],\n      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n    );\n  } else {\n    throw new Error(\"snapDirection must be set to either left or right\");\n  }\n\n  return {\n    zIndex,\n    opacity,\n  };\n}\n"]}
+{"version":3,"sources":["stack.ts"],"names":["useMemo","Dimensions","Extrapolation","interpolate","screen","get","horizontalStackLayout","modeConfig","_value","showLength","snapDirection","moveSize","width","stackInterval","scaleInterval","opacityInterval","rotateZDeg","validLength","value","inputRange","getCommonVariables","zIndex","opacity","getCommonStyles","translateX","scale","rotateZ","CLAMP","transform","styles","useHorizontalStackLayout","customAnimationConfig","customConfig","config","type","viewCount","layout","verticalStackLayout","translateY","opts","easeInOutCubic","v","page","Math","floor","abs","diff","Error","Number","MIN_VALUE","round"],"mappings":"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","sourcesContent":["import { useMemo } from \"react\";\nimport type { TransformsStyle, ViewStyle } from \"react-native\";\nimport { Dimensions } from \"react-native\";\nimport { Extrapolation, interpolate } from \"react-native-reanimated\";\n\nimport type { CustomConfig, IComputedDirectionTypes } from \"../types\";\n\nconst screen = Dimensions.get(\"window\");\n\nexport interface ILayoutConfig {\n  showLength?: number;\n  moveSize?: number;\n  stackInterval?: number;\n  scaleInterval?: number;\n  opacityInterval?: number;\n  rotateZDeg?: number;\n  snapDirection?: \"left\" | \"right\";\n}\n\nexport type TStackModeProps = IComputedDirectionTypes<{\n  /**\n   * Carousel Animated transitions.\n   */\n  mode?: \"horizontal-stack\" | \"vertical-stack\";\n  /**\n   * Stack animation style.\n   * @default\n   *     snapDirection: 'right',\n   *     moveSize: window.width,\n   *     stackInterval: 30,\n   *     scaleInterval: 0.08,\n   *     rotateZDeg: 135,\n   *     opacityInterval: 0.1,\n   */\n  modeConfig?: ILayoutConfig;\n}>;\n\nexport function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-moveSize, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(\n        value,\n        inputRange,\n        [-validLength * stackInterval, 0, moveSize],\n        Extrapolation.CLAMP\n      );\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n    }\n\n    const transform: TransformsStyle[\"transform\"] = [\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      },\n    ];\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    return styles;\n  };\n}\n\nexport function useHorizontalStackLayout(\n  customAnimationConfig: ILayoutConfig = {},\n  customConfig: CustomConfig = {}\n) {\n  const config = useMemo(\n    () => ({\n      type: customAnimationConfig.snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: customAnimationConfig.showLength,\n      ...customConfig,\n    }),\n    [customAnimationConfig, customConfig]\n  );\n\n  return {\n    layout: horizontalStackLayout(customAnimationConfig),\n    config,\n  };\n}\n\nexport function verticalStackLayout(modeConfig: ILayoutConfig = {}) {\n  return (_value: number) => {\n    \"worklet\";\n\n    const {\n      showLength,\n      snapDirection = \"left\",\n      moveSize = screen.width,\n      stackInterval = 18,\n      scaleInterval = 0.04,\n      opacityInterval = 0.1,\n      rotateZDeg = 30,\n    } = modeConfig;\n\n    const { validLength, value, inputRange } = getCommonVariables({\n      showLength: showLength!,\n      value: _value,\n      snapDirection,\n    });\n    const { zIndex, opacity } = getCommonStyles({\n      validLength,\n      value,\n      opacityInterval,\n      snapDirection,\n    });\n\n    let translateX: number;\n    let scale: number;\n    let rotateZ: string;\n    let translateY: number;\n\n    if (snapDirection === \"left\") {\n      translateX = interpolate(value, inputRange, [-moveSize, 0, 0], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1, 1, 1 - validLength * scaleInterval],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [0, 0, validLength * stackInterval],\n        Extrapolation.CLAMP\n      );\n    } else if (snapDirection === \"right\") {\n      translateX = interpolate(value, inputRange, [0, 0, moveSize], Extrapolation.CLAMP);\n      scale = interpolate(\n        value,\n        inputRange,\n        [1 - validLength * scaleInterval, 1, 1],\n        Extrapolation.CLAMP\n      );\n      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;\n      translateY = interpolate(\n        value,\n        inputRange,\n        [validLength * stackInterval, 0, 0],\n        Extrapolation.CLAMP\n      );\n    }\n\n    const transform: TransformsStyle[\"transform\"] = [\n      {\n        translateX: translateX!,\n      },\n      {\n        scale: scale!,\n      },\n      {\n        rotateZ: rotateZ!,\n      },\n      {\n        translateY: translateY!,\n      },\n    ];\n\n    const styles: ViewStyle = {\n      transform,\n      zIndex,\n      opacity,\n    };\n\n    return styles;\n  };\n}\n\nfunction getCommonVariables(opts: {\n  value: number;\n  showLength: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { showLength, value: _value, snapDirection } = opts;\n  function easeInOutCubic(v: number): number {\n    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;\n  }\n  const page = Math.floor(Math.abs(_value));\n  const diff = Math.abs(_value) % 1;\n  const value = _value < 0 ? -(page + easeInOutCubic(diff)) : page + easeInOutCubic(diff);\n  const validLength = showLength! - 1;\n\n  let inputRange: [number, number, number];\n\n  if (snapDirection === \"left\") inputRange = [-1, 0, validLength];\n  else if (snapDirection === \"right\") inputRange = [-validLength, 0, 1];\n  else throw new Error(\"snapDirection must be set to either left or right\");\n\n  return {\n    inputRange,\n    validLength,\n    value,\n  };\n}\n\nfunction getCommonStyles(opts: {\n  value: number;\n  validLength: number;\n  opacityInterval: number;\n  snapDirection: \"left\" | \"right\";\n}) {\n  \"worklet\";\n\n  const { snapDirection, validLength, value, opacityInterval } = opts;\n\n  let zIndex: number;\n  let opacity: number;\n\n  if (snapDirection === \"left\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],\n          [Number.MIN_VALUE, validLength, validLength, validLength - 1, -1]\n        ) * 10000\n      ) / 100;\n\n    opacity = interpolate(\n      value,\n      [-1, 0, validLength - 1, validLength],\n      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]\n    );\n  } else if (snapDirection === \"right\") {\n    zIndex =\n      Math.floor(\n        interpolate(\n          value,\n          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],\n          [1, validLength - 1, validLength, validLength, Number.MIN_VALUE]\n        ) * 10000\n      ) / 100;\n    opacity = interpolate(\n      value,\n      [-validLength, 1 - validLength, 0, 1],\n      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]\n    );\n  } else {\n    throw new Error(\"snapDirection must be set to either left or right\");\n  }\n\n  return {\n    zIndex: Math.round(zIndex),\n    opacity,\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reanimated-carousel",
-  "version": "4.0.0-canary.22",
+  "version": "4.0.0",
   "packageManager": "yarn@4.0.2",
   "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
   "author": "Doho <zhaodonghao586@outlook.com> (https://github.com/dohooo)",

package/src/components/CarouselLayout.tsx

@@ -62,7 +62,7 @@ export const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref)
     if (!loop) return handlerOffset.value;
 
     return Number.isNaN(x) ? 0 : x;
-  }, [loop, size, dataLength]);
+  }, [loop, size, dataLength, handlerOffset]);
 
   useOnProgressChange({
     autoFillData,

package/src/components/ItemLayout.tsx

@@ -58,7 +58,7 @@ export const ItemLayout: React.FC<{
   const animationValue = useDerivedValue(() => x.value / size, [x, size]);
   const animatedStyle = useAnimatedStyle<ViewStyle>(
     () => animationStyle(x.value / size, index),
-    [animationStyle, index]
+    [animationStyle, index, x, size]
   );
 
   // TODO: For dynamic dimension in the future

package/src/hooks/useOffsetX.ts

@@ -73,7 +73,7 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => {
     }
 
     return Number.MAX_SAFE_INTEGER;
-  }, [loop, dataLength, viewCount, type, size, visibleRanges]);
+  }, [loop, dataLength, viewCount, type, size, visibleRanges, handlerOffset]);
 
   return x;
 };

package/src/layouts/stack.ts

@@ -49,7 +49,6 @@ export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
       rotateZDeg = 30,
     } = modeConfig;
 
-    const transform: TransformsStyle["transform"] = [];
     const { validLength, value, inputRange } = getCommonVariables({
       showLength: showLength!,
       value: _value,
@@ -62,12 +61,6 @@ export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
       snapDirection,
     });
 
-    const styles: ViewStyle = {
-      transform,
-      zIndex,
-      opacity,
-    };
-
     let translateX: number;
     let scale: number;
     let rotateZ: string;
@@ -102,7 +95,7 @@ export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
       rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;
     }
 
-    transform.push(
+    const transform: TransformsStyle["transform"] = [
       {
         translateX: translateX!,
       },
@@ -111,8 +104,14 @@ export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
       },
       {
         rotateZ: rotateZ!,
-      }
-    );
+      },
+    ];
+
+    const styles: ViewStyle = {
+      transform,
+      zIndex,
+      opacity,
+    };
 
     return styles;
   };
@@ -150,7 +149,7 @@ export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
       opacityInterval = 0.1,
       rotateZDeg = 30,
     } = modeConfig;
-    const transform: TransformsStyle["transform"] = [];
+
     const { validLength, value, inputRange } = getCommonVariables({
       showLength: showLength!,
       value: _value,
@@ -163,12 +162,6 @@ export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
       snapDirection,
     });
 
-    const styles: ViewStyle = {
-      transform,
-      zIndex,
-      opacity,
-    };
-
     let translateX: number;
     let scale: number;
     let rotateZ: string;
@@ -206,7 +199,7 @@ export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
       );
     }
 
-    transform.push(
+    const transform: TransformsStyle["transform"] = [
       {
         translateX: translateX!,
       },
@@ -218,8 +211,14 @@ export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
       },
       {
         translateY: translateY!,
-      }
-    );
+      },
+    ];
+
+    const styles: ViewStyle = {
+      transform,
+      zIndex,
+      opacity,
+    };
 
     return styles;
   };
@@ -301,7 +300,7 @@ function getCommonStyles(opts: {
   }
 
   return {
-    zIndex,
+    zIndex: Math.round(zIndex),
     opacity,
   };
 }