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

package/newCarousel.tsx

@@ -0,0 +1,1041 @@
+// import React from 'react';
+// import {
+//   Animated,
+//   I18nManager,
+//   LayoutChangeEvent,
+//   NativeScrollEvent,
+//   NativeSyntheticEvent,
+//   Platform,
+//   View,
+// } from 'react-native';
+// import {defaultAnimatedStyles, defaultScrollInterpolator} from './animation';
+// import {CarouselProps, CarouselState, Position} from './types';
+//
+// const IS_ANDROID = Platform.OS === 'android';
+// const IS_IOS = Platform.OS === 'ios';
+// const IS_RTL = I18nManager.isRTL;
+//
+// 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,
+//     useScrollView: !Animated.FlatList,
+//     vertical: false,
+//     isCustomScrollWidth: false,
+//     disableIntervalMomentum: IS_ANDROID,
+//     useExperimentalSnap: IS_ANDROID,
+//   };
+//
+//   _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;
+//   constructor(props: CarouselProps) {
+//     super(props);
+//
+//     this.state = {
+//       hideCarousel: !!props.apparitionDelay,
+//       interpolators: [],
+//     };
+//
+//     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._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();
+//         }
+//       };
+//
+//       // FlatList will use its own built-in prop `initialScrollIndex`
+//       if (this._needsScrollView()) {
+//         const _firstItem = this._getFirstItem(firstItem);
+//         this._snapToItem(_firstItem, false, false, true);
+//         // this._hackActiveSlideAnimation(_firstItem);
+//       }
+//
+//       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;
+//
+//     const hasNewSize =
+//       prevProps.itemWidth !== this.props.itemWidth ||
+//       prevProps.sliderWidth !== this.props.sliderWidth;
+//
+//     if (nextActiveItem > itemsLength - 1) {
+//       nextActiveItem = itemsLength - 1;
+//     }
+//
+//     if (scrollEnabled !== prevProps.scrollEnabled) {
+//       this._setScrollEnabled(scrollEnabled);
+//     }
+//
+//     if (interpolators.length !== itemsLength || hasNewSize) {
+//       this._activeItem = nextActiveItem;
+//       this._previousItemsLength = itemsLength;
+//
+//       this._initPositionsAndInterpolators(this.props);
+//
+//       if (this._previousItemsLength > itemsLength) {
+//         this._hackActiveSlideAnimation(nextActiveItem);
+//       }
+//
+//       if (hasNewSize) {
+//         this._snapToItem(nextActiveItem, false, false, true);
+//       }
+//     } 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);
+//   }
+//
+//   _needsScrollView() {
+//     const {useScrollView} = this.props;
+//     return IS_ANDROID
+//       ? useScrollView || !Animated.FlatList
+//       : useScrollView || !Animated.FlatList;
+//   }
+//
+//   _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._needsScrollView() && this._carouselRef.scrollTo) ||
+//         (!this._needsScrollView() && 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() {
+//     return this.props.itemWidth || 20;
+//   }
+//
+//   _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 this._needsScrollView()
+//       ? `scrollview-item-${index}`
+//       : `flatlist-item-${index}`;
+//   }
+//
+//   _getScrollOffset(event: NativeSyntheticEvent<NativeScrollEvent>) {
+//     return event.nativeEvent.contentOffset.x;
+//   }
+//
+//   _getContainerInnerMargin(opposite = false) {
+//     const {
+//       activeSlideAlignment,
+//       sliderWidth = 100,
+//       itemWidth = 20,
+//     } = this.props;
+//
+//     if (
+//       (activeSlideAlignment === 'start' && !opposite) ||
+//       (activeSlideAlignment === 'end' && opposite)
+//     ) {
+//       return 0;
+//     } else if (
+//       (activeSlideAlignment === 'end' && !opposite) ||
+//       (activeSlideAlignment === 'start' && opposite)
+//     ) {
+//       return sliderWidth - itemWidth;
+//     } else {
+//       return (sliderWidth - itemWidth) / 2;
+//     }
+//   }
+//
+//   _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 = this._needsScrollView()
+//       ? {
+//           x: offset,
+//           y: 0,
+//           animated,
+//         }
+//       : {
+//           offset,
+//           animated,
+//         };
+//
+//     if (this._needsScrollView()) {
+//       wrappedRef.scrollTo(options);
+//     } else {
+//       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,
+//       itemWidth = 20,
+//     } = this.props;
+//     const scrollOffset = event
+//       ? this._getScrollOffset(event)
+//       : this._currentScrollOffset;
+//     const nextActiveItem = this._getActiveItem(scrollOffset);
+//     const hasSnapped = this._isMultiple(scrollOffset, itemWidth || 20);
+//
+//     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;
+//     }
+//
+//     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 {keyExtractor, 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.props.itemWidth};
+//     const specificProps = this._needsScrollView()
+//       ? {
+//           key: keyExtractor
+//             ? keyExtractor(item, index)
+//             : this._getKeyExtractor(item, index),
+//         }
+//       : {};
+//
+//     return (
+//       <Component
+//         style={[mainDimension, slideStyle, animatedStyle]}
+//         pointerEvents="box-none"
+//         {...specificProps}>
+//         {this.props.renderItem({
+//           item,
+//           index,
+//         })}
+//       </Component>
+//     );
+//   }
+//
+//   _getComponentOverridableProps() {
+//     const {hideCarousel} = this.state;
+//     const {loopClonesPerSide, sliderWidth = 100, itemWidth = 20} = this.props;
+//     const visibleItems = Math.ceil(sliderWidth / itemWidth) + 1;
+//     const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
+//     const initialNumToRender =
+//       visibleItems > 2
+//         ? visibleItems + initialNumPerSide * 2
+//         : initialNumPerSide * 2;
+//     const maxToRenderPerBatch = initialNumToRender;
+//     const windowSize = maxToRenderPerBatch;
+//     const specificProps = !this._needsScrollView()
+//       ? {
+//           initialNumToRender,
+//           maxToRenderPerBatch,
+//           windowSize,
+//         }
+//       : {};
+//
+//     return {
+//       ...specificProps,
+//       automaticallyAdjustContentInsets: false,
+//       decelerationRate: 'fast',
+//       directionalLockEnabled: true,
+//       disableScrollViewPanResponder: false, // If set to `true`, touch events will be triggered too easily
+//       inverted: this._needsRTLAdaptations(),
+//       overScrollMode: 'never',
+//       pinchGestureEnabled: false,
+//       pointerEvents: hideCarousel ? 'none' : 'auto',
+//       scrollsToTop: false,
+//       showsHorizontalScrollIndicator: false,
+//       showsVerticalScrollIndicator: false,
+//     };
+//   }
+//
+//   _getComponentStaticProps() {
+//     const {hideCarousel} = this.state;
+//     const {
+//       activeSlideAlignment,
+//       containerCustomStyle,
+//       contentContainerCustomStyle,
+//       firstItem,
+//       getItemLayout,
+//       keyExtractor,
+//       style,
+//       useExperimentalSnap,
+//       disableIntervalMomentum,
+//       enableSnap,
+//     } = this.props;
+//     const containerStyle = [
+//       containerCustomStyle || style || {},
+//       hideCarousel ? {opacity: 0} : {},
+//       {
+//         width: this.props.sliderWidth,
+//         flexDirection: this._needsRTLAdaptations() ? 'row-reverse' : 'row',
+//       },
+//     ];
+//
+//     const contentContainerStyle = [
+//       {
+//         paddingLeft: this._getContainerInnerMargin(),
+//         paddingRight: this._getContainerInnerMargin(true),
+//       },
+//       contentContainerCustomStyle || {},
+//     ];
+//
+//     const snapProps =
+//       enableSnap && useExperimentalSnap
+//         ? {
+//             disableIntervalMomentum, // Slide ± one item at a time
+//             snapToAlignment: activeSlideAlignment,
+//             snapToInterval: this._getItemMainDimension(),
+//           }
+//         : {
+//             snapToOffsets: this._getSnapOffsets(),
+//           };
+//
+//     const specificProps = !this._needsScrollView()
+//       ? {
+//           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;
+//       },
+//       contentContainerStyle: contentContainerStyle,
+//       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, useScrollView} = this.props;
+//     if (!data || !renderItem) {
+//       return null;
+//     }
+//
+//     console.log(data);
+//
+//     const props = {
+//       ...this._getComponentOverridableProps(),
+//       ...this.props,
+//       ...this._getComponentStaticProps(),
+//     };
+//
+//     return <Animated.FlatList {...props} />;
+//   }
+// }