@momo-kits/carousel 0.0.62-alpha.33 → 0.0.62-alpha.35

package/CarouselV2.js

@@ -68,6 +68,29 @@ export default class Carousel extends React.PureComponent {
         this._displayWarnings(props);
     }
 
+    get realIndex() {
+        return this._activeItem;
+    }
+
+    //   shouldComponentUpdate (
+    //       nextProps,
+    //       nextState
+    //   ) {
+    //       if (this.props.shouldOptimizeUpdates === false) {
+    //           return true;
+    //       } else {
+    //           return shallowCompare(this, nextProps, nextState);
+    //       }
+    //   }
+
+    get currentIndex() {
+        return this._getDataIndex(this._activeItem);
+    }
+
+    get currentScrollPosition() {
+        return this._currentScrollOffset;
+    }
+
     componentDidMount() {
         const { apparitionDelay, autoplay, firstItem } = this.props;
 
@@ -106,17 +129,6 @@ export default class Carousel extends React.PureComponent {
         }, 1);
     }
 
-    //   shouldComponentUpdate (
-    //       nextProps,
-    //       nextState
-    //   ) {
-    //       if (this.props.shouldOptimizeUpdates === false) {
-    //           return true;
-    //       } else {
-    //           return shallowCompare(this, nextProps, nextState);
-    //       }
-    //   }
-
     componentDidUpdate(prevProps) {
         const { interpolators } = this.state;
         const { firstItem, scrollEnabled } = this.props;
@@ -202,18 +214,6 @@ export default class Carousel extends React.PureComponent {
         clearTimeout(this._androidRepositioningTimeout);
     }
 
-    get realIndex() {
-        return this._activeItem;
-    }
-
-    get currentIndex() {
-        return this._getDataIndex(this._activeItem);
-    }
-
-    get currentScrollPosition() {
-        return this._currentScrollOffset;
-    }
-
     _setScrollHandler(props) {
         // Native driver for scroll events
         const scrollEventConfig = {
@@ -752,12 +752,18 @@ export default class Carousel extends React.PureComponent {
         const multiplier = this._currentScrollOffset === 0 ? 1 : -1;
         const scrollDelta = scrollValue * multiplier;
 
-        this._scrollTo({ offset: offset + scrollDelta, animated: false });
+        this._scrollTo({
+            offset: offset + scrollDelta,
+            animated: false,
+        });
 
         // @ts-expect-error setTimeout / clearTiemout is buggy :/
         clearTimeout(this._hackSlideAnimationTimeout);
         this._hackSlideAnimationTimeout = setTimeout(() => {
-            this._scrollTo({ offset, animated: false });
+            this._scrollTo({
+                offset,
+                animated: false,
+            });
         }, 1); // works randomly when set to '0'
     }
 
@@ -867,9 +873,9 @@ export default class Carousel extends React.PureComponent {
         }
 
         if (
-            (IS_IOS && scrollOffset >= lastItemScrollOffset) ||
+            (IS_IOS && scrollOffset > lastItemScrollOffset) ||
             (IS_ANDROID &&
-                Math.floor(scrollOffset) >= Math.floor(lastItemScrollOffset))
+                Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
         ) {
             this._activeItem = nextActiveItem;
             this._repositionScroll(nextActiveItem);
@@ -961,7 +967,10 @@ export default class Carousel extends React.PureComponent {
             return;
         }
 
-        this._scrollTo({ offset, animated });
+        this._scrollTo({
+            offset,
+            animated,
+        });
 
         // On both platforms, `onMomentumScrollEnd` won't be triggered if the scroll isn't animated
         // so we need to trigger the callback manually
@@ -1196,7 +1205,10 @@ export default class Carousel extends React.PureComponent {
             containerCustomStyle || style || {},
             hideCarousel ? { opacity: 0 } : {},
             this.props.vertical
-                ? { height: this.props.sliderHeight, flexDirection: 'column' } // LTR hack; see https://github.com/facebook/react-native/issues/11960
+                ? {
+                      height: this.props.sliderHeight,
+                      flexDirection: 'column',
+                  } // LTR hack; see https://github.com/facebook/react-native/issues/11960
                 : // and https://github.com/facebook/react-native/issues/13100#issuecomment-328986423
                   {
                       width: this.props.sliderWidth,

package/index.js

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

package/package.json

@@ -1,17 +1,16 @@
 {
-    "name": "@momo-kits/carousel",
-    "version": "0.0.62-alpha.33",
-    "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"
-}
+  "name": "@momo-kits/carousel",
+  "version": "0.0.62-alpha.35",
+  "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"
+}

package/pagination/Pagination.js

@@ -1,9 +1,10 @@
 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;
@@ -13,37 +14,34 @@ 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() {
@@ -61,8 +59,7 @@ export default class Pagination extends PureComponent {
             inactiveDotScale,
             inactiveDotStyle,
             renderDots,
-            tappableDots,
-            type,
+            tappableDots
         } = this.props;
 
         if (renderDots) {
@@ -81,7 +78,6 @@ export default class Pagination extends PureComponent {
                 inactiveOpacity={inactiveDotOpacity}
                 inactiveScale={inactiveDotScale}
                 inactiveStyle={inactiveDotStyle}
-                type={type}
             />
         );
 
@@ -89,33 +85,22 @@ 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,
-            type,
+            dotsLength, containerStyle, vertical, accessibilityLabel
         } = this.props;
 
         if (!dotsLength || dotsLength < 2) {
@@ -127,11 +112,9 @@ export default class Pagination extends PureComponent {
             {
                 flexDirection: vertical
                     ? 'column'
-                    : this._needsRTLAdaptations()
-                    ? 'row-reverse'
-                    : 'row',
+                    : (this._needsRTLAdaptations() ? 'row-reverse' : 'row')
             },
-            containerStyle || {},
+            containerStyle || {}
         ];
 
         return (
@@ -139,20 +122,9 @@ export default class Pagination extends PureComponent {
                 pointerEvents="box-none"
                 style={style}
                 accessible={!!accessibilityLabel}
-                accessibilityLabel={accessibilityLabel}>
-                <View
-                    style={[
-                        {
-                            flexDirection: 'row',
-                            padding: Spacing.XS,
-                            borderRadius: Radius.S,
-                        },
-                        type === 'light'
-                            ? {}
-                            : { backgroundColor: Colors.opacity_02_white_20 },
-                    ]}>
-                    {this.dots}
-                </View>
+                accessibilityLabel={accessibilityLabel}
+            >
+                { this.dots }
             </View>
         );
     }
@@ -175,14 +147,12 @@ Pagination.propTypes = {
     vertical: PropTypes.bool,
     accessibilityLabel: PropTypes.string,
     containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    type: PropTypes.oneOf(['light', 'dark']),
+    dotContainerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
 };
 
 Pagination.defaultProps = {
     inactiveDotOpacity: 0.5,
     inactiveDotScale: 0.5,
     tappableDots: false,
-    vertical: false,
-    type: 'light',
+    vertical: false
 };

package/pagination/PaginationDot.js

@@ -1,8 +1,9 @@
 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) {
@@ -10,15 +11,10 @@ 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) {
@@ -40,33 +36,36 @@ 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 {
@@ -78,59 +77,53 @@ export default class PaginationDot extends PureComponent {
             inactiveColor,
             inactiveStyle,
             inactiveOpacity,
+            inactiveScale,
             index,
             style,
-            tappable,
-            type,
+            tappable
         } = this.props;
 
         const animatedStyle = {
             opacity: animOpacity.interpolate({
                 inputRange: [0, 1],
-                outputRange: [inactiveOpacity, 1],
-            }),
-            width: animTransform.interpolate({
-                inputRange: [0, 1],
-                outputRange: [4, 12],
+                outputRange: [inactiveOpacity, 1]
             }),
+            transform: [{
+                scale: animTransform.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [inactiveScale, 1]
+                })
+            }]
         };
-        const animatedColor = this._shouldAnimateColor
-            ? {
-                  backgroundColor: animColor.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [inactiveColor, color],
-                  }),
-              }
-            : {};
+        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,
-            type === 'light'
-                ? animatedColor
-                : { backgroundColor: Colors.black_01 },
+            animatedColor
         ];
 
-        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>
         );
@@ -138,6 +131,7 @@ 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 = 4;
-const DEFAULT_DOT_COLOR = Colors.pink_03;
+const DEFAULT_DOT_SIZE = 7;
+const DEFAULT_DOT_COLOR = 'rgba(0, 0, 0, 0.75)';
 
 export default StyleSheet.create({
     sliderPagination: {
         alignItems: 'center',
         justifyContent: 'center',
         paddingHorizontal: 20,
+        //         paddingVertical: 30
     },
     sliderPaginationDotContainer: {
         alignItems: 'center',
         justifyContent: 'center',
-        marginHorizontal: Spacing.XS,
+        marginHorizontal: 8
     },
     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,4 +1,5 @@
 import { Platform, Animated } from 'react-native';
+
 const IS_ANDROID = Platform.OS === 'android';
 
 // Get scroll interpolator's input range from an array of slide indexes
@@ -11,14 +12,10 @@ 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;
+export function getInputRangeFromIndexes(range, index, carouselProps) {
+    const sizeRef = carouselProps.vertical
+        ? carouselProps.itemHeight
+        : carouselProps.itemWidth;
     const inputRange = [];
 
     for (let i = 0; i < range.length; i++) {
@@ -31,21 +28,18 @@ export function getInputRangeFromIndexes (
 // Default behavior
 // Scale and/or opacity effect
 // Based on props 'inactiveSlideOpacity' and 'inactiveSlideScale'
-export function defaultScrollInterpolator (
-    index,
-    carouselProps
-) {
+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
-) {
+
+export function defaultAnimatedStyles(_index, animatedValue, carouselProps) {
     let animatedOpacity = {};
     let animatedScale = {};
 
@@ -53,8 +47,8 @@ export function defaultAnimatedStyles (
         animatedOpacity = {
             opacity: animatedValue.interpolate({
                 inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideOpacity, 1]
-            })
+                outputRange: [carouselProps.inactiveSlideOpacity, 1],
+            }),
         };
     }
 
@@ -64,27 +58,23 @@ export function defaultAnimatedStyles (
                 {
                     scale: animatedValue.interpolate({
                         inputRange: [0, 1],
-                        outputRange: [carouselProps.inactiveSlideScale, 1]
-                    })
-                }
-            ]
+                        outputRange: [carouselProps.inactiveSlideScale, 1],
+                    }),
+                },
+            ],
         };
     }
 
     return {
         ...animatedOpacity,
-        ...animatedScale
+        ...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
-) {
+export function shiftAnimatedStyles(_index, animatedValue, carouselProps) {
     let animatedOpacity = {};
     let animatedScale = {};
     let animatedTranslate = {};
@@ -93,8 +83,8 @@ export function shiftAnimatedStyles (
         animatedOpacity = {
             opacity: animatedValue.interpolate({
                 inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideOpacity, 1]
-            })
+                outputRange: [carouselProps.inactiveSlideOpacity, 1],
+            }),
         };
     }
 
@@ -102,24 +92,26 @@ export function shiftAnimatedStyles (
         animatedScale = {
             scale: animatedValue.interpolate({
                 inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideScale, 1]
-            })
+                outputRange: [carouselProps.inactiveSlideScale, 1],
+            }),
         };
     }
 
     if (carouselProps.inactiveSlideShift !== 0) {
-        const translateProp = carouselProps.vertical ? 'translateX' : 'translateY';
+        const translateProp = carouselProps.vertical
+            ? 'translateX'
+            : 'translateY';
         animatedTranslate = {
             [translateProp]: animatedValue.interpolate({
                 inputRange: [0, 1],
-                outputRange: [carouselProps.inactiveSlideShift, 0]
-            })
+                outputRange: [carouselProps.inactiveSlideShift, 0],
+            }),
         };
     }
 
     return {
         ...animatedOpacity,
-        transform: [{ ...animatedScale }, { ...animatedTranslate }]
+        transform: [{ ...animatedScale }, { ...animatedTranslate }],
     };
 }
 
@@ -128,25 +120,26 @@ export function shiftAnimatedStyles (
 // 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 = IS_ANDROID ? [1, 0, -1, -2, -3] : [3, 2, 1, 0, -1];
+export function stackScrollInterpolator(index, carouselProps) {
+    const range = [3, 2, 1, 0, -1];
     const inputRange = getInputRangeFromIndexes(range, index, carouselProps);
     const outputRange = range;
 
-    return { inputRange, outputRange };
+    return {
+        inputRange,
+        outputRange,
+    };
 }
-export function stackAnimatedStyles (
+
+export function stackAnimatedStyles(
     index,
     animatedValue,
     carouselProps,
-    cardOffset
+    cardOffset,
 ) {
-    const sizeRef = carouselProps.vertical ?
-        carouselProps.itemHeight :
-        carouselProps.itemWidth;
+    const sizeRef = carouselProps.vertical
+        ? carouselProps.itemHeight
+        : carouselProps.itemWidth;
     const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';
 
     const card1Scale = 0.9;
@@ -158,77 +151,48 @@ export function stackAnimatedStyles (
         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 offset = Math.round(
+            (newCardOffset * Math.abs(cardIndex)) / scale,
+        );
 
-        return IS_ANDROID ?
-            centeredPosition - edgeAlignment - offset :
-            centeredPosition + edgeAlignment + offset;
+        return centeredPosition + edgeAlignment + offset;
     };
 
     const opacityOutputRange =
-    carouselProps.inactiveSlideOpacity === 1 ? [1, 1, 1, 0] : [1, 0.75, 0.5, 0];
+        carouselProps.inactiveSlideOpacity === 1
+            ? [1, 1, 1, 0]
+            : [1, 0.75, 0.5, 0];
 
-    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'
-                    })
-                }
-            ]
-        };
+    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',
+                }),
+            },
+        ],
+    };
 }
 
 // Tinder animation
@@ -236,31 +200,32 @@ 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
-) {
+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 (
+
+export function tinderAnimatedStyles(
     index,
     animatedValue,
     carouselProps,
-    cardOffset
+    cardOffset,
 ) {
-    const sizeRef = carouselProps.vertical ?
-        carouselProps.itemHeight :
-        carouselProps.itemWidth;
-    const mainTranslateProp = carouselProps.vertical ?
-        'translateY' :
-        'translateX';
-    const secondaryTranslateProp = carouselProps.vertical ?
-        'translateX' :
-        'translateY';
+    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;
@@ -279,103 +244,115 @@ export function tinderAnimatedStyles (
         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)
-                        ],
-                        extrapolate: 'clamp'
-                    })
-                },
-                {
-                    [secondaryTranslateProp]: animatedValue.interpolate({
-                        inputRange: [0, 1, 2, 3],
-                        outputRange: [
-                            0,
-                            getSecondaryTranslateFromScale(1, card1Scale),
-                            getSecondaryTranslateFromScale(2, card2Scale),
-                            getSecondaryTranslateFromScale(3, card3Scale)
-                        ],
-                        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, 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),
+                          ],
+                          extrapolate: 'clamp',
+                      }),
+                  },
+                  {
+                      [secondaryTranslateProp]: animatedValue.interpolate({
+                          inputRange: [0, 1, 2, 3],
+                          outputRange: [
+                              0,
+                              getSecondaryTranslateFromScale(1, card1Scale),
+                              getSecondaryTranslateFromScale(2, card2Scale),
+                              getSecondaryTranslateFromScale(3, card3Scale),
+                          ],
+                          extrapolate: 'clamp',
+                      }),
+                  },
+              ],
+          };
 }

package/pagination/NumberPagination.js

@@ -1,43 +0,0 @@
-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;