react-native-reanimated-carousel 4.0.0-alpha.5 → 4.0.0-alpha.6

package/src/hooks/useVisibleRanges.test.tsx

@@ -0,0 +1,179 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useVisibleRanges } from "./useVisibleRanges";
+
+const viewSize = 393;
+
+describe("useVisibleRanges", () => {
+  it("should only display the front of the list when loop is false", async () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(-0);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    });
+
+    const expected = hook.result.current.value;
+
+    expect(expected).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -3,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `);
+  });
+
+  it("should display the rear of the list and the front of the list when loop is true", async () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(-0);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: true,
+      });
+
+      return range;
+    });
+
+    const expected = hook.result.current.value;
+
+    expect(expected).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                8,
+                9,
+              ],
+              "positiveRange": [
+                0,
+                2,
+              ],
+            }
+        `);
+  });
+
+  it("should shows the increased range of the list when the loop is false and swiped the carousel.", async () => {
+    const slide0hook = renderHook(() => {
+      const translation = useSharedValue(-0 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    const slide1hook = renderHook(() => {
+      const translation = useSharedValue(-1 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    const slide2hook = renderHook(() => {
+      const translation = useSharedValue(-2 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    const slide3hook = renderHook(() => {
+      const translation = useSharedValue(-3 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+
+      return range;
+    }).result.current.value;
+
+    // [0,3] Display the 0,1,2,3 items.
+    expect(slide0hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -3,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `);
+
+    // [1,4] Display the 1,2,3,4 items.
+    expect(slide1hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -2,
+                1,
+              ],
+              "positiveRange": [
+                1,
+                4,
+              ],
+            }
+        `);
+
+    // [2,5] Display the 2,3,4,5 items.
+    expect(slide2hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -1,
+                2,
+              ],
+              "positiveRange": [
+                2,
+                5,
+              ],
+            }
+        `);
+
+    // [3.6] Display the 3,4,5,6 items.
+    expect(slide3hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                0,
+                3,
+              ],
+              "positiveRange": [
+                3,
+                6,
+              ],
+            }
+        `);
+  });
+});

package/src/hooks/useVisibleRanges.tsx

@@ -11,12 +11,14 @@ export function useVisibleRanges(options: {
   viewSize: number
   windowSize?: number
   translation: Animated.SharedValue<number>
+  loop?: boolean
 }): IVisibleRanges {
   const {
     total = 0,
     viewSize,
     translation,
     windowSize: _windowSize = 0,
+    loop,
   } = options;
 
   const windowSize = total <= _windowSize ? total : _windowSize;
@@ -24,16 +26,29 @@ export function useVisibleRanges(options: {
   const ranges = useDerivedValue(() => {
     const positiveCount = Math.round(windowSize / 2);
     const negativeCount = windowSize - positiveCount;
-    let curIndex = Math.round(-translation.value / viewSize);
-    curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex;
+
+    let currentIndex = Math.round(-translation.value / viewSize);
+    currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
+
+    if (!loop) {
+      // Adjusting negative range if the carousel is not loopable.
+      // So, It will be only displayed the positive items.
+      return {
+        negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],
+        positiveRange: [0 + currentIndex, windowSize - 1 + currentIndex],
+      };
+    }
+
     const negativeRange = [
-      (curIndex - negativeCount + total) % total,
-      (curIndex - 1 + total) % total,
+      (currentIndex - negativeCount + total) % total,
+      (currentIndex - 1 + total) % total,
     ];
+
     const positiveRange = [
-      (curIndex + total) % total,
-      (curIndex + positiveCount + total) % total,
+      (currentIndex + total) % total,
+      (currentIndex + positiveCount + total) % total,
     ];
+
     if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
       negativeRange[1] = total - 1;
       positiveRange[0] = 0;
@@ -42,8 +57,9 @@ export function useVisibleRanges(options: {
       negativeRange[1] = total - 1;
       positiveRange[0] = 0;
     }
+
     return { negativeRange, positiveRange };
-  }, [total, windowSize, translation]);
+  }, [loop, total, windowSize, translation]);
 
   return ranges;
 }

package/src/types.ts

@@ -157,6 +157,11 @@ export type TCarouselProps<T = any> = {
      * props.vertical = false => maxScrollDistancePerSwipeX
      * */
   maxScrollDistancePerSwipe?: number
+  /**
+     * @experimental This API will be changed in the future.
+     * If positive, the carousel will scroll to the positive direction and vice versa.
+     * */
+  fixedDirection?: "positive" | "negative"
   /**
       * Custom carousel config.
       */

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

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

package/lib/commonjs/layouts/ParallaxLayout.js

@@ -1,84 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ParallaxLayout = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
-var _LazyView = require("../components/LazyView");
-
-var _useOffsetX = require("../hooks/useOffsetX");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ParallaxLayout = props => {
-  const {
-    handlerOffset,
-    parallaxScrollingOffset = 100,
-    parallaxScrollingScale = 0.8,
-    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
-    index,
-    width,
-    height,
-    loop,
-    dataLength,
-    children,
-    visibleRanges,
-    vertical
-  } = props;
-
-  const [shouldUpdate, setShouldUpdate] = _react.default.useState(false);
-
-  const size = props.vertical ? props.height : props.width;
-  const x = (0, _useOffsetX.useOffsetX)({
-    handlerOffset,
-    index,
-    size,
-    dataLength,
-    loop
-  }, visibleRanges);
-  const offsetXStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const value = x.value / size;
-    const translate = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], _reactNativeReanimated.Extrapolate.EXTEND);
-    const zIndex = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [0, size, 0], _reactNativeReanimated.Extrapolate.CLAMP);
-    const scale = (0, _reactNativeReanimated.interpolate)(value, [-1, 0, 1], [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale], _reactNativeReanimated.Extrapolate.CLAMP);
-    return {
-      transform: [vertical ? {
-        translateY: translate
-      } : {
-        translateX: translate
-      }, {
-        scale
-      }],
-      zIndex
-    };
-  }, [loop, vertical, parallaxScrollingOffset]);
-
-  const updateView = _react.default.useCallback((negativeRange, positiveRange) => {
-    setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
-  }, [index]);
-
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => visibleRanges.value, () => {
-    (0, _reactNativeReanimated.runOnJS)(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
-  }, [visibleRanges.value]);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [{
-      width: width || "100%",
-      height: height || "100%",
-      position: "absolute"
-    }, offsetXStyle]
-  }, /*#__PURE__*/_react.default.createElement(_LazyView.LazyView, {
-    shouldUpdate: shouldUpdate
-  }, children));
-};
-
-exports.ParallaxLayout = ParallaxLayout;
-//# sourceMappingURL=ParallaxLayout.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["ParallaxLayout","props","handlerOffset","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","index","width","height","loop","dataLength","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","React","useState","size","x","offsetXStyle","value","translate","Extrapolate","EXTEND","zIndex","CLAMP","scale","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./parallax\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { IComputedDirectionTypes } from \"../types\";\n\nexport const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<\n{\n  loop?: boolean\n  handlerOffset: Animated.SharedValue<number>\n  index: number\n  dataLength: number\n  visibleRanges: IVisibleRanges\n} & ILayoutConfig\n>>> = (props) => {\n  const {\n    handlerOffset,\n    parallaxScrollingOffset = 100,\n    parallaxScrollingScale = 0.8,\n    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,\n    index,\n    width,\n    height,\n    loop,\n    dataLength,\n    children,\n    visibleRanges,\n    vertical,\n  } = props;\n\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n  const size = props.vertical ? props.height : props.width;\n\n  const x = useOffsetX(\n    {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n    },\n    visibleRanges,\n  );\n\n  const offsetXStyle = useAnimatedStyle(() => {\n    const value = x.value / size;\n\n    const translate = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        -size + parallaxScrollingOffset,\n        0,\n        size - parallaxScrollingOffset,\n      ],\n      Extrapolate.EXTEND,\n    );\n\n    const zIndex = interpolate(\n      value,\n      [-1, 0, 1],\n      [0, size, 0],\n      Extrapolate.CLAMP,\n    );\n\n    const scale = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        parallaxAdjacentItemScale,\n        parallaxScrollingScale,\n        parallaxAdjacentItemScale,\n      ],\n      Extrapolate.CLAMP,\n    );\n\n    return {\n      transform: [\n        vertical\n          ? {\n            translateY: translate,\n          }\n          : {\n            translateX: translate,\n          },\n        {\n          scale,\n        },\n      ],\n      zIndex,\n    };\n  }, [loop, vertical, parallaxScrollingOffset]);\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      setShouldUpdate(\n        (index >= negativeRange[0] && index <= negativeRange[1])\n                    || (index >= positiveRange[0] && index <= positiveRange[1]),\n      );\n    },\n    [index],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        offsetXStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n    </Animated.View>\n  );\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["BaseLayout.tsx"],"names":["React","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","LazyView","useCheckMounted","useOffsetX","CTX","BaseLayout","props","mounted","handlerOffset","index","children","visibleRanges","animationStyle","context","useContext","loop","dataLength","width","height","vertical","customConfig","mode","modeConfig","size","shouldUpdate","setShouldUpdate","useState","offsetXConfig","snapDirection","showLength","type","viewCount","x","animationValue","value","animatedStyle","updateView","useCallback","negativeRange","positiveRange","current","position"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,QAAP,IACEC,OADF,EAEEC,mBAFF,EAGEC,gBAHF,EAIEC,eAJF,QAKO,yBALP;AASA,SAASC,QAAT,QAAyB,wBAAzB;AACA,SAASC,eAAT,QAAgC,0BAAhC;AAEA,SAASC,UAAT,QAA2B,qBAA3B;AAEA,SAASC,GAAT,QAAoB,UAApB;AAIA,OAAO,MAAMC,UAQX,GAAIC,KAAD,IAAW;AACd,QAAMC,OAAO,GAAGL,eAAe,EAA/B;AACA,QAAM;AAAEM,IAAAA,aAAF;AAAiBC,IAAAA,KAAjB;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,aAAlC;AAAiDC,IAAAA;AAAjD,MACJN,KADF;AAGA,QAAMO,OAAO,GAAGlB,KAAK,CAACmB,UAAN,CAAiBV,GAAjB,CAAhB;AACA,QAAM;AACJE,IAAAA,KAAK,EAAE;AACLS,MAAAA,IADK;AAELC,MAAAA,UAFK;AAGLC,MAAAA,KAHK;AAILC,MAAAA,MAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,YANK;AAOLC,MAAAA,IAPK;AAQLC,MAAAA;AARK;AADH,MAWFT,OAXJ;AAYA,QAAMU,IAAI,GAAGJ,QAAQ,GAAGD,MAAH,GAAYD,KAAjC;AACA,QAAM,CAACO,YAAD,EAAeC,eAAf,IAAkC9B,KAAK,CAAC+B,QAAN,CAAe,KAAf,CAAxC;AACA,MAAIC,aAAoB,GAAG;AACzBnB,IAAAA,aADyB;AAEzBC,IAAAA,KAFyB;AAGzBc,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;AAAEO,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,QAAgCP,UAAtC;AAEAK,IAAAA,aAAa,GAAG;AACdnB,MAAAA,aADc;AAEdC,MAAAA,KAFc;AAGdc,MAAAA,IAHc;AAIdP,MAAAA,UAJc;AAKdD,MAAAA,IALc;AAMde,MAAAA,IAAI,EAAEF,aAAa,KAAK,OAAlB,GAA4B,UAA5B,GAAyC,UANjC;AAOdG,MAAAA,SAAS,EAAEF;AAPG,KAAhB;AASD;;AAED,QAAMG,CAAC,GAAG7B,UAAU,CAACwB,aAAD,EAAgBhB,aAAhB,CAApB;AACA,QAAMsB,cAAc,GAAGjC,eAAe,CAAC,MAAMgC,CAAC,CAACE,KAAF,GAAUX,IAAjB,EAAuB,CAACS,CAAD,EAAIT,IAAJ,CAAvB,CAAtC;AACA,QAAMY,aAAa,GAAGpC,gBAAgB,CACpC,MAAMa,cAAc,CAACoB,CAAC,CAACE,KAAF,GAAUX,IAAX,CADgB,EAEpC,CAACX,cAAD,CAFoC,CAAtC;AAKA,QAAMwB,UAAU,GAAGzC,KAAK,CAAC0C,WAAN,CACjB,CAACC,aAAD,EAA0BC,aAA1B,KAAsD;AACpDhC,IAAAA,OAAO,CAACiC,OAAR,IACaf,eAAe,CACfhB,KAAK,IAAI6B,aAAa,CAAC,CAAD,CAAtB,IAA6B7B,KAAK,IAAI6B,aAAa,CAAC,CAAD,CAApD,IACU7B,KAAK,IAAI8B,aAAa,CAAC,CAAD,CAAtB,IAA6B9B,KAAK,IAAI8B,aAAa,CAAC,CAAD,CAF7C,CAD5B;AAKD,GAPgB,EAQjB,CAAC9B,KAAD,EAAQF,OAAR,CARiB,CAAnB;AAWAT,EAAAA,mBAAmB,CACjB,MAAMa,aAAa,CAACuB,KADH,EAEjB,MAAM;AACJrC,IAAAA,OAAO,CAACuC,UAAD,CAAP,CACEzB,aAAa,CAACuB,KAAd,CAAoBI,aADtB,EAEE3B,aAAa,CAACuB,KAAd,CAAoBK,aAFtB;AAID,GAPgB,EAQjB,CAAC5B,aAAa,CAACuB,KAAf,CARiB,CAAnB;AAWA,sBACE,oBAAC,QAAD,CAAU,IAAV;AACE,IAAA,KAAK,EAAE,CACL;AACEjB,MAAAA,KAAK,EAAEA,KAAK,IAAI,MADlB;AAEEC,MAAAA,MAAM,EAAEA,MAAM,IAAI,MAFpB;AAGEuB,MAAAA,QAAQ,EAAE;AAHZ,KADK,EAMLN,aANK;AAQP;AACN;AACA;AACA;AACA;AAbI;AAcE,IAAA,MAAM,EAAG,mBAAkB1B,KAAM,IAAGe,YAAY,GAAG,OAAH,GAAa,WAAY;AAd3E,kBAgBE,oBAAC,QAAD;AAAU,IAAA,YAAY,EAAEA;AAAxB,KACGd,QAAQ,CAAC;AAAEuB,IAAAA;AAAF,GAAD,CADX,CAhBF,CADF;AAsBD,CAtGM","sourcesContent":["import React from \"react\";\nimport type { ViewStyle } from \"react-native\";\nimport type { AnimatedStyleProp } from \"react-native-reanimated\";\nimport Animated, {\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./stack\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useCheckMounted } from \"../hooks/useCheckMounted\";\nimport type { IOpts } from \"../hooks/useOffsetX\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport { CTX } from \"../store\";\n\nexport type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;\n\nexport const BaseLayout: React.FC<{\n  index: number\n  handlerOffset: Animated.SharedValue<number>\n  visibleRanges: IVisibleRanges\n  animationStyle: TAnimationStyle\n  children: (ctx: {\n    animationValue: Animated.SharedValue<number>\n  }) => React.ReactElement\n}> = (props) => {\n  const mounted = useCheckMounted();\n  const { handlerOffset, index, children, visibleRanges, animationStyle }\n  = props;\n\n  const context = React.useContext(CTX);\n  const {\n    props: {\n      loop,\n      dataLength,\n      width,\n      height,\n      vertical,\n      customConfig,\n      mode,\n      modeConfig,\n    },\n  } = context;\n  const size = vertical ? height : width;\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n  let offsetXConfig: IOpts = {\n    handlerOffset,\n    index,\n    size,\n    dataLength,\n    loop,\n    ...(typeof customConfig === \"function\" ? customConfig() : {}),\n  };\n\n  if (mode === \"horizontal-stack\") {\n    const { snapDirection, showLength } = modeConfig as ILayoutConfig;\n\n    offsetXConfig = {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n      type: snapDirection === \"right\" ? \"negative\" : \"positive\",\n      viewCount: showLength,\n    };\n  }\n\n  const x = useOffsetX(offsetXConfig, visibleRanges);\n  const animationValue = useDerivedValue(() => x.value / size, [x, size]);\n  const animatedStyle = useAnimatedStyle(\n    () => animationStyle(x.value / size),\n    [animationStyle],\n  );\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      mounted.current\n                && setShouldUpdate(\n                  (index >= negativeRange[0] && index <= negativeRange[1])\n                        || (index >= positiveRange[0] && index <= positiveRange[1]),\n                );\n    },\n    [index, mounted],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        animatedStyle,\n      ]}\n      /**\n       * We use this testID to know when the carousel item is ready to be tested in test.\n       * e.g.\n       *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.\n       * */\n      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? \"READY\" : \"NOT_READY\"}__`}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>\n        {children({ animationValue })}\n      </LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/module/layouts/ParallaxLayout.js

@@ -1,61 +0,0 @@
-import React from "react";
-import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle } from "react-native-reanimated";
-import { LazyView } from "../components/LazyView";
-import { useOffsetX } from "../hooks/useOffsetX";
-export const ParallaxLayout = props => {
-  const {
-    handlerOffset,
-    parallaxScrollingOffset = 100,
-    parallaxScrollingScale = 0.8,
-    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
-    index,
-    width,
-    height,
-    loop,
-    dataLength,
-    children,
-    visibleRanges,
-    vertical
-  } = props;
-  const [shouldUpdate, setShouldUpdate] = React.useState(false);
-  const size = props.vertical ? props.height : props.width;
-  const x = useOffsetX({
-    handlerOffset,
-    index,
-    size,
-    dataLength,
-    loop
-  }, visibleRanges);
-  const offsetXStyle = useAnimatedStyle(() => {
-    const value = x.value / size;
-    const translate = interpolate(value, [-1, 0, 1], [-size + parallaxScrollingOffset, 0, size - parallaxScrollingOffset], Extrapolate.EXTEND);
-    const zIndex = interpolate(value, [-1, 0, 1], [0, size, 0], Extrapolate.CLAMP);
-    const scale = interpolate(value, [-1, 0, 1], [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale], Extrapolate.CLAMP);
-    return {
-      transform: [vertical ? {
-        translateY: translate
-      } : {
-        translateX: translate
-      }, {
-        scale
-      }],
-      zIndex
-    };
-  }, [loop, vertical, parallaxScrollingOffset]);
-  const updateView = React.useCallback((negativeRange, positiveRange) => {
-    setShouldUpdate(index >= negativeRange[0] && index <= negativeRange[1] || index >= positiveRange[0] && index <= positiveRange[1]);
-  }, [index]);
-  useAnimatedReaction(() => visibleRanges.value, () => {
-    runOnJS(updateView)(visibleRanges.value.negativeRange, visibleRanges.value.positiveRange);
-  }, [visibleRanges.value]);
-  return /*#__PURE__*/React.createElement(Animated.View, {
-    style: [{
-      width: width || "100%",
-      height: height || "100%",
-      position: "absolute"
-    }, offsetXStyle]
-  }, /*#__PURE__*/React.createElement(LazyView, {
-    shouldUpdate: shouldUpdate
-  }, children));
-};
-//# sourceMappingURL=ParallaxLayout.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["ParallaxLayout.tsx"],"names":["React","Animated","Extrapolate","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","LazyView","useOffsetX","ParallaxLayout","props","handlerOffset","parallaxScrollingOffset","parallaxScrollingScale","parallaxAdjacentItemScale","index","width","height","loop","dataLength","children","visibleRanges","vertical","shouldUpdate","setShouldUpdate","useState","size","x","offsetXStyle","value","translate","EXTEND","zIndex","CLAMP","scale","transform","translateY","translateX","updateView","useCallback","negativeRange","positiveRange","position"],"mappings":"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","sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport Animated, {\n  Extrapolate,\n  interpolate,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n} from \"react-native-reanimated\";\n\nimport type { ILayoutConfig } from \"./parallax\";\n\nimport { LazyView } from \"../components/LazyView\";\nimport { useOffsetX } from \"../hooks/useOffsetX\";\nimport type { IVisibleRanges } from \"../hooks/useVisibleRanges\";\nimport type { IComputedDirectionTypes } from \"../types\";\n\nexport const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<\n{\n  loop?: boolean\n  handlerOffset: Animated.SharedValue<number>\n  index: number\n  dataLength: number\n  visibleRanges: IVisibleRanges\n} & ILayoutConfig\n>>> = (props) => {\n  const {\n    handlerOffset,\n    parallaxScrollingOffset = 100,\n    parallaxScrollingScale = 0.8,\n    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,\n    index,\n    width,\n    height,\n    loop,\n    dataLength,\n    children,\n    visibleRanges,\n    vertical,\n  } = props;\n\n  const [shouldUpdate, setShouldUpdate] = React.useState(false);\n\n  const size = props.vertical ? props.height : props.width;\n\n  const x = useOffsetX(\n    {\n      handlerOffset,\n      index,\n      size,\n      dataLength,\n      loop,\n    },\n    visibleRanges,\n  );\n\n  const offsetXStyle = useAnimatedStyle(() => {\n    const value = x.value / size;\n\n    const translate = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        -size + parallaxScrollingOffset,\n        0,\n        size - parallaxScrollingOffset,\n      ],\n      Extrapolate.EXTEND,\n    );\n\n    const zIndex = interpolate(\n      value,\n      [-1, 0, 1],\n      [0, size, 0],\n      Extrapolate.CLAMP,\n    );\n\n    const scale = interpolate(\n      value,\n      [-1, 0, 1],\n      [\n        parallaxAdjacentItemScale,\n        parallaxScrollingScale,\n        parallaxAdjacentItemScale,\n      ],\n      Extrapolate.CLAMP,\n    );\n\n    return {\n      transform: [\n        vertical\n          ? {\n            translateY: translate,\n          }\n          : {\n            translateX: translate,\n          },\n        {\n          scale,\n        },\n      ],\n      zIndex,\n    };\n  }, [loop, vertical, parallaxScrollingOffset]);\n\n  const updateView = React.useCallback(\n    (negativeRange: number[], positiveRange: number[]) => {\n      setShouldUpdate(\n        (index >= negativeRange[0] && index <= negativeRange[1])\n                    || (index >= positiveRange[0] && index <= positiveRange[1]),\n      );\n    },\n    [index],\n  );\n\n  useAnimatedReaction(\n    () => visibleRanges.value,\n    () => {\n      runOnJS(updateView)(\n        visibleRanges.value.negativeRange,\n        visibleRanges.value.positiveRange,\n      );\n    },\n    [visibleRanges.value],\n  );\n\n  return (\n    <Animated.View\n      style={[\n        {\n          width: width || \"100%\",\n          height: height || \"100%\",\n          position: \"absolute\",\n        },\n        offsetXStyle,\n      ]}\n    >\n      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>\n    </Animated.View>\n  );\n};\n"]}

package/lib/typescript/layouts/ParallaxLayout.d.ts

@@ -1,13 +0,0 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import Animated from "react-native-reanimated";
-import type { ILayoutConfig } from "./parallax";
-import type { IVisibleRanges } from "../hooks/useVisibleRanges";
-import type { IComputedDirectionTypes } from "../types";
-export declare const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<{
-    loop?: boolean;
-    handlerOffset: Animated.SharedValue<number>;
-    index: number;
-    dataLength: number;
-    visibleRanges: IVisibleRanges;
-} & ILayoutConfig>>>;

package/src/layouts/ParallaxLayout.tsx

@@ -1,141 +0,0 @@
-import type { PropsWithChildren } from "react";
-import React from "react";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-} from "react-native-reanimated";
-
-import type { ILayoutConfig } from "./parallax";
-
-import { LazyView } from "../components/LazyView";
-import { useOffsetX } from "../hooks/useOffsetX";
-import type { IVisibleRanges } from "../hooks/useVisibleRanges";
-import type { IComputedDirectionTypes } from "../types";
-
-export const ParallaxLayout: React.FC<PropsWithChildren<IComputedDirectionTypes<
-{
-  loop?: boolean
-  handlerOffset: Animated.SharedValue<number>
-  index: number
-  dataLength: number
-  visibleRanges: IVisibleRanges
-} & ILayoutConfig
->>> = (props) => {
-  const {
-    handlerOffset,
-    parallaxScrollingOffset = 100,
-    parallaxScrollingScale = 0.8,
-    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
-    index,
-    width,
-    height,
-    loop,
-    dataLength,
-    children,
-    visibleRanges,
-    vertical,
-  } = props;
-
-  const [shouldUpdate, setShouldUpdate] = React.useState(false);
-
-  const size = props.vertical ? props.height : props.width;
-
-  const x = useOffsetX(
-    {
-      handlerOffset,
-      index,
-      size,
-      dataLength,
-      loop,
-    },
-    visibleRanges,
-  );
-
-  const offsetXStyle = useAnimatedStyle(() => {
-    const value = x.value / size;
-
-    const translate = interpolate(
-      value,
-      [-1, 0, 1],
-      [
-        -size + parallaxScrollingOffset,
-        0,
-        size - parallaxScrollingOffset,
-      ],
-      Extrapolate.EXTEND,
-    );
-
-    const zIndex = interpolate(
-      value,
-      [-1, 0, 1],
-      [0, size, 0],
-      Extrapolate.CLAMP,
-    );
-
-    const scale = interpolate(
-      value,
-      [-1, 0, 1],
-      [
-        parallaxAdjacentItemScale,
-        parallaxScrollingScale,
-        parallaxAdjacentItemScale,
-      ],
-      Extrapolate.CLAMP,
-    );
-
-    return {
-      transform: [
-        vertical
-          ? {
-            translateY: translate,
-          }
-          : {
-            translateX: translate,
-          },
-        {
-          scale,
-        },
-      ],
-      zIndex,
-    };
-  }, [loop, vertical, parallaxScrollingOffset]);
-
-  const updateView = React.useCallback(
-    (negativeRange: number[], positiveRange: number[]) => {
-      setShouldUpdate(
-        (index >= negativeRange[0] && index <= negativeRange[1])
-                    || (index >= positiveRange[0] && index <= positiveRange[1]),
-      );
-    },
-    [index],
-  );
-
-  useAnimatedReaction(
-    () => visibleRanges.value,
-    () => {
-      runOnJS(updateView)(
-        visibleRanges.value.negativeRange,
-        visibleRanges.value.positiveRange,
-      );
-    },
-    [visibleRanges.value],
-  );
-
-  return (
-    <Animated.View
-      style={[
-        {
-          width: width || "100%",
-          height: height || "100%",
-          position: "absolute",
-        },
-        offsetXStyle,
-      ]}
-    >
-      <LazyView shouldUpdate={shouldUpdate}>{children}</LazyView>
-    </Animated.View>
-  );
-};