@momo-kits/carousel 0.0.65-alpha.12 → 0.0.65-alpha.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/carousel",
-  "version": "0.0.65-alpha.12",
+  "version": "0.0.65-alpha.14",
   "private": false,
   "main": "index.js",
   "dependencies": {

package/utils/animationsV2.js

@@ -1,4 +1,4 @@
-import { Platform, Animated } from 'react-native';
+import {Platform, Animated} from 'react-native';
 
 const IS_ANDROID = Platform.OS === 'android';
 
@@ -13,106 +13,104 @@ const IS_ANDROID = Platform.OS === 'android';
 //     (index + 1) * sizeRef // active - 1
 // ]
 export function getInputRangeFromIndexes(range, index, carouselProps) {
-    const sizeRef = carouselProps.vertical
-        ? carouselProps.itemHeight
-        : carouselProps.itemWidth;
-    const inputRange = [];
+  const sizeRef = carouselProps.vertical
+    ? carouselProps.itemHeight
+    : carouselProps.itemWidth;
+  const inputRange = [];
 
-    for (let i = 0; i < range.length; i++) {
-        inputRange.push((index - range[i]) * sizeRef);
-    }
+  for (let i = 0; i < range.length; i++) {
+    inputRange.push((index - range[i]) * sizeRef);
+  }
 
-    return inputRange;
+  return inputRange;
 }
 
 // Default behavior
 // Scale and/or opacity effect
 // Based on props 'inactiveSlideOpacity' and 'inactiveSlideScale'
 export function defaultScrollInterpolator(index, carouselProps) {
-    const range = [1, 0, -1];
-    const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
-    const outputRange = [0, 1, 0];
-
-    return {
-        inputRange,
-        outputRange,
-    };
+  const range = [1, 0, -1];
+  const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
+  const outputRange = [0, 1, 0];
+
+  return {
+    inputRange,
+    outputRange,
+  };
 }
 
 export function defaultAnimatedStyles(_index, animatedValue, carouselProps) {
-    let animatedOpacity = {};
-    let animatedScale = {};
-
-    if (carouselProps.inactiveSlideOpacity < 1) {
-        animatedOpacity = {
-            opacity: animatedValue.interpolate({
-                inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideOpacity, 1],
-            }),
-        };
-    }
-
-    if (carouselProps.inactiveSlideScale < 1) {
-        animatedScale = {
-            transform: [
-                {
-                    scale: animatedValue.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [carouselProps.inactiveSlideScale, 1],
-                    }),
-                },
-            ],
-        };
-    }
-
-    return {
-        ...animatedOpacity,
-        ...animatedScale,
+  let animatedOpacity = {};
+  let animatedScale = {};
+
+  if (carouselProps.inactiveSlideOpacity < 1) {
+    animatedOpacity = {
+      opacity: animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [carouselProps.inactiveSlideOpacity, 1],
+      }),
+    };
+  }
+
+  if (carouselProps.inactiveSlideScale < 1) {
+    animatedScale = {
+      transform: [
+        {
+          scale: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [carouselProps.inactiveSlideScale, 1],
+          }),
+        },
+      ],
     };
+  }
+
+  return {
+    ...animatedOpacity,
+    ...animatedScale,
+  };
 }
 
 // Shift animation
 // Same as the default one, but the active slide is also shifted up or down
 // Based on prop 'inactiveSlideShift'
 export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
-    let animatedOpacity = {};
-    let animatedScale = {};
-    let animatedTranslate = {};
-
-    if (carouselProps.inactiveSlideOpacity < 1) {
-        animatedOpacity = {
-            opacity: animatedValue.interpolate({
-                inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideOpacity, 1],
-            }),
-        };
-    }
-
-    if (carouselProps.inactiveSlideScale < 1) {
-        animatedScale = {
-            scale: animatedValue.interpolate({
-                inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideScale, 1],
-            }),
-        };
-    }
-
-    if (carouselProps.inactiveSlideShift !== 0) {
-        const translateProp = carouselProps.vertical
-            ? 'translateX'
-            : 'translateY';
-        animatedTranslate = {
-            [translateProp]: animatedValue.interpolate({
-                inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideShift, 0],
-            }),
-        };
-    }
-
-    return {
-        ...animatedOpacity,
-        transform: [{ ...animatedScale }, { ...animatedTranslate }],
+  let animatedOpacity = {};
+  let animatedScale = {};
+  let animatedTranslate = {};
+
+  if (carouselProps.inactiveSlideOpacity < 1) {
+    animatedOpacity = {
+      opacity: animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [carouselProps.inactiveSlideOpacity, 1],
+      }),
     };
+  }
+
+  if (carouselProps.inactiveSlideScale < 1) {
+    animatedScale = {
+      scale: animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [carouselProps.inactiveSlideScale, 1],
+      }),
+    };
+  }
+
+  if (carouselProps.inactiveSlideShift !== 0) {
+    const translateProp = carouselProps.vertical ? 'translateX' : 'translateY';
+    animatedTranslate = {
+      [translateProp]: animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [carouselProps.inactiveSlideShift, 0],
+      }),
+    };
+  }
+
+  return {
+    ...animatedOpacity,
+    transform: [{...animatedScale}, {...animatedTranslate}],
+  };
 }
 
 // Stack animation
@@ -121,78 +119,74 @@ export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
 // This means that the item with the higher zIndex (and therefore the tap receiver) remains the one AFTER the currently active item
 // The `elevation` property compensates for that only visually, which is not good enough
 export function stackScrollInterpolator(index, carouselProps) {
-    const range = [3, 2, 1, 0, -1];
-    const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
-    const outputRange = range;
-
-    return {
-        inputRange,
-        outputRange,
-    };
+  const range = [3, 2, 1, 0, -1];
+  const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
+  const outputRange = range;
+
+  return {
+    inputRange,
+    outputRange,
+  };
 }
 
 export function stackAnimatedStyles(
-    index,
-    animatedValue,
-    carouselProps,
-    cardOffset,
+  index,
+  animatedValue,
+  carouselProps,
+  cardOffset,
 ) {
-    const sizeRef = carouselProps.vertical
-        ? carouselProps.itemHeight
-        : carouselProps.itemWidth;
-    const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
-
-    const card1Scale = 0.9;
-    const card2Scale = 0.8;
-
-    const newCardOffset = cardOffset ?? 18;
-
-    const getTranslateFromScale = (cardIndex, scale) => {
-        const centerFactor = (1 / scale) * cardIndex;
-        const centeredPosition = -Math.round(sizeRef * centerFactor);
-        const edgeAlignment = Math.round((sizeRef - sizeRef * scale) / 2);
-        const offset = Math.round(
-            (newCardOffset * Math.abs(cardIndex)) / scale,
-        );
-
-        return centeredPosition + edgeAlignment + offset;
-    };
-
-    const opacityOutputRange =
-        carouselProps.inactiveSlideOpacity === 1
-            ? [1, 1, 1, 0]
-            : [1, 0.75, 0.5, 0];
-
-    return {
-        zIndex: carouselProps.data.length - index,
-        opacity: animatedValue.interpolate({
-            inputRange: [0, 1, 2, 3],
-            outputRange: opacityOutputRange,
-            extrapolate: 'clamp',
+  const sizeRef = carouselProps.vertical
+    ? carouselProps.itemHeight
+    : carouselProps.itemWidth;
+  const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
+
+  const card1Scale = 0.9;
+  const card2Scale = 0.8;
+
+  const newCardOffset = cardOffset ?? 18;
+
+  const getTranslateFromScale = (cardIndex, scale) => {
+    const centerFactor = (1 / scale) * cardIndex;
+    const centeredPosition = -Math.round(sizeRef * centerFactor);
+    const edgeAlignment = Math.round((sizeRef - sizeRef * scale) / 2);
+    const offset = Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
+
+    return centeredPosition + edgeAlignment + offset;
+  };
+
+  const opacityOutputRange =
+    carouselProps.inactiveSlideOpacity === 1 ? [1, 1, 1, 0] : [1, 0.75, 0.5, 0];
+
+  return {
+    zIndex: carouselProps.data.length - index,
+    opacity: animatedValue.interpolate({
+      inputRange: [0, 1, 2, 3],
+      outputRange: opacityOutputRange,
+      extrapolate: 'clamp',
+    }),
+    transform: [
+      {
+        scale: animatedValue.interpolate({
+          inputRange: [-1, 0, 1, 2],
+          outputRange: [card1Scale, 1, card1Scale, card2Scale],
+          extrapolate: 'clamp',
         }),
-        transform: [
-            {
-                scale: animatedValue.interpolate({
-                    inputRange: [-1, 0, 1, 2],
-                    outputRange: [card1Scale, 1, card1Scale, card2Scale],
-                    extrapolate: 'clamp',
-                }),
-            },
-            {
-                [translateProp]: animatedValue.interpolate({
-                    inputRange: [-1, 0, 1, 2, 3],
-                    outputRange: [
-                        -sizeRef * 0.5,
-                        0,
-                        getTranslateFromScale(1, card1Scale),
-                        getTranslateFromScale(2, card2Scale),
-                        getTranslateFromScale(3, card2Scale),
-                    ],
-                    extrapolate: 'clamp',
-                }),
-            },
-        ],
-    };
+      },
+      {
+        [translateProp]: animatedValue.interpolate({
+          inputRange: [-1, 0, 1, 2, 3],
+          outputRange: [
+            -sizeRef * 0.5,
+            0,
+            getTranslateFromScale(1, card1Scale),
+            getTranslateFromScale(2, card2Scale),
+            getTranslateFromScale(3, card2Scale),
+          ],
+          extrapolate: 'clamp',
+        }),
+      },
+    ],
+  };
 }
 
 // Tinder animation
@@ -201,158 +195,146 @@ export function stackAnimatedStyles(
 // This means that the item with the higher zIndex (and therefore the tap receiver) remains the one AFTER the currently active item
 // The `elevation` property compensates for that only visually, which is not good enough
 export function tinderScrollInterpolator(index, carouselProps) {
-    const range = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
-    const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
-    const outputRange = range;
-
-    return {
-        inputRange,
-        outputRange,
-    };
+  const range = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
+  const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
+  const outputRange = range;
+
+  return {
+    inputRange,
+    outputRange,
+  };
 }
 
 export function tinderAnimatedStyles(
-    index,
-    animatedValue,
-    carouselProps,
-    cardOffset,
+  index,
+  animatedValue,
+  carouselProps,
+  cardOffset,
 ) {
-    const sizeRef = carouselProps.vertical
-        ? carouselProps.itemHeight
-        : carouselProps.itemWidth;
-    const mainTranslateProp = carouselProps.vertical
-        ? 'translateY'
-        : 'translateX';
-    const secondaryTranslateProp = carouselProps.vertical
-        ? 'translateX'
-        : 'translateY';
-
-    const card1Scale = 0.96;
-    const card2Scale = 0.92;
-    const card3Scale = 0.88;
-
-    const peekingCardsOpacity = IS_ANDROID ? 0.92 : 1;
-
-    const newCardOffset = cardOffset ?? 9;
-
-    const getMainTranslateFromScale = (cardIndex, scale) => {
-        const centerFactor = (1 / scale) * cardIndex;
-        return -Math.round(sizeRef * centerFactor);
-    };
-
-    const getSecondaryTranslateFromScale = (cardIndex, scale) => {
-        return Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
-    };
-
-    return IS_ANDROID
-        ? {
-              // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
-              opacity: animatedValue.interpolate({
-                  inputRange: [-3, -2, -1, 0, 1],
-                  outputRange: [
-                      0,
-                      peekingCardsOpacity,
-                      peekingCardsOpacity,
-                      1,
-                      0,
-                  ],
-                  extrapolate: 'clamp',
-              }),
-              transform: [
-                  {
-                      scale: animatedValue.interpolate({
-                          inputRange: [-3, -2, -1, 0],
-                          outputRange: [card3Scale, card2Scale, card1Scale, 1],
-                          extrapolate: 'clamp',
-                      }),
-                  },
-                  {
-                      rotate: animatedValue.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: ['0deg', '22deg'],
-                          extrapolate: 'clamp',
-                      }),
-                  },
-                  {
-                      [mainTranslateProp]: animatedValue.interpolate({
-                          inputRange: [-3, -2, -1, 0, 1],
-                          outputRange: [
-                              getMainTranslateFromScale(-3, card3Scale),
-                              getMainTranslateFromScale(-2, card2Scale),
-                              getMainTranslateFromScale(-1, card1Scale),
-                              0,
-                              sizeRef * 1.1,
-                          ],
-                          extrapolate: 'clamp',
-                      }),
-                  },
-                  {
-                      [secondaryTranslateProp]: animatedValue.interpolate({
-                          inputRange: [-3, -2, -1, 0],
-                          outputRange: [
-                              getSecondaryTranslateFromScale(-3, card3Scale),
-                              getSecondaryTranslateFromScale(-2, card2Scale),
-                              getSecondaryTranslateFromScale(-1, card1Scale),
-                              0,
-                          ],
-                          extrapolate: 'clamp',
-                      }),
-                  },
+  const sizeRef = carouselProps.vertical
+    ? carouselProps.itemHeight
+    : carouselProps.itemWidth;
+  const mainTranslateProp = carouselProps.vertical
+    ? 'translateY'
+    : 'translateX';
+  const secondaryTranslateProp = carouselProps.vertical
+    ? 'translateX'
+    : 'translateY';
+
+  const card1Scale = 0.96;
+  const card2Scale = 0.92;
+  const card3Scale = 0.88;
+
+  const peekingCardsOpacity = IS_ANDROID ? 0.92 : 1;
+
+  const newCardOffset = cardOffset ?? 9;
+
+  const getMainTranslateFromScale = (cardIndex, scale) => {
+    const centerFactor = (1 / scale) * cardIndex;
+    return -Math.round(sizeRef * centerFactor);
+  };
+
+  const getSecondaryTranslateFromScale = (cardIndex, scale) => {
+    return Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
+  };
+
+  return IS_ANDROID
+    ? {
+        // elevation.data.length - index, // fix zIndex bug visually, but not from a logic point of view
+        opacity: animatedValue.interpolate({
+          inputRange: [-3, -2, -1, 0, 1],
+          outputRange: [0, peekingCardsOpacity, peekingCardsOpacity, 1, 0],
+          extrapolate: 'clamp',
+        }),
+        transform: [
+          {
+            scale: animatedValue.interpolate({
+              inputRange: [-3, -2, -1, 0],
+              outputRange: [card3Scale, card2Scale, card1Scale, 1],
+              extrapolate: 'clamp',
+            }),
+          },
+          {
+            rotate: animatedValue.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0deg', '22deg'],
+              extrapolate: 'clamp',
+            }),
+          },
+          {
+            [mainTranslateProp]: animatedValue.interpolate({
+              inputRange: [-3, -2, -1, 0, 1],
+              outputRange: [
+                getMainTranslateFromScale(-3, card3Scale),
+                getMainTranslateFromScale(-2, card2Scale),
+                getMainTranslateFromScale(-1, card1Scale),
+                0,
+                sizeRef * 1.1,
+              ],
+              extrapolate: 'clamp',
+            }),
+          },
+          {
+            [secondaryTranslateProp]: animatedValue.interpolate({
+              inputRange: [-3, -2, -1, 0],
+              outputRange: [
+                getSecondaryTranslateFromScale(-3, card3Scale),
+                getSecondaryTranslateFromScale(-2, card2Scale),
+                getSecondaryTranslateFromScale(-1, card1Scale),
+                0,
+              ],
+              extrapolate: 'clamp',
+            }),
+          },
+        ],
+      }
+    : {
+        zIndex: carouselProps.data.length - index,
+        opacity: animatedValue.interpolate({
+          inputRange: [-1, 0, 1, 2, 3],
+          outputRange: [0, 1, peekingCardsOpacity, peekingCardsOpacity, 0],
+          extrapolate: 'clamp',
+        }),
+        transform: [
+          {
+            scale: animatedValue.interpolate({
+              inputRange: [0, 1, 2, 3],
+              outputRange: [1, card1Scale, card2Scale, card3Scale],
+              extrapolate: 'clamp',
+            }),
+          },
+          {
+            rotate: animatedValue.interpolate({
+              inputRange: [-1, 0],
+              outputRange: ['-22deg', '0deg'],
+              extrapolate: 'clamp',
+            }),
+          },
+          {
+            [mainTranslateProp]: animatedValue.interpolate({
+              inputRange: [-1, 0, 1, 2, 3],
+              outputRange: [
+                -sizeRef * 1.1,
+                0,
+                getMainTranslateFromScale(1, card1Scale),
+                getMainTranslateFromScale(2, card2Scale),
+                getMainTranslateFromScale(3, card3Scale),
               ],
-          }
-        : {
-              zIndex: carouselProps.data.length - index,
-              opacity: animatedValue.interpolate({
-                  inputRange: [-1, 0, 1, 2, 3],
-                  outputRange: [
-                      0,
-                      1,
-                      peekingCardsOpacity,
-                      peekingCardsOpacity,
-                      0,
-                  ],
-                  extrapolate: 'clamp',
-              }),
-              transform: [
-                  {
-                      scale: animatedValue.interpolate({
-                          inputRange: [0, 1, 2, 3],
-                          outputRange: [1, card1Scale, card2Scale, card3Scale],
-                          extrapolate: 'clamp',
-                      }),
-                  },
-                  {
-                      rotate: animatedValue.interpolate({
-                          inputRange: [-1, 0],
-                          outputRange: ['-22deg', '0deg'],
-                          extrapolate: 'clamp',
-                      }),
-                  },
-                  {
-                      [mainTranslateProp]: animatedValue.interpolate({
-                          inputRange: [-1, 0, 1, 2, 3],
-                          outputRange: [
-                              -sizeRef * 1.1,
-                              0,
-                              getMainTranslateFromScale(1, card1Scale),
-                              getMainTranslateFromScale(2, card2Scale),
-                              getMainTranslateFromScale(3, card3Scale),
-                          ],
-                          extrapolate: 'clamp',
-                      }),
-                  },
-                  {
-                      [secondaryTranslateProp]: animatedValue.interpolate({
-                          inputRange: [0, 1, 2, 3],
-                          outputRange: [
-                              0,
-                              getSecondaryTranslateFromScale(1, card1Scale),
-                              getSecondaryTranslateFromScale(2, card2Scale),
-                              getSecondaryTranslateFromScale(3, card3Scale),
-                          ],
-                          extrapolate: 'clamp',
-                      }),
-                  },
+              extrapolate: 'clamp',
+            }),
+          },
+          {
+            [secondaryTranslateProp]: animatedValue.interpolate({
+              inputRange: [0, 1, 2, 3],
+              outputRange: [
+                0,
+                getSecondaryTranslateFromScale(1, card1Scale),
+                getSecondaryTranslateFromScale(2, card2Scale),
+                getSecondaryTranslateFromScale(3, card3Scale),
               ],
-          };
+              extrapolate: 'clamp',
+            }),
+          },
+        ],
+      };
 }