@momo-kits/carousel 0.0.65-alpha.2 → 0.0.65-alpha.20

package/index.js

@@ -1,7 +1,5 @@
-//import Carousel from './Carousel';
 import Carousel from './CarouselV2';
 import Pagination from './pagination/Pagination';
+import NumberPagination from './pagination/NumberPagination';
 
-export {
-    Carousel, Pagination
-};
+export {Carousel, Pagination, NumberPagination};

package/package.json

@@ -1,16 +1,17 @@
 {
-  "name": "@momo-kits/carousel",
-  "version": "0.0.65-alpha.2",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {
-    "prop-types": "^15.7.2",
-    "react": "16.9.0"
-  },
-  "peerDependencies": {
-    "react": "16.9.0",
-    "react-native": ">=0.55"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
-}
+    "name": "@momo-kits/carousel",
+    "version": "0.0.65-alpha.20",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {
+        "prop-types": "^15.7.2",
+        "react": "16.9.0"
+    },
+    "peerDependencies": {
+        "react": "16.9.0",
+        "react-native": ">=0.55",
+        "@momo-kits/core-v2": ">=0.0.4-beta"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
+}

package/pagination/NumberPagination.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Colors, Radius, Spacing, Text } from '@momo-kits/core-v2';
+import { View, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+const NumberPagination = (props) => {
+    const { dataLength, activeIndex, style } = props;
+
+    return (
+        <View style={style}>
+            <View style={styles.container}>
+                <Text.Label1 style={styles.number}>{`${
+                    activeIndex + 1
+                }/${dataLength}`}</Text.Label1>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: Colors.black_08,
+        alignSelf: 'baseline',
+        paddingHorizontal: Spacing.S,
+        borderRadius: Radius.M,
+    },
+    number: {
+        color: Colors.black_01,
+    },
+});
+
+NumberPagination.defaultProps = {
+    dataLength: 0,
+    activeIndex: 0,
+};
+
+NumberPagination.propsType = {
+    dataLength: PropTypes.number,
+    activeIndex: PropTypes.number,
+    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+};
+
+export default NumberPagination;

package/pagination/Pagination.js

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react';
-import {
-    I18nManager, Platform, View
-} from 'react-native';
+import { I18nManager, Platform, View } from 'react-native';
 import PropTypes from 'prop-types';
 import PaginationDot from './PaginationDot';
 import styles from './styles';
+import { Colors, Radius, Spacing } from '@momo-kits/core-v2';
 
 const IS_IOS = Platform.OS === 'ios';
 const IS_RTL = I18nManager.isRTL;
@@ -14,34 +13,37 @@ export default class Pagination extends PureComponent {
         super(props);
 
         // Warnings
-        if ((props.dotColor && !props.inactiveDotColor) || (!props.dotColor && props.inactiveDotColor)) {
+        if (
+            (props.dotColor && !props.inactiveDotColor) ||
+            (!props.dotColor && props.inactiveDotColor)
+        ) {
             console.warn(
-                'react-native-snap-carousel | Pagination: '
-                + 'You need to specify both `dotColor` and `inactiveDotColor`'
+                'react-native-snap-carousel | Pagination: ' +
+                    'You need to specify both `dotColor` and `inactiveDotColor`',
             );
         }
-        if ((props.dotElement && !props.inactiveDotElement) || (!props.dotElement && props.inactiveDotElement)) {
+        if (
+            (props.dotElement && !props.inactiveDotElement) ||
+            (!props.dotElement && props.inactiveDotElement)
+        ) {
             console.warn(
-                'react-native-snap-carousel | Pagination: '
-                + 'You need to specify both `dotElement` and `inactiveDotElement`'
+                'react-native-snap-carousel | Pagination: ' +
+                    'You need to specify both `dotElement` and `inactiveDotElement`',
             );
         }
         if (props.tappableDots && !props.carouselRef) {
             console.warn(
-                'react-native-snap-carousel | Pagination: '
-                + 'You must specify prop `carouselRef` when setting `tappableDots` to `true`'
+                'react-native-snap-carousel | Pagination: ' +
+                    'You must specify prop `carouselRef` when setting `tappableDots` to `true`',
             );
         }
     }
 
-    _needsRTLAdaptations() {
-        const { vertical } = this.props;
-        return IS_RTL && !IS_IOS && !vertical;
-    }
-
     get _activeDotIndex() {
         const { activeDotIndex, dotsLength } = this.props;
-        return this._needsRTLAdaptations() ? dotsLength - activeDotIndex - 1 : activeDotIndex;
+        return this._needsRTLAdaptations()
+            ? dotsLength - activeDotIndex - 1
+            : activeDotIndex;
     }
 
     get dots() {
@@ -59,7 +61,8 @@ export default class Pagination extends PureComponent {
             inactiveDotScale,
             inactiveDotStyle,
             renderDots,
-            tappableDots
+            tappableDots,
+            type,
         } = this.props;
 
         if (renderDots) {
@@ -78,6 +81,7 @@ export default class Pagination extends PureComponent {
                 inactiveOpacity={inactiveDotOpacity}
                 inactiveScale={inactiveDotScale}
                 inactiveStyle={inactiveDotStyle}
+                type={type}
             />
         );
 
@@ -85,22 +89,33 @@ export default class Pagination extends PureComponent {
 
         for (let i = 0; i < dotsLength; i += 1) {
             const isActive = i === this._activeDotIndex;
-            dots.push(React.cloneElement(
-                (isActive ? dotElement : inactiveDotElement) || DefaultDot,
-                {
-                    key: `pagination-dot-${i}`,
-                    active: i === this._activeDotIndex,
-                    index: i
-                }
-            ));
+            dots.push(
+                React.cloneElement(
+                    (isActive ? dotElement : inactiveDotElement) || DefaultDot,
+                    {
+                        key: `pagination-dot-${i}`,
+                        active: i === this._activeDotIndex,
+                        index: i,
+                    },
+                ),
+            );
         }
 
         return dots;
     }
 
+    _needsRTLAdaptations() {
+        const { vertical } = this.props;
+        return IS_RTL && !IS_IOS && !vertical;
+    }
+
     render() {
         const {
-            dotsLength, containerStyle, vertical, accessibilityLabel
+            dotsLength,
+            containerStyle,
+            vertical,
+            accessibilityLabel,
+            type,
         } = this.props;
 
         if (!dotsLength || dotsLength < 2) {
@@ -112,9 +127,11 @@ export default class Pagination extends PureComponent {
             {
                 flexDirection: vertical
                     ? 'column'
-                    : (this._needsRTLAdaptations() ? 'row-reverse' : 'row')
+                    : this._needsRTLAdaptations()
+                    ? 'row-reverse'
+                    : 'row',
             },
-            containerStyle || {}
+            containerStyle || {},
         ];
 
         return (
@@ -122,9 +139,20 @@ export default class Pagination extends PureComponent {
                 pointerEvents="box-none"
                 style={style}
                 accessible={!!accessibilityLabel}
-                accessibilityLabel={accessibilityLabel}
-            >
-                { this.dots }
+                accessibilityLabel={accessibilityLabel}>
+                <View
+                    style={[
+                        {
+                            flexDirection: 'row',
+                            padding: Spacing.XS,
+                            borderRadius: Radius.S,
+                        },
+                        type === 'light'
+                            ? {}
+                            : { backgroundColor: Colors.opacity_02_white_20 },
+                    ]}>
+                    {this.dots}
+                </View>
             </View>
         );
     }
@@ -147,12 +175,14 @@ Pagination.propTypes = {
     vertical: PropTypes.bool,
     accessibilityLabel: PropTypes.string,
     containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    type: PropTypes.oneOf(['light', 'dark']),
 };
 
 Pagination.defaultProps = {
     inactiveDotOpacity: 0.5,
     inactiveDotScale: 0.5,
     tappableDots: false,
-    vertical: false
+    vertical: false,
+    type: 'light',
 };

package/pagination/PaginationDot.js

@@ -1,9 +1,8 @@
 import React, { PureComponent } from 'react';
-import {
-    Animated, Easing, TouchableOpacity
-} from 'react-native';
+import { Animated, Easing, TouchableOpacity } from 'react-native';
 import PropTypes from 'prop-types';
 import styles from './styles';
+import { Colors } from '@momo-kits/core-v2';
 
 export default class PaginationDot extends PureComponent {
     constructor(props) {
@@ -11,10 +10,15 @@ export default class PaginationDot extends PureComponent {
         this.state = {
             animColor: new Animated.Value(0),
             animOpacity: new Animated.Value(0),
-            animTransform: new Animated.Value(0)
+            animTransform: new Animated.Value(0),
         };
     }
 
+    get _shouldAnimateColor() {
+        const { color, inactiveColor } = this.props;
+        return color && inactiveColor;
+    }
+
     componentDidMount() {
         const { active } = this.props;
         if (active) {
@@ -36,36 +40,33 @@ export default class PaginationDot extends PureComponent {
             toValue,
             duration: 250,
             isInteraction: false,
-            useNativeDriver: false
+            useNativeDriver: false,
         };
 
         const animations = [
             Animated.timing(animOpacity, {
                 easing: Easing.linear,
-                ...commonProperties
+                ...commonProperties,
             }),
             Animated.spring(animTransform, {
-                friction: 4,
+                // friction: 4,
                 tension: 50,
-                ...commonProperties
-            })
+                ...commonProperties,
+            }),
         ];
 
         if (this._shouldAnimateColor) {
-            animations.push(Animated.timing(animColor, {
-                easing: Easing.linear,
-                ...commonProperties
-            }));
+            animations.push(
+                Animated.timing(animColor, {
+                    easing: Easing.linear,
+                    ...commonProperties,
+                }),
+            );
         }
 
         Animated.parallel(animations).start();
     }
 
-    get _shouldAnimateColor() {
-        const { color, inactiveColor } = this.props;
-        return color && inactiveColor;
-    }
-
     render() {
         const { animColor, animOpacity, animTransform } = this.state;
         const {
@@ -77,53 +78,59 @@ export default class PaginationDot extends PureComponent {
             inactiveColor,
             inactiveStyle,
             inactiveOpacity,
-            inactiveScale,
             index,
             style,
-            tappable
+            tappable,
+            type,
         } = this.props;
 
         const animatedStyle = {
             opacity: animOpacity.interpolate({
                 inputRange: [0, 1],
-                outputRange: [inactiveOpacity, 1]
+                outputRange: [inactiveOpacity, 1],
             }),
-            transform: [{
-                scale: animTransform.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [inactiveScale, 1]
-                })
-            }]
-        };
-        const animatedColor = this._shouldAnimateColor ? {
-            backgroundColor: animColor.interpolate({
+            width: animTransform.interpolate({
                 inputRange: [0, 1],
-                outputRange: [inactiveColor, color]
-            })
-        } : {};
+                outputRange: [4, 12],
+            }),
+        };
+        const animatedColor = this._shouldAnimateColor
+            ? {
+                  backgroundColor: animColor.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [inactiveColor, color],
+                  }),
+              }
+            : {};
 
         const dotContainerStyle = [
             styles.sliderPaginationDotContainer,
-            containerStyle || {}
+            containerStyle || {},
         ];
 
         const dotStyle = [
             styles.sliderPaginationDot,
             style || {},
             (!active && inactiveStyle) || {},
+            !active && { backgroundColor: Colors.black_10 },
             animatedStyle,
-            animatedColor
+            type === 'light'
+                ? animatedColor
+                : { backgroundColor: Colors.black_01 },
         ];
 
-        const onPress = tappable ? () => carouselRef && carouselRef._snapToItem(carouselRef._getPositionIndex(index)) : undefined;
+        const onPress = tappable
+            ? () =>
+                  carouselRef &&
+                  carouselRef._snapToItem(carouselRef._getPositionIndex(index))
+            : undefined;
 
         return (
             <TouchableOpacity
                 accessible={false}
                 style={dotContainerStyle}
                 activeOpacity={tappable ? activeOpacity : 1}
-                onPress={onPress}
-            >
+                onPress={onPress}>
                 <Animated.View style={dotStyle} />
             </TouchableOpacity>
         );
@@ -131,7 +138,6 @@ export default class PaginationDot extends PureComponent {
 }
 PaginationDot.propTypes = {
     inactiveOpacity: PropTypes.number.isRequired,
-    inactiveScale: PropTypes.number.isRequired,
     active: PropTypes.bool,
     activeOpacity: PropTypes.number,
     carouselRef: PropTypes.object,

package/pagination/styles.js

@@ -1,24 +1,24 @@
 import { StyleSheet } from 'react-native';
+import { Colors, Spacing } from '@momo-kits/core-v2';
 
-const DEFAULT_DOT_SIZE = 7;
-const DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';
+const DEFAULT_DOT_SIZE = 4;
+const DEFAULT_DOT_COLOR = Colors.pink_03;
 
 export default StyleSheet.create({
     sliderPagination: {
         alignItems: 'center',
         justifyContent: 'center',
         paddingHorizontal: 20,
-        //         paddingVertical: 30
     },
     sliderPaginationDotContainer: {
         alignItems: 'center',
         justifyContent: 'center',
-        marginHorizontal: 8
+        marginHorizontal: Spacing.XS,
     },
     sliderPaginationDot: {
         width: DEFAULT_DOT_SIZE,
         height: DEFAULT_DOT_SIZE,
         borderRadius: DEFAULT_DOT_SIZE / 2,
-        backgroundColor: DEFAULT_DOT_COLOR
-    }
+        backgroundColor: DEFAULT_DOT_COLOR,
+    },
 });

package/utils/animationsV2.js

@@ -1,5 +1,4 @@
-import {Platform, Animated} from 'react-native';
-
+import { Platform, Animated } from 'react-native';
 const IS_ANDROID = Platform.OS === 'android';
 
 // Get scroll interpolator's input range from an array of slide indexes
@@ -12,105 +11,116 @@ const IS_ANDROID = Platform.OS === 'android';
 //     index * sizeRef, // active
 //     (index + 1) * sizeRef // active - 1
 // ]
-export function getInputRangeFromIndexes(range, index, carouselProps) {
-  const sizeRef = carouselProps.vertical
-    ? carouselProps.itemHeight
-    : carouselProps.itemWidth;
-  const inputRange = [];
+export function getInputRangeFromIndexes (
+    range,
+    index,
+    carouselProps
+) {
+    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];
+export function defaultScrollInterpolator (
+    index,
+    carouselProps
+) {
+    const range = [1, 0, -1];
+    const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
+    const outputRange = [0, 1, 0];
 
-  return {
-    inputRange,
-    outputRange,
-  };
+    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],
-          }),
-        },
-      ],
+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
     };
-  }
-
-  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],
-      }),
+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 }]
     };
-  }
-
-  return {
-    ...animatedOpacity,
-    transform: [{...animatedScale}, {...animatedTranslate}],
-  };
 }
 
 // Stack animation
@@ -118,75 +128,107 @@ export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
 // WARNING: The effect had to be visually inverted on Android because this OS doesn't honor the `zIndex`property
 // 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;
+export function stackScrollInterpolator (
+    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,
-  };
+    return { inputRange, outputRange };
 }
-
-export function stackAnimatedStyles(
-  index,
-  animatedValue,
-  carouselProps,
-  cardOffset,
+export function stackAnimatedStyles (
+    index,
+    animatedValue,
+    carouselProps,
+    cardOffset
 ) {
-  const sizeRef = carouselProps.vertical
-    ? carouselProps.itemHeight
-    : carouselProps.itemWidth;
-  const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
+    const sizeRef = carouselProps.vertical ?
+        carouselProps.itemHeight :
+        carouselProps.itemWidth;
+    const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
 
-  const card1Scale = 0.9;
-  const card2Scale = 0.8;
+    const card1Scale = 0.9;
+    const card2Scale = 0.8;
 
-  const newCardOffset = cardOffset ?? 18;
+    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);
+    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;
-  };
+        return IS_ANDROID ?
+            centeredPosition - edgeAlignment - offset :
+            centeredPosition + edgeAlignment + offset;
+    };
 
-  const opacityOutputRange =
+    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',
-        }),
-      },
-      {
-        [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',
-        }),
-      },
-    ],
-  };
+    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],
+                outputRange: opacityOutputRange.reverse(),
+                extrapolate: 'clamp'
+            }),
+            transform: [
+                {
+                    scale: animatedValue.interpolate({
+                        inputRange: [-2, -1, 0, 1],
+                        outputRange: [card2Scale, card1Scale, 1, card1Scale],
+                        extrapolate: 'clamp'
+                    })
+                },
+                {
+                    [translateProp]: animatedValue.interpolate({
+                        inputRange: [-3, -2, -1, 0, 1],
+                        outputRange: [
+                            getTranslateFromScale(-3, card2Scale),
+                            getTranslateFromScale(-2, card2Scale),
+                            getTranslateFromScale(-1, card1Scale),
+                            0,
+                            sizeRef * 0.5
+                        ],
+                        extrapolate: 'clamp'
+                    })
+                }
+            ]
+        } :
+        {
+            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'
+                    })
+                },
+                {
+                    [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
@@ -194,147 +236,146 @@ export function stackAnimatedStyles(
 // WARNING: The effect had to be visually inverted on Android because this OS doesn't honor the `zIndex`property
 // 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;
+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,
-  };
+    return { inputRange, outputRange };
 }
-
-export function tinderAnimatedStyles(
-  index,
-  animatedValue,
-  carouselProps,
-  cardOffset,
+export function tinderAnimatedStyles (
+    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 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);
-  };
+    const getSecondaryTranslateFromScale = (cardIndex, scale) => {
+        return Math.round((newCardOffset * Math.abs(cardIndex)) / scale);
+    };
 
-  return IS_ANDROID
-    ? {
+    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',
+            opacity: animatedValue.interpolate({
+                inputRange: [-3, -2, -1, 0, 1],
+                outputRange: [0, peekingCardsOpacity, peekingCardsOpacity, 1, 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),
-              ],
-              extrapolate: 'clamp',
-            }),
-          },
-          {
-            [secondaryTranslateProp]: animatedValue.interpolate({
-              inputRange: [0, 1, 2, 3],
-              outputRange: [
-                0,
-                getSecondaryTranslateFromScale(1, card1Scale),
-                getSecondaryTranslateFromScale(2, card2Scale),
-                getSecondaryTranslateFromScale(3, card3Scale),
-              ],
-              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)
+                        ],
+                        extrapolate: 'clamp'
+                    })
+                },
+                {
+                    [secondaryTranslateProp]: animatedValue.interpolate({
+                        inputRange: [0, 1, 2, 3],
+                        outputRange: [
+                            0,
+                            getSecondaryTranslateFromScale(1, card1Scale),
+                            getSecondaryTranslateFromScale(2, card2Scale),
+                            getSecondaryTranslateFromScale(3, card3Scale)
+                        ],
+                        extrapolate: 'clamp'
+                    })
+                }
+            ]
+        };
 }