@momo-kits/carousel 0.79.6 → 0.80.1-beta.2

package/index.tsx

@@ -0,0 +1,970 @@
+import React from 'react';
+import {
+  Animated,
+  Dimensions,
+  I18nManager,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  View,
+} from 'react-native';
+import {defaultAnimatedStyles, defaultScrollInterpolator} from './animation';
+import {CarouselProps, CarouselState, Position} from './types';
+import {Spacing} from '@momo-kits/foundation';
+
+const IS_ANDROID = Platform.OS === 'android';
+const IS_IOS = Platform.OS === 'ios';
+const IS_RTL = I18nManager.isRTL;
+const screenWidth = Dimensions.get('window').width;
+
+export default class Carousel extends React.PureComponent<
+  CarouselProps,
+  CarouselState
+> {
+  static defaultProps = {
+    activeSlideAlignment: 'center',
+    activeSlideOffset: 20,
+    apparitionDelay: 0,
+    autoplay: false,
+    autoplayDelay: 1000,
+    autoplayInterval: 3000,
+    callbackOffsetMargin: 5,
+    containerCustomStyle: {},
+    contentContainerCustomStyle: {},
+    enableSnap: true,
+    firstItem: 0,
+    hasParallaxImages: false,
+    inactiveSlideOpacity: 0.7,
+    inactiveSlideScale: 0.9,
+    inactiveSlideShift: 0,
+    layout: 'default',
+    loop: false,
+    loopClonesPerSide: 3,
+    scrollEnabled: true,
+    slideStyle: {},
+    shouldOptimizeUpdates: true,
+    vertical: false,
+    isCustomScrollWidth: false,
+    disableIntervalMomentum: IS_ANDROID,
+    useExperimentalSnap: IS_ANDROID,
+    visibleItem: 1,
+  };
+
+  _activeItem;
+  _onScrollActiveItem;
+  _previousFirstItem;
+  _previousItemsLength;
+  _mounted;
+  _positions: Position[];
+  _currentScrollOffset;
+  _scrollEnabled;
+  _initTimeout?: NodeJS.Timeout;
+  _apparitionTimeout?: NodeJS.Timeout;
+  _hackSlideAnimationTimeout?: NodeJS.Timeout;
+  _enableAutoplayTimeout?: NodeJS.Timeout;
+  _autoplayTimeout?: NodeJS.Timeout;
+  _snapNoMomentumTimeout?: NodeJS.Timeout;
+  _androidRepositioningTimeout?: NodeJS.Timeout;
+  _scrollPos?: Animated.Value;
+  _onScrollHandler?: (...args: any[]) => void;
+  _autoplay?: boolean;
+  _autoplaying?: boolean;
+  _autoplayInterval?: NodeJS.Timeout;
+  _carouselRef?: {scrollTo: any; scrollToOffset: any; getNode: () => any};
+  _onLayoutInitDone?: boolean;
+  itemWidth: number;
+  constructor(props: CarouselProps) {
+    super(props);
+
+    this.state = {
+      hideCarousel: !!props.apparitionDelay,
+      interpolators: [],
+      containerWidth: screenWidth,
+    };
+
+    const initialActiveItem = this._getFirstItem(props.firstItem);
+    this._activeItem = initialActiveItem;
+    this._onScrollActiveItem = initialActiveItem;
+    this._previousFirstItem = initialActiveItem;
+    this._previousItemsLength = initialActiveItem;
+
+    this._mounted = false;
+    this._positions = [];
+    this._currentScrollOffset = 0;
+    this._scrollEnabled = props.scrollEnabled;
+    this.itemWidth =
+      (this.state.containerWidth * 0.9 - (props.visibleItem - 1) * 12) /
+      props.visibleItem;
+
+    this._getItemLayout = this._getItemLayout.bind(this);
+    this._getKeyExtractor = this._getKeyExtractor.bind(this);
+    this._onLayout = this._onLayout.bind(this);
+    this._onScroll = this._onScroll.bind(this);
+    this._onMomentumScrollEnd = this._onMomentumScrollEnd.bind(this);
+    this._onTouchStart = this._onTouchStart.bind(this);
+    this._onTouchEnd = this._onTouchEnd.bind(this);
+    this._renderItem = this._renderItem.bind(this);
+    this._setScrollHandler(props);
+  }
+
+  get realIndex() {
+    return this._activeItem;
+  }
+
+  get currentIndex() {
+    return this._getDataIndex(this._activeItem);
+  }
+
+  get currentScrollPosition() {
+    return this._currentScrollOffset;
+  }
+
+  componentDidMount() {
+    const {apparitionDelay, autoplay, firstItem} = this.props;
+
+    this._mounted = true;
+    this._initPositionsAndInterpolators();
+
+    // Without 'requestAnimationFrame' or a `0` timeout, images will randomly not be rendered on Android...
+    this._initTimeout = setTimeout(() => {
+      if (!this._mounted) {
+        return;
+      }
+
+      const apparitionCallback = () => {
+        if (apparitionDelay) {
+          this.setState({hideCarousel: false});
+        }
+        if (autoplay) {
+          this.startAutoplay();
+        }
+      };
+
+      if (apparitionDelay) {
+        this._apparitionTimeout = setTimeout(() => {
+          apparitionCallback();
+        }, apparitionDelay);
+      } else {
+        apparitionCallback();
+      }
+    }, 1);
+  }
+
+  componentDidUpdate(prevProps: CarouselProps) {
+    const {interpolators} = this.state;
+    const {firstItem, scrollEnabled} = this.props;
+    const itemsLength = this._getCustomDataLength(this.props);
+
+    if (!itemsLength) {
+      return;
+    }
+
+    const nextFirstItem = this._getFirstItem(firstItem, this.props);
+    let nextActiveItem =
+      typeof this._activeItem !== 'undefined'
+        ? this._activeItem
+        : nextFirstItem;
+
+    if (nextActiveItem > itemsLength - 1) {
+      nextActiveItem = itemsLength - 1;
+    }
+
+    if (scrollEnabled !== prevProps.scrollEnabled) {
+      this._setScrollEnabled(scrollEnabled);
+    }
+
+    if (interpolators.length !== itemsLength) {
+      this._activeItem = nextActiveItem;
+      this._previousItemsLength = itemsLength;
+
+      this._initPositionsAndInterpolators(this.props);
+
+      if (this._previousItemsLength > itemsLength) {
+        this._hackActiveSlideAnimation(nextActiveItem);
+      }
+    } else if (
+      nextFirstItem !== this._previousFirstItem &&
+      nextFirstItem !== this._activeItem
+    ) {
+      this._activeItem = nextFirstItem;
+      this._previousFirstItem = nextFirstItem;
+      this._snapToItem(nextFirstItem, false, true, true);
+    }
+
+    if (this.props.onScroll !== prevProps.onScroll) {
+      this._setScrollHandler(this.props);
+    }
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+    this.stopAutoplay();
+    clearTimeout(this._initTimeout);
+    clearTimeout(this._apparitionTimeout);
+    clearTimeout(this._hackSlideAnimationTimeout);
+    clearTimeout(this._enableAutoplayTimeout);
+    clearTimeout(this._autoplayTimeout);
+    clearTimeout(this._snapNoMomentumTimeout);
+    clearTimeout(this._androidRepositioningTimeout);
+  }
+
+  _setScrollHandler(props: CarouselProps) {
+    const scrollEventConfig = {
+      listener: this._onScroll,
+      useNativeDriver: true,
+    };
+    this._scrollPos = new Animated.Value(0);
+    const argMapping = [{nativeEvent: {contentOffset: {x: this._scrollPos}}}];
+
+    if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
+      argMapping.pop();
+      const [argMap] = props.onScroll._argMapping;
+      if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
+        this._scrollPos =
+          argMap.nativeEvent.contentOffset.x ||
+          argMap.nativeEvent.contentOffset.y ||
+          this._scrollPos;
+      }
+      argMapping.push(...props.onScroll._argMapping);
+    }
+    this._onScrollHandler = Animated.event(argMapping, scrollEventConfig);
+  }
+
+  _needsRTLAdaptations() {
+    return IS_RTL && IS_ANDROID;
+  }
+
+  _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
+    );
+  }
+
+  _shouldRepositionScroll(index: number) {
+    const {data, enableSnap, loopClonesPerSide} = this.props;
+    const dataLength = data && data.length;
+    return !(
+      !enableSnap ||
+      !dataLength ||
+      !this._enableLoop() ||
+      (index >= loopClonesPerSide && index < dataLength + loopClonesPerSide)
+    );
+  }
+
+  _isMultiple(x: number, y: number) {
+    return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
+  }
+
+  _getCustomData(props = this.props) {
+    const {data, loopClonesPerSide} = props;
+    const dataLength = data && data.length;
+
+    if (!dataLength) {
+      return [];
+    }
+
+    if (!this._enableLoop()) {
+      return data;
+    }
+
+    let previousItems = [];
+    let nextItems = [];
+
+    if (loopClonesPerSide > dataLength) {
+      const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
+      const remainder = loopClonesPerSide % dataLength;
+
+      for (let i = 0; i < dataMultiplier; i++) {
+        previousItems.push(...data);
+        nextItems.push(...data);
+      }
+
+      previousItems.unshift(...data.slice(-remainder));
+      nextItems.push(...data.slice(0, remainder));
+    } else {
+      previousItems = data.slice(-loopClonesPerSide);
+      nextItems = data.slice(0, loopClonesPerSide);
+    }
+
+    return previousItems.concat(data, nextItems);
+  }
+
+  _getCustomDataLength(props = this.props) {
+    const {data, loopClonesPerSide} = props;
+    const dataLength = data && data.length;
+
+    if (!dataLength) {
+      return 0;
+    }
+
+    return this._enableLoop() ? dataLength + 2 * loopClonesPerSide : dataLength;
+  }
+
+  _getCustomIndex(index: number, props = this.props) {
+    const itemsLength = this._getCustomDataLength(props);
+
+    if (!itemsLength || typeof index === 'undefined') {
+      return 0;
+    }
+
+    return this._needsRTLAdaptations() ? itemsLength - index - 1 : index;
+  }
+
+  _getDataIndex(index: number) {
+    const {data, loopClonesPerSide} = this.props;
+    const dataLength = data && data.length;
+    if (!this._enableLoop() || !dataLength) {
+      return index;
+    }
+
+    if (index >= dataLength + loopClonesPerSide) {
+      return loopClonesPerSide > dataLength
+        ? (index - loopClonesPerSide) % dataLength
+        : index - dataLength - loopClonesPerSide;
+    } else if (index < loopClonesPerSide) {
+      if (loopClonesPerSide > dataLength) {
+        const baseDataIndexes = [];
+        const dataIndexes = [];
+        const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
+        const remainder = loopClonesPerSide % dataLength;
+
+        for (let i = 0; i < dataLength; i++) {
+          baseDataIndexes.push(i);
+        }
+
+        for (let j = 0; j < dataMultiplier; j++) {
+          dataIndexes.push(...baseDataIndexes);
+        }
+
+        dataIndexes.unshift(...baseDataIndexes.slice(-remainder));
+        return dataIndexes[index];
+      } else {
+        return index + dataLength - loopClonesPerSide;
+      }
+    } else {
+      return index - loopClonesPerSide;
+    }
+  }
+  //
+  // _getPositionIndex(index: number) {
+  //   const {loop, loopClonesPerSide} = this.props;
+  //   return loop ? index + loopClonesPerSide : index;
+  // }
+
+  _getSnapOffsets(props = this.props) {
+    const offset = this._getItemMainDimension();
+    if (!props.enableSnap) return;
+    return [...Array(this._getCustomDataLength(props))].map((_, i) => {
+      return i * offset;
+    });
+  }
+
+  _getFirstItem(index: number, props = this.props) {
+    const {loopClonesPerSide} = props;
+    const itemsLength = this._getCustomDataLength(props);
+
+    if (!itemsLength || index > itemsLength - 1 || index < 0) {
+      return 0;
+    }
+
+    return this._enableLoop() ? index + loopClonesPerSide : index;
+  }
+
+  _getWrappedRef() {
+    if (this._carouselRef && this._carouselRef.scrollToOffset) {
+      return this._carouselRef;
+    }
+    return (
+      this._carouselRef &&
+      this._carouselRef.getNode &&
+      this._carouselRef.getNode()
+    );
+  }
+
+  _getScrollEnabled() {
+    return this._scrollEnabled;
+  }
+
+  _setScrollEnabled(scrollEnabled = true) {
+    const wrappedRef = this._getWrappedRef();
+
+    if (!wrappedRef || !wrappedRef.setNativeProps) {
+      return;
+    }
+
+    wrappedRef.setNativeProps({scrollEnabled});
+    this._scrollEnabled = scrollEnabled;
+  }
+
+  _getItemMainDimension() {
+    const {containerWidth} = this.state;
+    const {visibleItem = 1} = this.props;
+    return (
+      (containerWidth * 0.9 - (visibleItem - 1) * Spacing.M) / visibleItem +
+      Spacing.M
+    );
+  }
+
+  _getItemScrollOffset(index: number) {
+    return (
+      this._positions && this._positions[index] && this._positions[index].start
+    );
+  }
+
+  _getItemLayout(_: any, index: number) {
+    const itemMainDimension = this._getItemMainDimension();
+    return {
+      index,
+      length: itemMainDimension,
+      offset: itemMainDimension * index,
+    };
+  }
+
+  _getKeyExtractor(_: any, index: any) {
+    return `flatlist-item-${index}`;
+  }
+
+  _getScrollOffset(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    return event.nativeEvent.contentOffset.x;
+  }
+
+  _getActiveSlideOffset() {
+    const {activeSlideOffset} = this.props;
+    const itemMainDimension = this._getItemMainDimension();
+    const minOffset = 10;
+    return itemMainDimension / 2 - activeSlideOffset >= minOffset
+      ? activeSlideOffset
+      : minOffset;
+  }
+
+  _getActiveItem(offset: number) {
+    const itemMainDimension = this._getItemMainDimension();
+    const center = offset + itemMainDimension / 2;
+    const activeSlideOffset = this._getActiveSlideOffset();
+    const lastIndex = this._positions.length - 1;
+    let itemIndex;
+
+    if (offset <= 0) {
+      return 0;
+    }
+
+    if (
+      this._positions[lastIndex] &&
+      offset >= this._positions[lastIndex].start
+    ) {
+      return lastIndex;
+    }
+
+    for (let i = 0; i < this._positions.length; i++) {
+      const {start, end} = this._positions[i];
+      if (
+        center + activeSlideOffset >= start &&
+        center - activeSlideOffset <= end
+      ) {
+        itemIndex = i;
+        break;
+      }
+    }
+
+    return itemIndex || 0;
+  }
+
+  _getSlideInterpolatedStyle(index: number, animatedValue: Animated.Value) {
+    const {slideInterpolatedStyle} = this.props;
+
+    if (slideInterpolatedStyle) {
+      return slideInterpolatedStyle(index, animatedValue, this.props);
+    } else {
+      return defaultAnimatedStyles(index, animatedValue, this.props);
+    }
+  }
+
+  _initPositionsAndInterpolators(props = this.props) {
+    const {data, scrollInterpolator} = props;
+    const itemMainDimension = this._getItemMainDimension();
+
+    if (!data || !data.length) {
+      return;
+    }
+
+    const interpolators: any[] = [];
+    this._positions = [];
+
+    this._getCustomData(props).forEach((_itemData, index) => {
+      const _index = this._getCustomIndex(index, props);
+      let animatedValue;
+
+      this._positions[index] = {
+        start: index * itemMainDimension,
+        end: index * itemMainDimension + itemMainDimension,
+      };
+
+      if (!this._shouldAnimateSlides(props) || !this._scrollPos) {
+        animatedValue = new Animated.Value(1);
+      } else {
+        let interpolator;
+
+        if (scrollInterpolator) {
+          interpolator = scrollInterpolator(_index, props);
+        }
+
+        if (
+          !interpolator ||
+          !interpolator.inputRange ||
+          !interpolator.outputRange
+        ) {
+          interpolator = defaultScrollInterpolator(_index, props);
+        }
+
+        animatedValue = this._scrollPos.interpolate({
+          ...interpolator,
+          extrapolate: 'clamp',
+        });
+      }
+
+      interpolators.push(animatedValue);
+    });
+
+    this.setState({interpolators});
+  }
+
+  _hackActiveSlideAnimation(index: number, scrollValue = 1) {
+    const offset = this._getItemScrollOffset(index);
+
+    if (!this._mounted || !this._carouselRef || typeof offset === 'undefined') {
+      return;
+    }
+
+    const multiplier = this._currentScrollOffset === 0 ? 1 : -1;
+    const scrollDelta = scrollValue * multiplier;
+
+    this._scrollTo({
+      offset: offset + scrollDelta,
+      animated: false,
+    });
+
+    clearTimeout(this._hackSlideAnimationTimeout);
+    this._hackSlideAnimationTimeout = setTimeout(() => {
+      this._scrollTo({
+        offset,
+        animated: false,
+      });
+    }, 1);
+  }
+
+  _repositionScroll(index: number, animated = false) {
+    const {data, loopClonesPerSide} = this.props;
+    const dataLength = data && data.length;
+
+    if (typeof index === 'undefined' || !this._shouldRepositionScroll(index)) {
+      return;
+    }
+
+    let repositionTo = index;
+
+    if (index >= dataLength + loopClonesPerSide) {
+      repositionTo = index - dataLength;
+    } else if (index < loopClonesPerSide) {
+      repositionTo = index + dataLength;
+    }
+
+    this._snapToItem(repositionTo, animated, false);
+  }
+
+  _scrollTo(info: {offset?: number; index?: number; animated?: boolean}) {
+    const {offset, index, animated = true} = info;
+    const wrappedRef = this._getWrappedRef();
+    if (
+      !this._mounted ||
+      !wrappedRef ||
+      (typeof offset === 'undefined' && typeof index === 'undefined')
+    ) {
+      return;
+    }
+
+    let scrollToOffset;
+    if (typeof index !== 'undefined') {
+      scrollToOffset = this._getItemScrollOffset(index);
+    } else {
+      scrollToOffset = offset;
+    }
+
+    if (typeof scrollToOffset === 'undefined') {
+      return;
+    }
+
+    const options = {
+      offset,
+      animated,
+    };
+
+    wrappedRef.scrollToOffset(options);
+  }
+
+  _onTouchStart(event: any) {
+    const {onTouchStart} = this.props;
+
+    if (this._getScrollEnabled() !== false && this._autoplaying) {
+      this.pauseAutoPlay();
+    }
+
+    onTouchStart && onTouchStart(event);
+  }
+
+  _onTouchEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const {onTouchEnd} = this.props;
+
+    if (
+      this._getScrollEnabled() !== false &&
+      this._autoplay &&
+      !this._autoplaying
+    ) {
+      this.startAutoplay();
+    }
+
+    onTouchEnd && onTouchEnd(event);
+  }
+
+  _onScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const {onScroll, onScrollIndexChanged, onSnapToItem} = this.props;
+    const scrollOffset = event
+      ? this._getScrollOffset(event)
+      : this._currentScrollOffset;
+    const nextActiveItem = this._getActiveItem(scrollOffset);
+    const dataLength = this._getCustomDataLength();
+    const lastItemScrollOffset = this._getItemScrollOffset(dataLength - 1);
+
+    this._currentScrollOffset = scrollOffset;
+
+    if (nextActiveItem !== this._onScrollActiveItem) {
+      this._onScrollActiveItem = nextActiveItem;
+      onScrollIndexChanged &&
+        onScrollIndexChanged(this._getDataIndex(nextActiveItem));
+
+      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
+    }
+
+    if (
+      (IS_IOS && scrollOffset > lastItemScrollOffset) ||
+      (IS_ANDROID &&
+        Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
+    ) {
+      this._activeItem = nextActiveItem;
+      this._repositionScroll(nextActiveItem);
+    }
+
+    if (typeof onScroll === 'function' && event) {
+      onScroll(event);
+    }
+  }
+
+  _onMomentumScrollEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    const {autoplayDelay, onMomentumScrollEnd, onSnapToItem} = this.props;
+    const scrollOffset = event
+      ? this._getScrollOffset(event)
+      : this._currentScrollOffset;
+    const nextActiveItem = this._getActiveItem(scrollOffset);
+    const hasSnapped = this._isMultiple(scrollOffset, this.itemWidth);
+
+    if (nextActiveItem !== this._activeItem) {
+      this._activeItem = nextActiveItem;
+      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
+
+      if (hasSnapped && IS_ANDROID) {
+        this._repositionScroll(nextActiveItem);
+      } else if (IS_IOS) {
+        this._repositionScroll(nextActiveItem);
+      }
+    }
+
+    onMomentumScrollEnd && onMomentumScrollEnd(event);
+
+    if (IS_ANDROID && this._autoplay && !this._autoplaying) {
+      clearTimeout(this._enableAutoplayTimeout);
+      this._enableAutoplayTimeout = setTimeout(() => {
+        this.startAutoplay();
+      }, autoplayDelay);
+    }
+  }
+
+  _onLayout(event: LayoutChangeEvent) {
+    const {onLayout} = this.props;
+
+    if (this._onLayoutInitDone) {
+      this._initPositionsAndInterpolators();
+      this._snapToItem(this._activeItem, false, false, true);
+    } else {
+      this._onLayoutInitDone = true;
+    }
+
+    this.setState({containerWidth: event.nativeEvent.layout.width});
+    onLayout && onLayout(event);
+  }
+
+  _snapToItem(
+    index: number,
+    animated = true,
+    fireCallback = true,
+    forceScrollTo = false,
+  ) {
+    const {onSnapToItem} = this.props;
+    const itemsLength = this._getCustomDataLength();
+    const wrappedRef = this._getWrappedRef();
+    if (!itemsLength || !wrappedRef) {
+      return;
+    }
+
+    if (!index || index < 0) {
+      index = 0;
+    } else if (itemsLength > 0 && index >= itemsLength) {
+      index = itemsLength - 1;
+    }
+
+    if (index === this._activeItem && !forceScrollTo) {
+      return;
+    }
+
+    const offset = this._getItemScrollOffset(index);
+
+    if (offset === undefined) {
+      return;
+    }
+
+    this._scrollTo({
+      offset,
+      animated,
+    });
+
+    const requiresManualTrigger = !animated || IS_ANDROID;
+    if (requiresManualTrigger) {
+      this._activeItem = index;
+
+      if (fireCallback) {
+        onSnapToItem && onSnapToItem(this._getDataIndex(index));
+      }
+
+      if (IS_ANDROID && this._shouldRepositionScroll(index)) {
+        if (animated) {
+          this._androidRepositioningTimeout = setTimeout(() => {
+            this._repositionScroll(index, false);
+          }, 400);
+        } else {
+          this._repositionScroll(index);
+        }
+      }
+    }
+  }
+
+  startAutoplay() {
+    const {autoplayInterval, autoplayDelay} = this.props;
+    this._autoplay = true;
+
+    if (this._autoplaying) {
+      return;
+    }
+
+    clearTimeout(this._autoplayTimeout);
+    this._autoplayTimeout = setTimeout(() => {
+      this._autoplaying = true;
+      this._autoplayInterval = setInterval(() => {
+        if (this._autoplaying) {
+          this.snapToNext();
+        }
+      }, autoplayInterval);
+    }, autoplayDelay);
+  }
+
+  pauseAutoPlay() {
+    this._autoplaying = false;
+    clearTimeout(this._autoplayTimeout);
+    clearTimeout(this._enableAutoplayTimeout);
+    clearInterval(this._autoplayInterval);
+  }
+
+  stopAutoplay() {
+    this._autoplay = false;
+    this.pauseAutoPlay();
+  }
+
+  snapToNext(animated = true, fireCallback = true) {
+    const itemsLength = this._getCustomDataLength();
+
+    let newIndex = this._activeItem + 1;
+    if (newIndex > itemsLength - 1) {
+      newIndex = 0;
+    }
+    this._snapToItem(newIndex, animated, fireCallback);
+  }
+
+  snapToPrev(animated = true, fireCallback = true) {
+    const itemsLength = this._getCustomDataLength();
+
+    let newIndex = this._activeItem - 1;
+    if (newIndex < 0) {
+      newIndex = itemsLength - 1;
+    }
+    this._snapToItem(newIndex, animated, fireCallback);
+  }
+
+  triggerRenderingHack(offset = 1) {
+    this._hackActiveSlideAnimation(this._activeItem, offset);
+  }
+
+  _renderItem(info: {item: any; index: number}) {
+    const {item, index} = info;
+    const {interpolators} = this.state;
+    const {slideStyle} = this.props;
+    const animatedValue = interpolators && interpolators[index];
+
+    if (typeof animatedValue === 'undefined') {
+      return null;
+    }
+
+    const animate = this._shouldAnimateSlides();
+    const Component = animate ? Animated.View : View;
+    const animatedStyle = animate
+      ? this._getSlideInterpolatedStyle(index, animatedValue)
+      : {};
+
+    const mainDimension = {width: this.itemWidth};
+
+    return (
+      <Component
+        style={[
+          mainDimension,
+          slideStyle,
+          // animatedStyle,
+          this.props.loop
+            ? {marginLeft: Spacing.M}
+            : {
+                marginLeft: index === 0 ? Spacing.M : 0,
+                marginRight:
+                  index === this._getCustomDataLength() - 1 ? 0 : Spacing.M,
+              },
+        ]}
+        pointerEvents="box-none">
+        {this.props.renderItem({
+          item,
+          index,
+        })}
+      </Component>
+    );
+  }
+
+  _getComponentOverridableProps() {
+    const {hideCarousel, containerWidth} = this.state;
+    const {loopClonesPerSide, visibleItem} = this.props;
+    const visibleItems = visibleItem;
+    const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
+    const initialNumToRender =
+      visibleItems > 2
+        ? visibleItems + initialNumPerSide * 2
+        : initialNumPerSide * 2;
+    const maxToRenderPerBatch = initialNumToRender;
+    const windowSize = maxToRenderPerBatch;
+    const specificProps = {
+      initialNumToRender,
+      maxToRenderPerBatch,
+      windowSize,
+    };
+
+    return {
+      ...specificProps,
+      automaticallyAdjustContentInsets: false,
+      decelerationRate: 'fast',
+      directionalLockEnabled: true,
+      disableScrollViewPanResponder: false,
+      inverted: this._needsRTLAdaptations(),
+      overScrollMode: 'never',
+      pinchGestureEnabled: false,
+      pointerEvents: hideCarousel ? 'none' : 'auto',
+      scrollsToTop: false,
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false,
+    };
+  }
+
+  _getComponentStaticProps() {
+    const {hideCarousel, containerWidth} = this.state;
+    const {
+      activeSlideAlignment,
+      containerCustomStyle,
+      firstItem,
+      getItemLayout,
+      keyExtractor,
+      style,
+      disableIntervalMomentum,
+    } = this.props;
+    const containerStyle = [
+      containerCustomStyle || style || {},
+      hideCarousel ? {opacity: 0} : {},
+      {
+        width: containerWidth,
+        flexDirection: this._needsRTLAdaptations() ? 'row-reverse' : 'row',
+      },
+    ];
+
+    const snapProps = {
+      disableIntervalMomentum, // Slide ± one item at a time
+      snapToAlignment: activeSlideAlignment,
+      snapToInterval: this._getItemMainDimension(),
+    };
+
+    const specificProps = {
+      getItemLayout: getItemLayout || this._getItemLayout,
+      initialScrollIndex: this._getFirstItem(firstItem),
+      keyExtractor: keyExtractor || this._getKeyExtractor,
+      numColumns: 1,
+      renderItem: this._renderItem,
+    };
+
+    return {
+      ...specificProps,
+      ...snapProps,
+      ref: (
+        c: {scrollTo: any; scrollToOffset: any; getNode: () => any} | undefined,
+      ) => {
+        this._carouselRef = c;
+      },
+      data: this._getCustomData(),
+      horizontal: true,
+      scrollEventThrottle: 1,
+      style: containerStyle,
+      onLayout: this._onLayout,
+      onMomentumScrollEnd: this._onMomentumScrollEnd,
+      onScroll: this._onScrollHandler,
+      onTouchStart: this._onTouchStart,
+      onTouchEnd: this._onTouchEnd,
+    };
+  }
+
+  render() {
+    const {data, renderItem} = this.props;
+    if (!data || !renderItem) {
+      return null;
+    }
+
+    const props = {
+      ...this._getComponentOverridableProps(),
+      ...this.props,
+      ...this._getComponentStaticProps(),
+    };
+
+    return <Animated.FlatList {...props} />;
+  }
+}