@momo-kits/carousel 0.0.10 → 0.0.14

package/Carousel.js

@@ -31,7 +31,7 @@ const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 const IS_RTL = I18nManager.isRTL;
 
 export default class Carousel extends PureComponent {
-    constructor(props) {
+    constructor (props) {
         super(props);
 
         this.state = {
@@ -78,36 +78,29 @@ export default class Carousel extends PureComponent {
         // This bool aims at fixing an iOS bug due to scrollTo that triggers onMomentumScrollEnd.
         // onMomentumScrollEnd fires this._snapScroll, thus creating an infinite loop.
         this._ignoreNextMomentum = false;
-        this._animated = false;
 
         // Warnings
         if (!ViewPropTypes) {
-            console.warn(`react-native-snap-carousel: 
-            It is recommended to use at least version 0.44 of React Native with the plugin`);
+            console.warn('react-native-snap-carousel: It is recommended to use at least version 0.44 of React Native with the plugin');
         }
         if (!props.vertical && (!props.sliderWidth || !props.itemWidth)) {
-            console.warn(`react-native-snap-carousel: You need to specify both sliderWidth and itemWidth 
-            for horizontal carousels`);
+            console.error('react-native-snap-carousel: You need to specify both `sliderWidth` and `itemWidth` for horizontal carousels');
         }
         if (props.vertical && (!props.sliderHeight || !props.itemHeight)) {
-            console.warn(`react-native-snap-carousel: You need to specify both sliderHeight and itemHeight 
-            for vertical carousels`);
+            console.error('react-native-snap-carousel: You need to specify both `sliderHeight` and `itemHeight` for vertical carousels');
         }
         if (props.apparitionDelay && !IS_IOS && !props.useScrollView) {
-            console.warn(`react-native-snap-carousel: Using apparitionDelay on Android 
-            is not recommended since it can lead to rendering issues`);
+            console.warn('react-native-snap-carousel: Using `apparitionDelay` on Android is not recommended since it can lead to rendering issues');
         }
         if (props.customAnimationType || props.customAnimationOptions) {
-            console.warn(`react-native-snap-carousel: Props customAnimationType and 
-            customAnimationOptions have been renamed to activeAnimationType and  activeAnimationOptions`);
+            console.warn('react-native-snap-carousel: Props `customAnimationType` and `customAnimationOptions` have been renamed to `activeAnimationType` and `activeAnimationOptions`');
         }
         if (props.onScrollViewScroll) {
-            console.warn(`react-native-snap-carousel: Prop onScrollViewScroll has been removed. 
-            Use onScroll instead`);
+            console.error('react-native-snap-carousel: Prop `onScrollViewScroll` has been removed. Use `onScroll` instead');
         }
     }
 
-    componentDidMount() {
+    componentDidMount () {
         const { apparitionDelay, autoplay, firstItem } = this.props;
         const _firstItem = this._getFirstItem(firstItem);
         const apparitionCallback = () => {
@@ -139,39 +132,31 @@ export default class Carousel extends PureComponent {
         });
     }
 
-    // shouldComponentUpdate(nextProps, nextState) {
-    //     const { shouldOptimizeUpdates } = this.props;
-    //     if (shouldOptimizeUpdates === false) {
+    // shouldComponentUpdate (nextProps, nextState) {
+    //     if (this.props.shouldOptimizeUpdates === false) {
     //         return true;
+    //     } else {
+    //         return shallowCompare(this, nextProps, nextState);
     //     }
-    //     if (shallowCompare(this.props, nextProps)) {
-    //         return true;
-    //     }
-    //     if (shallowCompare(this.state, nextState)) {
-    //         return true;
-    //     }
-    //     return false;
     // }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    componentDidUpdate (prevProps) {
         const { interpolators } = this.state;
-        const {
-            itemHeight, itemWidth, scrollEnabled, sliderHeight, sliderWidth, onScroll
-        } = this.props;
-        const itemsLength = this._getCustomDataLength(nextProps);
+        const { firstItem, itemHeight, itemWidth, scrollEnabled, sliderHeight, sliderWidth } = this.props;
+        const itemsLength = this._getCustomDataLength(this.props);
 
         if (!itemsLength) {
             return;
         }
 
-        const nextFirstItem = this._getFirstItem(nextProps.firstItem, nextProps);
+        const nextFirstItem = this._getFirstItem(firstItem, this.props);
         let nextActiveItem = this._activeItem || this._activeItem === 0 ? this._activeItem : nextFirstItem;
 
-        const hasNewSliderWidth = nextProps.sliderWidth && nextProps.sliderWidth !== sliderWidth;
-        const hasNewSliderHeight = nextProps.sliderHeight && nextProps.sliderHeight !== sliderHeight;
-        const hasNewItemWidth = nextProps.itemWidth && nextProps.itemWidth !== itemWidth;
-        const hasNewItemHeight = nextProps.itemHeight && nextProps.itemHeight !== itemHeight;
-        const hasNewScrollEnabled = nextProps.scrollEnabled !== scrollEnabled;
+        const hasNewSliderWidth = sliderWidth && sliderWidth !== prevProps.sliderWidth;
+        const hasNewSliderHeight = sliderHeight && sliderHeight !== prevProps.sliderHeight;
+        const hasNewItemWidth = itemWidth && itemWidth !== prevProps.itemWidth;
+        const hasNewItemHeight = itemHeight && itemHeight !== prevProps.itemHeight;
+        const hasNewScrollEnabled = scrollEnabled !== prevProps.scrollEnabled;
 
         // Prevent issues with dynamically removed items
         if (nextActiveItem > itemsLength - 1) {
@@ -180,15 +165,15 @@ export default class Carousel extends PureComponent {
 
         // Handle changing scrollEnabled independent of user -> carousel interaction
         if (hasNewScrollEnabled) {
-            this._setScrollEnabled(nextProps.scrollEnabled);
+            this._setScrollEnabled(scrollEnabled);
         }
 
-        if (interpolators.length !== itemsLength || hasNewSliderWidth
-            || hasNewSliderHeight || hasNewItemWidth || hasNewItemHeight) {
+        if (interpolators.length !== itemsLength || hasNewSliderWidth ||
+            hasNewSliderHeight || hasNewItemWidth || hasNewItemHeight) {
             this._activeItem = nextActiveItem;
             this._previousItemsLength = itemsLength;
 
-            this._initPositionsAndInterpolators(nextProps);
+            this._initPositionsAndInterpolators(this.props);
 
             // Handle scroll issue when dynamically removing items (see #133)
             // This also fixes first item's active state on Android
@@ -206,12 +191,12 @@ export default class Carousel extends PureComponent {
             this._snapToItem(nextFirstItem, false, true, false, false);
         }
 
-        if (nextProps.onScroll !== onScroll) {
-            this._setScrollHandler(nextProps);
+        if (this.props.onScroll !== prevProps.onScroll) {
+          this._setScrollHandler(this.props);
         }
     }
 
-    componentWillUnmount() {
+    componentWillUnmount () {
         this._mounted = false;
         this.stopAutoplay();
         clearTimeout(this._apparitionTimeout);
@@ -223,101 +208,98 @@ export default class Carousel extends PureComponent {
         clearTimeout(this._lockScrollTimeout);
     }
 
-    get realIndex() {
+    get realIndex () {
         return this._activeItem;
     }
 
-    get currentIndex() {
+    get currentIndex () {
         return this._getDataIndex(this._activeItem);
     }
 
-    get currentScrollPosition() {
+    get currentScrollPosition () {
         return this._currentContentOffset;
     }
 
     _setScrollHandler(props) {
-        // Native driver for scroll events
-        const scrollEventConfig = {
-            listener: this._onScroll,
-            useNativeDriver: true,
-        };
-        this._scrollPos = new Animated.Value(0);
-        const argMapping = props.vertical
-            ? [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }]
-            : [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }];
-
-        if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
-            // Because of a react-native issue https://github.com/facebook/react-native/issues/13294
-            argMapping.pop();
-            const [argMap] = props.onScroll._argMapping;
-            if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
-                // Shares the same animated value passed in props
-                this._scrollPos = argMap.nativeEvent.contentOffset.x
-                    || argMap.nativeEvent.contentOffset.y
-                    || this._scrollPos;
-            }
-            argMapping.push(...props.onScroll._argMapping);
-        }
-        this._onScrollHandler = Animated.event(
-            argMapping,
-            scrollEventConfig
-        );
-    }
-
-    _needsScrollView() {
+      // Native driver for scroll events
+      const scrollEventConfig = {
+        listener: this._onScroll,
+        useNativeDriver: true,
+      };
+      this._scrollPos = new Animated.Value(0);
+      const argMapping = props.vertical
+        ? [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }]
+        : [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }];
+
+      if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
+        // Because of a react-native issue https://github.com/facebook/react-native/issues/13294
+        argMapping.pop();
+        const [ argMap ] = props.onScroll._argMapping;
+        if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
+          // Shares the same animated value passed in props
+          this._scrollPos =
+            argMap.nativeEvent.contentOffset.x ||
+            argMap.nativeEvent.contentOffset.y ||
+            this._scrollPos;
+        }
+        argMapping.push(...props.onScroll._argMapping);
+      }
+      this._onScrollHandler = Animated.event(
+        argMapping,
+        scrollEventConfig
+      );
+    }
+
+    _needsScrollView () {
         const { useScrollView } = this.props;
         return useScrollView || !AnimatedFlatList || this._shouldUseStackLayout() || this._shouldUseTinderLayout();
     }
 
-    _needsRTLAdaptations() {
+    _needsRTLAdaptations () {
         const { vertical } = this.props;
         return IS_RTL && !IS_IOS && !vertical;
     }
 
-    _canLockScroll() {
+    _canLockScroll () {
         const { scrollEnabled, enableMomentum, lockScrollWhileSnapping } = this.props;
         return scrollEnabled && !enableMomentum && lockScrollWhileSnapping;
     }
 
-    _enableLoop() {
+    _enableLoop () {
         const { data, enableSnap, loop } = this.props;
         return enableSnap && loop && data && data.length && data.length > 1;
     }
 
-    _shouldAnimateSlides(props = this.props) {
-        const {
-            inactiveSlideOpacity, inactiveSlideScale, scrollInterpolator, slideInterpolatedStyle
-        } = props;
-        return inactiveSlideOpacity < 1
-            || inactiveSlideScale < 1
-            || !!scrollInterpolator
-            || !!slideInterpolatedStyle
-            || this._shouldUseShiftLayout()
-            || this._shouldUseStackLayout()
-            || this._shouldUseTinderLayout();
-    }
-
-    _shouldUseCustomAnimation() {
+    _shouldAnimateSlides (props = this.props) {
+        const { inactiveSlideOpacity, inactiveSlideScale, scrollInterpolator, slideInterpolatedStyle } = props;
+        return inactiveSlideOpacity < 1 ||
+            inactiveSlideScale < 1 ||
+            !!scrollInterpolator ||
+            !!slideInterpolatedStyle ||
+            this._shouldUseShiftLayout() ||
+            this._shouldUseStackLayout() ||
+            this._shouldUseTinderLayout();
+    }
+
+    _shouldUseCustomAnimation () {
         const { activeAnimationOptions } = this.props;
         return !!activeAnimationOptions && !this._shouldUseStackLayout() && !this._shouldUseTinderLayout();
     }
 
-    _shouldUseShiftLayout() {
+    _shouldUseShiftLayout () {
         const { inactiveSlideShift, layout } = this.props;
         return layout === 'default' && inactiveSlideShift !== 0;
     }
 
-    _shouldUseStackLayout() {
-        const { layout } = this.props;
-        return layout === 'stack';
+    _shouldUseStackLayout () {
+        return this.props.layout === 'stack';
     }
 
-    _shouldUseTinderLayout() {
-        const { layout } = this.props;
-        return layout === 'tinder';
+    _shouldUseTinderLayout () {
+        return this.props.layout === 'tinder';
     }
 
-    _getCustomData(props = this.props) {
+    _getCustomData (props = this.props) {
         const { data, loopClonesPerSide } = props;
         const dataLength = data && data.length;
 
@@ -336,7 +318,7 @@ export default class Carousel extends PureComponent {
             const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
             const remainder = loopClonesPerSide % dataLength;
 
-            for (let i = 0; i < dataMultiplier; i += 1) {
+            for (let i = 0; i < dataMultiplier; i++) {
                 previousItems.push(...data);
                 nextItems.push(...data);
             }
@@ -347,10 +329,11 @@ export default class Carousel extends PureComponent {
             previousItems = data.slice(-loopClonesPerSide);
             nextItems = data.slice(0, loopClonesPerSide);
         }
+
         return previousItems.concat(data, nextItems);
     }
 
-    _getCustomDataLength(props = this.props) {
+    _getCustomDataLength (props = this.props) {
         const { data, loopClonesPerSide } = props;
         const dataLength = data && data.length;
 
@@ -361,7 +344,7 @@ export default class Carousel extends PureComponent {
         return this._enableLoop() ? dataLength + (2 * loopClonesPerSide) : dataLength;
     }
 
-    _getCustomIndex(index, props = this.props) {
+    _getCustomIndex (index, props = this.props) {
         const itemsLength = this._getCustomDataLength(props);
 
         if (!itemsLength || (!index && index !== 0)) {
@@ -371,7 +354,7 @@ export default class Carousel extends PureComponent {
         return this._needsRTLAdaptations() ? itemsLength - index - 1 : index;
     }
 
-    _getDataIndex(index) {
+    _getDataIndex (index) {
         const { data, loopClonesPerSide } = this.props;
         const dataLength = data && data.length;
 
@@ -380,10 +363,10 @@ export default class Carousel extends PureComponent {
         }
 
         if (index >= dataLength + loopClonesPerSide) {
-            return loopClonesPerSide > dataLength
-                ? (index - loopClonesPerSide) % dataLength
-                : index - dataLength - loopClonesPerSide;
-        } if (index < loopClonesPerSide) {
+            return loopClonesPerSide > dataLength ?
+                (index - loopClonesPerSide) % dataLength :
+                index - dataLength - loopClonesPerSide;
+        } else if (index < loopClonesPerSide) {
             // TODO: is there a simpler way of determining the interpolated index?
             if (loopClonesPerSide > dataLength) {
                 const baseDataIndexes = [];
@@ -391,29 +374,31 @@ export default class Carousel extends PureComponent {
                 const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
                 const remainder = loopClonesPerSide % dataLength;
 
-                for (let i = 0; i < dataLength; i += 1) {
+                for (let i = 0; i < dataLength; i++) {
                     baseDataIndexes.push(i);
                 }
 
-                for (let j = 0; j < dataMultiplier; j += 1) {
+                for (let j = 0; j < dataMultiplier; j++) {
                     dataIndexes.push(...baseDataIndexes);
                 }
 
                 dataIndexes.unshift(...baseDataIndexes.slice(-remainder));
                 return dataIndexes[index];
+            } else {
+                return index + dataLength - loopClonesPerSide;
             }
-            return index + dataLength - loopClonesPerSide;
+        } else {
+            return index - loopClonesPerSide;
         }
-        return index - loopClonesPerSide;
     }
 
     // Used with `snapToItem()` and 'PaginationDot'
-    _getPositionIndex(index) {
+    _getPositionIndex (index) {
         const { loop, loopClonesPerSide } = this.props;
         return loop ? index + loopClonesPerSide : index;
     }
 
-    _getFirstItem(index, props = this.props) {
+    _getFirstItem (index, props = this.props) {
         const { loopClonesPerSide } = props;
         const itemsLength = this._getCustomDataLength(props);
 
@@ -424,10 +409,10 @@ export default class Carousel extends PureComponent {
         return this._enableLoop() ? index + loopClonesPerSide : index;
     }
 
-    _getWrappedRef() {
+    _getWrappedRef () {
         if (this._carouselRef && (
-            (this._needsScrollView() && this._carouselRef.scrollTo)
-            || (!this._needsScrollView() && this._carouselRef.scrollToOffset)
+            (this._needsScrollView() && this._carouselRef.scrollTo) ||
+            (!this._needsScrollView() && this._carouselRef.scrollToOffset)
         )) {
             return this._carouselRef;
         }
@@ -436,11 +421,11 @@ export default class Carousel extends PureComponent {
         return this._carouselRef && this._carouselRef.getNode && this._carouselRef.getNode();
     }
 
-    _getScrollEnabled() {
+    _getScrollEnabled () {
         return this._scrollEnabled;
     }
 
-    _setScrollEnabled(scrollEnabled = true) {
+    _setScrollEnabled (scrollEnabled = true) {
         const wrappedRef = this._getWrappedRef();
 
         if (!wrappedRef || !wrappedRef.setNativeProps) {
@@ -453,56 +438,54 @@ export default class Carousel extends PureComponent {
         this._scrollEnabled = scrollEnabled;
     }
 
-    _getKeyExtractor(item, index) {
+    _getKeyExtractor (item, index) {
         return this._needsScrollView() ? `scrollview-item-${index}` : `flatlist-item-${index}`;
     }
 
-    _getScrollOffset(event) {
+    _getScrollOffset (event) {
         const { vertical } = this.props;
-        return (event && event.nativeEvent && event.nativeEvent.contentOffset
-            && event.nativeEvent.contentOffset[vertical ? 'y' : 'x']) || 0;
+        return (event && event.nativeEvent && event.nativeEvent.contentOffset &&
+            event.nativeEvent.contentOffset[vertical ? 'y' : 'x']) || 0;
     }
 
-    _getContainerInnerMargin(opposite = false) {
-        const {
-            sliderWidth, sliderHeight, itemWidth, itemHeight, vertical, activeSlideAlignment
-        } = this.props;
+    _getContainerInnerMargin (opposite = false) {
+        const { sliderWidth, sliderHeight, itemWidth, itemHeight, vertical, activeSlideAlignment } = this.props;
 
-        if ((activeSlideAlignment === 'start' && !opposite)
-            || (activeSlideAlignment === 'end' && opposite)) {
+        if ((activeSlideAlignment === 'start' && !opposite) ||
+            (activeSlideAlignment === 'end' && opposite)) {
             return 0;
-        } if ((activeSlideAlignment === 'end' && !opposite)
-            || (activeSlideAlignment === 'start' && opposite)) {
+        } else if ((activeSlideAlignment === 'end' && !opposite) ||
+            (activeSlideAlignment === 'start' && opposite)) {
             return vertical ? sliderHeight - itemHeight : sliderWidth - itemWidth;
+        } else {
+            return vertical ? (sliderHeight - itemHeight) / 2 : (sliderWidth - itemWidth) / 2;
         }
-        return vertical ? (sliderHeight - itemHeight) / 2 : (sliderWidth - itemWidth) / 2;
     }
 
-    _getViewportOffset() {
-        const {
-            sliderWidth, sliderHeight, itemWidth, itemHeight, vertical, activeSlideAlignment
-        } = this.props;
+    _getViewportOffset () {
+        const { sliderWidth, sliderHeight, itemWidth, itemHeight, vertical, activeSlideAlignment } = this.props;
 
         if (activeSlideAlignment === 'start') {
             return vertical ? itemHeight / 2 : itemWidth / 2;
-        } if (activeSlideAlignment === 'end') {
-            return vertical
-                ? sliderHeight - (itemHeight / 2)
-                : sliderWidth - (itemWidth / 2);
+        } else if (activeSlideAlignment === 'end') {
+            return vertical ?
+                sliderHeight - (itemHeight / 2) :
+                sliderWidth - (itemWidth / 2);
+        } else {
+            return vertical ? sliderHeight / 2 : sliderWidth / 2;
         }
-        return vertical ? sliderHeight / 2 : sliderWidth / 2;
     }
 
-    _getCenter(offset) {
+    _getCenter (offset) {
         return offset + this._getViewportOffset() - this._getContainerInnerMargin();
     }
 
-    _getActiveItem(offset) {
+    _getActiveItem (offset) {
         const { activeSlideOffset, swipeThreshold } = this.props;
         const center = this._getCenter(offset);
         const centerOffset = activeSlideOffset || swipeThreshold;
 
-        for (let i = 0; i < this._positions.length; i += 1) {
+        for (let i = 0; i < this._positions.length; i++) {
             const { start, end } = this._positions[i];
             if (center + centerOffset >= start && center - centerOffset <= end) {
                 return i;
@@ -517,17 +500,15 @@ export default class Carousel extends PureComponent {
         return 0;
     }
 
-    _initPositionsAndInterpolators(props = this.props) {
-        const {
-            data, itemWidth, itemHeight, scrollInterpolator, vertical
-        } = props;
+    _initPositionsAndInterpolators (props = this.props) {
+        const { data, itemWidth, itemHeight, scrollInterpolator, vertical } = props;
         const sizeRef = vertical ? itemHeight : itemWidth;
 
         if (!data || !data.length) {
             return;
         }
 
-        const interpolators = [];
+        let interpolators = [];
         this._positions = [];
 
         this._getCustomData(props).forEach((itemData, index) => {
@@ -554,7 +535,7 @@ export default class Carousel extends PureComponent {
                     interpolator = tinderScrollInterpolator(_index, props);
                 }
 
-                if (!interpolator || !interpolator?.inputRange || !interpolator?.outputRange) {
+                if (!interpolator || !interpolator.inputRange || !interpolator.outputRange) {
                     interpolator = defaultScrollInterpolator(_index, props);
                 }
 
@@ -566,10 +547,11 @@ export default class Carousel extends PureComponent {
 
             interpolators.push(animatedValue);
         });
+
         this.setState({ interpolators });
     }
 
-    _getSlideAnimation(index, toValue) {
+    _getSlideAnimation (index, toValue) {
         const { interpolators } = this.state;
         const { activeAnimationType, activeAnimationOptions } = this.props;
 
@@ -583,11 +565,11 @@ export default class Carousel extends PureComponent {
             isInteraction: false,
             useNativeDriver: true,
             ...activeAnimationOptions,
-            toValue
+            toValue: toValue
         };
 
         return Animated.parallel([
-            Animated.timing(
+            Animated['timing'](
                 animatedValue,
                 { ...animationCommonOptions, easing: Easing.linear }
             ),
@@ -598,18 +580,18 @@ export default class Carousel extends PureComponent {
         ]);
     }
 
-    _playCustomSlideAnimation(current, next) {
+    _playCustomSlideAnimation (current, next) {
         const { interpolators } = this.state;
         const itemsLength = this._getCustomDataLength();
         const _currentIndex = this._getCustomIndex(current);
         const _currentDataIndex = this._getDataIndex(_currentIndex);
         const _nextIndex = this._getCustomIndex(next);
         const _nextDataIndex = this._getDataIndex(_nextIndex);
-        const animations = [];
+        let animations = [];
 
         // Keep animations in sync when looping
         if (this._enableLoop()) {
-            for (let i = 0; i < itemsLength; i += 1) {
+            for (let i = 0; i < itemsLength; i++) {
                 if (this._getDataIndex(i) === _currentDataIndex && interpolators[i]) {
                     animations.push(this._getSlideAnimation(i, 0));
                 } else if (this._getDataIndex(i) === _nextDataIndex && interpolators[i]) {
@@ -628,7 +610,7 @@ export default class Carousel extends PureComponent {
         Animated.parallel(animations, { stopTogether: false }).start();
     }
 
-    _hackActiveSlideAnimation(index, goTo, force = false) {
+    _hackActiveSlideAnimation (index, goTo, force = false) {
         const { data } = this.props;
 
         if (!this._mounted || !this._carouselRef || !this._positions[index] || (!force && this._enableLoop())) {
@@ -652,7 +634,7 @@ export default class Carousel extends PureComponent {
         }, 50); // works randomly when set to '0'
     }
 
-    _lockScroll() {
+    _lockScroll () {
         const { lockScrollTimeoutDuration } = this.props;
         clearTimeout(this._lockScrollTimeout);
         this._lockScrollTimeout = setTimeout(() => {
@@ -661,17 +643,17 @@ export default class Carousel extends PureComponent {
         this._setScrollEnabled(false);
     }
 
-    _releaseScroll() {
+    _releaseScroll () {
         clearTimeout(this._lockScrollTimeout);
         this._setScrollEnabled(true);
     }
 
-    _repositionScroll(index) {
+    _repositionScroll (index) {
         const { data, loopClonesPerSide } = this.props;
         const dataLength = data && data.length;
 
-        if (!this._enableLoop() || !dataLength
-            || (index >= loopClonesPerSide && index < dataLength + loopClonesPerSide)) {
+        if (!this._enableLoop() || !dataLength ||
+            (index >= loopClonesPerSide && index < dataLength + loopClonesPerSide)) {
             return;
         }
 
@@ -682,10 +664,11 @@ export default class Carousel extends PureComponent {
         } else if (index < loopClonesPerSide) {
             repositionTo = index + dataLength;
         }
+
         this._snapToItem(repositionTo, false, false, false, false);
     }
 
-    _scrollTo(offset, animated = true) {
+    _scrollTo (offset, animated = true) {
         const { vertical } = this.props;
         const wrappedRef = this._getWrappedRef();
 
@@ -704,25 +687,22 @@ export default class Carousel extends PureComponent {
             animated
         };
 
-        setTimeout(() => {
-            if (this._needsScrollView()) {
-                wrappedRef.scrollTo(options);
-            } else {
-                wrappedRef.scrollToOffset(options);
-            }
-        }, (!animated && this._animated) ? 200 : 0);
-
-        this._animated = animated;
+        if (this._needsScrollView()) {
+            wrappedRef.scrollTo(options);
+        } else {
+            wrappedRef.scrollToOffset(options);
+        }
     }
 
-    _onScroll(event) {
+    _onScroll (event) {
         const { callbackOffsetMargin, enableMomentum, onScroll } = this.props;
 
         const scrollOffset = event ? this._getScrollOffset(event) : this._currentContentOffset;
         const nextActiveItem = this._getActiveItem(scrollOffset);
         const itemReached = nextActiveItem === this._itemToSnapTo;
-        const scrollConditions = scrollOffset >= this._scrollOffsetRef - callbackOffsetMargin
-            && scrollOffset <= this._scrollOffsetRef + callbackOffsetMargin;
+        const scrollConditions =
+            scrollOffset >= this._scrollOffsetRef - callbackOffsetMargin &&
+            scrollOffset <= this._scrollOffsetRef + callbackOffsetMargin;
 
         this._currentContentOffset = scrollOffset;
         this._onScrollTriggered = true;
@@ -765,17 +745,18 @@ export default class Carousel extends PureComponent {
                 }
             }
         }
-        if (nextActiveItem === this._itemToSnapTo
-            && scrollOffset === this._scrollOffsetRef) {
+
+        if (nextActiveItem === this._itemToSnapTo &&
+            scrollOffset === this._scrollOffsetRef) {
             this._repositionScroll(nextActiveItem);
         }
 
-        if (typeof onScroll === 'function' && event) {
+        if (typeof onScroll === "function" && event) {
             onScroll(event);
         }
     }
 
-    _onStartShouldSetResponderCapture(event) {
+    _onStartShouldSetResponderCapture (event) {
         const { onStartShouldSetResponderCapture } = this.props;
 
         if (onStartShouldSetResponderCapture) {
@@ -785,34 +766,34 @@ export default class Carousel extends PureComponent {
         return this._getScrollEnabled();
     }
 
-    _onTouchStart() {
-        const { onTouchStart } = this.props;
+    _onTouchStart () {
+        const { onTouchStart } = this.props
 
         // `onTouchStart` is fired even when `scrollEnabled` is set to `false`
         if (this._getScrollEnabled() !== false && this._autoplaying) {
-            this.stopAutoplay();
+            this.pauseAutoPlay();
         }
 
         if (onTouchStart) {
-            onTouchStart();
+            onTouchStart()
         }
     }
 
-    _onTouchEnd() {
-        const { onTouchEnd, autoplay } = this.props;
+    _onTouchEnd () {
+        const { onTouchEnd } = this.props
 
-        if (this._getScrollEnabled() !== false && autoplay && !this._autoplaying) {
+        if (this._getScrollEnabled() !== false && this._autoplay && !this._autoplaying) {
             // This event is buggy on Android, so a fallback is provided in _onScrollEnd()
             this.startAutoplay();
         }
 
         if (onTouchEnd) {
-            onTouchEnd();
+            onTouchEnd()
         }
     }
 
     // Used when `enableSnap` is ENABLED
-    _onScrollBeginDrag(event) {
+    _onScrollBeginDrag (event) {
         const { onScrollBeginDrag } = this.props;
 
         if (!this._getScrollEnabled()) {
@@ -830,11 +811,11 @@ export default class Carousel extends PureComponent {
     }
 
     // Used when `enableMomentum` is DISABLED
-    _onScrollEndDrag(event) {
+    _onScrollEndDrag (event) {
         const { onScrollEndDrag } = this.props;
 
         if (this._carouselRef) {
-            if (this._onScrollEnd) this._onScrollEnd();
+            this._onScrollEnd && this._onScrollEnd();
         }
 
         if (onScrollEndDrag) {
@@ -843,11 +824,11 @@ export default class Carousel extends PureComponent {
     }
 
     // Used when `enableMomentum` is ENABLED
-    _onMomentumScrollEnd(event) {
+    _onMomentumScrollEnd (event) {
         const { onMomentumScrollEnd } = this.props;
 
         if (this._carouselRef) {
-            if (this._onScrollEnd) this._onScrollEnd();
+            this._onScrollEnd && this._onScrollEnd();
         }
 
         if (onMomentumScrollEnd) {
@@ -855,8 +836,8 @@ export default class Carousel extends PureComponent {
         }
     }
 
-    _onScrollEnd() {
-        const { autoplay, autoplayDelay, enableSnap } = this.props;
+    _onScrollEnd (event) {
+        const { autoplayDelay, enableSnap } = this.props;
 
         if (this._ignoreNextMomentum) {
             // iOS fix
@@ -864,6 +845,10 @@ export default class Carousel extends PureComponent {
             return;
         }
 
+        if (this._currentContentOffset === this._scrollEndOffset) {
+            return;
+        }
+
         this._scrollEndOffset = this._currentContentOffset;
         this._scrollEndActive = this._getActiveItem(this._scrollEndOffset);
 
@@ -873,7 +858,7 @@ export default class Carousel extends PureComponent {
 
         // The touchEnd event is buggy on Android, so this will serve as a fallback whenever needed
         // https://github.com/facebook/react-native/issues/9439
-        if (autoplay && !this._autoplaying) {
+        if (this._autoplay && !this._autoplaying) {
             clearTimeout(this._enableAutoplayTimeout);
             this._enableAutoplayTimeout = setTimeout(() => {
                 this.startAutoplay();
@@ -884,7 +869,7 @@ export default class Carousel extends PureComponent {
     // Due to a bug, this event is only fired on iOS
     // https://github.com/facebook/react-native/issues/6791
     // it's fine since we're only fixing an iOS bug in it, so ...
-    _onTouchRelease() {
+    _onTouchRelease (event) {
         const { enableMomentum } = this.props;
 
         if (enableMomentum && IS_IOS) {
@@ -895,7 +880,7 @@ export default class Carousel extends PureComponent {
         }
     }
 
-    _onLayout(event) {
+    _onLayout (event) {
         const { onLayout } = this.props;
 
         // Prevent unneeded actions during the first 'onLayout' (triggered on init)
@@ -911,7 +896,7 @@ export default class Carousel extends PureComponent {
         }
     }
 
-    _snapScroll(delta) {
+    _snapScroll (delta) {
         const { swipeThreshold } = this.props;
 
         // When using momentum and releasing the touch with
@@ -944,7 +929,7 @@ export default class Carousel extends PureComponent {
         }
     }
 
-    _snapToItem(index, animated = true, fireCallback = true, initial = false, lockScroll = true) {
+    _snapToItem (index, animated = true, fireCallback = true, initial = false, lockScroll = true) {
         const { enableMomentum, onSnapToItem, onBeforeSnapToItem } = this.props;
         const itemsLength = this._getCustomDataLength();
         const wrappedRef = this._getWrappedRef();
@@ -988,9 +973,11 @@ export default class Carousel extends PureComponent {
 
         this._scrollTo(this._scrollOffsetRef, animated);
 
+        this._scrollEndOffset = this._currentContentOffset;
+
         if (enableMomentum) {
             // iOS fix, check the note in the constructor
-            if (IS_IOS && !initial) {
+            if (!initial) {
                 this._ignoreNextMomentum = true;
             }
 
@@ -1011,7 +998,7 @@ export default class Carousel extends PureComponent {
         }
     }
 
-    _onBeforeSnap(index) {
+    _onBeforeSnap (index) {
         const { onBeforeSnapToItem } = this.props;
 
         if (!this._carouselRef) {
@@ -1019,10 +1006,10 @@ export default class Carousel extends PureComponent {
         }
 
         this._canFireBeforeCallback = false;
-        if (onBeforeSnapToItem) onBeforeSnapToItem(index);
+        onBeforeSnapToItem && onBeforeSnapToItem(index);
     }
 
-    _onSnap(index) {
+    _onSnap (index) {
         const { onSnapToItem } = this.props;
 
         if (!this._carouselRef) {
@@ -1030,11 +1017,12 @@ export default class Carousel extends PureComponent {
         }
 
         this._canFireCallback = false;
-        if (onSnapToItem) onSnapToItem(index);
+        onSnapToItem && onSnapToItem(index);
     }
 
-    startAutoplay() {
+    startAutoplay () {
         const { autoplayInterval, autoplayDelay } = this.props;
+        this._autoplay = true;
 
         if (this._autoplaying) {
             return;
@@ -1051,12 +1039,19 @@ export default class Carousel extends PureComponent {
         }, autoplayDelay);
     }
 
-    stopAutoplay() {
+    pauseAutoPlay () {
         this._autoplaying = false;
+        clearTimeout(this._autoplayTimeout);
+        clearTimeout(this._enableAutoplayTimeout);
         clearInterval(this._autoplayInterval);
     }
 
-    snapToItem(index, animated = true, fireCallback = true) {
+    stopAutoplay () {
+        this._autoplay = false;
+        this.pauseAutoPlay();
+    }
+
+    snapToItem (index, animated = true, fireCallback = true) {
         if (!index || index < 0) {
             index = 0;
         }
@@ -1070,7 +1065,7 @@ export default class Carousel extends PureComponent {
         this._snapToItem(positionIndex, animated, fireCallback);
     }
 
-    snapToNext(animated = true, fireCallback = true) {
+    snapToNext (animated = true, fireCallback = true) {
         const itemsLength = this._getCustomDataLength();
 
         let newIndex = this._activeItem + 1;
@@ -1083,7 +1078,7 @@ export default class Carousel extends PureComponent {
         this._snapToItem(newIndex, animated, fireCallback);
     }
 
-    snapToPrev(animated = true, fireCallback = true) {
+    snapToPrev (animated = true, fireCallback = true) {
         const itemsLength = this._getCustomDataLength();
 
         let newIndex = this._activeItem - 1;
@@ -1097,7 +1092,7 @@ export default class Carousel extends PureComponent {
     }
 
     // https://github.com/facebook/react-native/issues/1831#issuecomment-231069668
-    triggerRenderingHack(offset) {
+    triggerRenderingHack (offset) {
         // Avoid messing with user scroll
         if (Date.now() - this._lastScrollDate < 500) {
             return;
@@ -1112,22 +1107,23 @@ export default class Carousel extends PureComponent {
         this._scrollTo(scrollPosition + scrollOffset, false);
     }
 
-    _getSlideInterpolatedStyle(index, animatedValue) {
+    _getSlideInterpolatedStyle (index, animatedValue) {
         const { layoutCardOffset, slideInterpolatedStyle } = this.props;
 
         if (slideInterpolatedStyle) {
             return slideInterpolatedStyle(index, animatedValue, this.props);
-        } if (this._shouldUseTinderLayout()) {
+        } else if (this._shouldUseTinderLayout()) {
             return tinderAnimatedStyles(index, animatedValue, this.props, layoutCardOffset);
-        } if (this._shouldUseStackLayout()) {
+        } else if (this._shouldUseStackLayout()) {
             return stackAnimatedStyles(index, animatedValue, this.props, layoutCardOffset);
-        } if (this._shouldUseShiftLayout()) {
+        } else if (this._shouldUseShiftLayout()) {
             return shiftAnimatedStyles(index, animatedValue, this.props);
+        } else {
+            return defaultAnimatedStyles(index, animatedValue, this.props);
         }
-        return defaultAnimatedStyles(index, animatedValue, this.props);
     }
 
-    _renderItem({ item, index }) {
+    _renderItem ({ item, index }) {
         const { interpolators } = this.state;
         const {
             hasParallaxImages,
@@ -1138,8 +1134,7 @@ export default class Carousel extends PureComponent {
             sliderHeight,
             sliderWidth,
             slideStyle,
-            vertical,
-            isCustomScrollWidth
+            vertical
         } = this.props;
 
         const animatedValue = interpolators && interpolators[index];
@@ -1149,7 +1144,7 @@ export default class Carousel extends PureComponent {
         }
 
         const animate = this._shouldAnimateSlides();
-        const ComponentView = animate ? Animated.View : View;
+        const Component = animate ? Animated.View : View;
         const animatedStyle = animate ? this._getSlideInterpolatedStyle(index, animatedValue) : {};
 
         const parallaxProps = hasParallaxImages ? {
@@ -1162,24 +1157,19 @@ export default class Carousel extends PureComponent {
             itemHeight
         } : undefined;
 
+        const mainDimension = vertical ? { height: itemHeight } : { width: itemWidth };
         const specificProps = this._needsScrollView() ? {
             key: keyExtractor ? keyExtractor(item, index) : this._getKeyExtractor(item, index)
         } : {};
-        const mainDimension = isCustomScrollWidth ? {} : { width: itemWidth };
+
         return (
-            <ComponentView
-                style={[mainDimension, slideStyle, animatedStyle]}
-                pointerEvents="box-none"
-                {...specificProps}
-            >
-                {renderItem({
-                    item, index, realIndex: this._getDataIndex(index), activeIndex: this._getDataIndex(this._activeItem)
-                }, parallaxProps)}
-            </ComponentView>
+            <Component style={[mainDimension, slideStyle, animatedStyle]} pointerEvents={'box-none'} {...specificProps}>
+                { renderItem({ item, index, realIndex: this._getDataIndex(index), activeIndex: this._getDataIndex(this._activeItem) }, parallaxProps) }
+            </Component>
         );
     }
 
-    _getComponentOverridableProps() {
+    _getComponentOverridableProps () {
         const {
             enableMomentum,
             itemWidth,
@@ -1190,18 +1180,18 @@ export default class Carousel extends PureComponent {
             vertical
         } = this.props;
 
-        const visibleItems = Math.ceil(vertical
-            ? sliderHeight / itemHeight
-            : sliderWidth / itemWidth) + 1;
+        const visibleItems = Math.ceil(vertical ?
+            sliderHeight / itemHeight :
+            sliderWidth / itemWidth) + 1;
         const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
         const initialNumToRender = visibleItems + (initialNumPerSide * 2);
         const maxToRenderPerBatch = 1 + (initialNumToRender * 2);
         const windowSize = maxToRenderPerBatch;
 
         const specificProps = !this._needsScrollView() ? {
-            initialNumToRender,
-            maxToRenderPerBatch,
-            windowSize
+            initialNumToRender: initialNumToRender,
+            maxToRenderPerBatch: maxToRenderPerBatch,
+            windowSize: windowSize
             // updateCellsBatchingPeriod
         } : {};
 
@@ -1221,7 +1211,7 @@ export default class Carousel extends PureComponent {
         };
     }
 
-    _getComponentStaticProps() {
+    _getComponentStaticProps () {
         const { hideCarousel } = this.state;
         const {
             containerCustomStyle,
@@ -1236,11 +1226,11 @@ export default class Carousel extends PureComponent {
         const containerStyle = [
             containerCustomStyle || style || {},
             hideCarousel ? { opacity: 0 } : {},
-            vertical
-                ? { height: sliderHeight, flexDirection: 'column' }
+            vertical ?
+                { height: 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: sliderWidth, flexDirection: this._needsRTLAdaptations() ? 'row-reverse' : 'row' }
+                { width: sliderWidth, flexDirection: this._needsRTLAdaptations() ? 'row-reverse' : 'row' }
         ];
         const contentContainerStyle = [
             vertical ? {
@@ -1257,15 +1247,14 @@ export default class Carousel extends PureComponent {
             // extraData: this.state,
             renderItem: this._renderItem,
             numColumns: 1,
-            getItemLayout: undefined, // see #193
-            initialScrollIndex: undefined, // see #193
             keyExtractor: keyExtractor || this._getKeyExtractor
         } : {};
+
         return {
-            ref: (c) => this._carouselRef = c,
+            ref: c => this._carouselRef = c,
             data: this._getCustomData(),
             style: containerStyle,
-            contentContainerStyle,
+            contentContainerStyle: contentContainerStyle,
             horizontal: !vertical,
             scrollEventThrottle: 1,
             onScroll: this._onScrollHandler,
@@ -1281,7 +1270,7 @@ export default class Carousel extends PureComponent {
         };
     }
 
-    render() {
+    render () {
         const { data, renderItem, useScrollView } = this.props;
 
         if (!data || !renderItem) {
@@ -1294,14 +1283,14 @@ export default class Carousel extends PureComponent {
             ...this._getComponentStaticProps()
         };
 
-        const ScrollViewComponent = typeof useScrollView === 'function' ? useScrollView : AnimatedScrollView;
+        const ScrollViewComponent = typeof useScrollView === 'function' ? useScrollView : AnimatedScrollView
 
         return this._needsScrollView() ? (
             <ScrollViewComponent {...props}>
                 {
-                    this._getCustomData().map((item, index) => this._renderItem({
-                        item, index, realIndex: this._getDataIndex(index), activeIndex: this._getDataIndex(this._activeItem)
-                    }))
+                    this._getCustomData().map((item, index) => {
+                        return this._renderItem({ item, index, realIndex: this._getDataIndex(index), activeIndex: this._getDataIndex(this._activeItem) });
+                    })
                 }
             </ScrollViewComponent>
         ) : (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/carousel",
-  "version": "0.0.10",
+  "version": "0.0.14",
   "private": false,
   "main": "index.js",
   "dependencies": {