@momo-kits/carousel 0.73.3-beta.5 → 0.74.2-react-native.2

package/index.tsx

@@ -0,0 +1,830 @@
+import React from 'react';
+import {
+  Animated,
+  Dimensions,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {defaultScrollInterpolator} from './animation';
+import {CarouselProps, CarouselRef, CarouselState, Position} from './types';
+import {scaleSize, Spacing} from '@momo-kits/foundation';
+
+const IS_ANDROID = Platform.OS === 'android';
+const IS_IOS = Platform.OS === 'ios';
+const screenWidth = Dimensions.get('window').width;
+
+class Carousel extends React.PureComponent<
+  CarouselProps,
+  CarouselState
+> {
+  static defaultProps = {
+    activeSlideAlignment: 'start',
+    activeSlideOffset: 20,
+    apparitionDelay: 0,
+    autoplay: false,
+    autoplayDelay: 1000,
+    autoplayInterval: 3000,
+    callbackOffsetMargin: 5,
+    containerCustomStyle: {},
+    contentContainerCustomStyle: {},
+    enableSnap: true,
+    firstItem: 0,
+    hasParallaxImages: false,
+    loop: false,
+    loopClonesPerSide: 3,
+    scrollEnabled: true,
+    slideStyle: {},
+    shouldOptimizeUpdates: true,
+    vertical: false,
+    isCustomScrollWidth: false,
+    disableIntervalMomentum: IS_ANDROID,
+    useExperimentalSnap: IS_ANDROID,
+    visibleItem: 1,
+    full: false,
+  };
+
+  _activeItem;
+  _onScrollActiveItem;
+  _previousFirstItem;
+  _previousItemsLength;
+  _mounted;
+  _positions: Position[];
+  _currentScrollOffset;
+  _scrollEnabled;
+  _initTimeout?: NodeJS.Timeout;
+  _apparitionTimeout?: 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: any;
+  _onLayoutInitDone?: boolean;
+  constructor(props: CarouselProps) {
+    super(props);
+
+    this.state = {
+      hideCarousel: !!props.apparitionDelay,
+      interpolators: [],
+      containerWidth: screenWidth,
+      itemWidth: screenWidth - Spacing.L * 2,
+    };
+
+    const initialActiveItem = this._getFirstItem(props.firstItem || 0);
+    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);
+  }
+
+  componentDidMount() {
+    const {apparitionDelay, autoplay} = 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 = 0, 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);
+    } 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._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);
+  }
+
+  _enableLoop() {
+    const {data, enableSnap, loop} = this.props;
+    return enableSnap && loop && data && data.length && data.length > 1;
+  }
+
+  _shouldAnimateSlides(props = this.props) {
+    const {inactiveSlideOpacity = 1, inactiveSlideScale = 1} = props;
+    return inactiveSlideOpacity < 1 || inactiveSlideScale < 1;
+  }
+
+  _shouldRepositionScroll(index: number) {
+    const {data, enableSnap, loopClonesPerSide = 3} = 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 = 3} = 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 = 3} = 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 index;
+  }
+
+  _getDataIndex(index: number) {
+    const {data, loopClonesPerSide = 3} = 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;
+    }
+  }
+
+  _getFirstItem(index: number, props = this.props) {
+    const {loopClonesPerSide = 3} = props;
+    const itemsLength = this._getCustomDataLength(props);
+
+    if (!itemsLength || index > itemsLength - 1 || index < 0) {
+      return 0;
+    }
+
+    return this._enableLoop() ? index + loopClonesPerSide : index;
+  }
+
+  _getWrappedRef() {
+    return this._carouselRef;
+  }
+
+  _getScrollEnabled() {
+    return this._scrollEnabled;
+  }
+
+  _setScrollEnabled(scrollEnabled = true) {
+    this._scrollEnabled = scrollEnabled;
+  }
+
+  _getItemMainDimension() {
+    const {itemWidth} = this.state;
+    const {full} = this.props;
+    return full ? itemWidth : itemWidth + Spacing.S;
+  }
+
+  _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 = 0} = 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;
+  }
+
+  _initPositionsAndInterpolators(props = this.props) {
+    const {data} = 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 = defaultScrollInterpolator(
+          _index,
+          this.state.itemWidth,
+        );
+
+        animatedValue = this._scrollPos.interpolate({
+          ...interpolator,
+          extrapolate: 'clamp',
+        });
+      }
+
+      interpolators.push(animatedValue);
+    });
+
+    this.setState({interpolators});
+  }
+
+  _repositionScroll(index: number, animated = false) {
+    const {data, loopClonesPerSide = 3} = 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);
+  }
+
+  _onTouchStart(event: any) {
+    const {onTouchStart} = this.props;
+
+    if (this._getScrollEnabled() !== false && this._autoplaying) {
+      this.pauseAutoPlay();
+    }
+
+    onTouchStart && onTouchStart(event);
+  }
+
+  _onTouchEnd(event: GestureResponderEvent) {
+    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 {itemWidth} = this.state;
+    const scrollOffset = event
+      ? this._getScrollOffset(event)
+      : this._currentScrollOffset;
+    const nextActiveItem = this._getActiveItem(scrollOffset);
+    const hasSnapped = this._isMultiple(scrollOffset, 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, visibleItem = 1} = this.props;
+
+    if (this._onLayoutInitDone) {
+      this._initPositionsAndInterpolators();
+      this._snapToItem(this._activeItem, false, false, true);
+    } else {
+      this._onLayoutInitDone = true;
+    }
+    const containerWidth = event.nativeEvent.layout.width;
+    let itemWidth =
+      this.props.visibleItem === 1
+        ? screenWidth - Spacing.M * 2
+        : Math.ceil(
+            scaleSize(
+              (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem,
+            ),
+          );
+    if (this.props.itemWidth) {
+      itemWidth = this.props.itemWidth;
+    }
+    if (this.props.full) {
+      itemWidth = containerWidth;
+    }
+
+    this.setState({containerWidth, itemWidth});
+
+    onLayout && onLayout(event);
+  }
+
+  _getPositionIndex(index: number) {
+    const {loop, loopClonesPerSide = 3} = this.props;
+    return loop ? index + loopClonesPerSide : index;
+  }
+
+  _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;
+    }
+
+    this._carouselRef.scrollToIndex({
+      index,
+      animated: true,
+    });
+
+    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);
+        }
+      }
+    }
+  }
+
+  _renderItem(info: {item: any; index: number}) {
+    const {item, index} = info;
+    const {interpolators, itemWidth} = this.state;
+    const {slideStyle, full} = this.props;
+    const animatedValue = interpolators && interpolators[index];
+
+    if (typeof animatedValue === 'undefined') {
+      return null;
+    }
+
+    const animate = this._shouldAnimateSlides();
+    const Component = animate ? Animated.View : View;
+    const mainDimension = {width: itemWidth};
+
+    let spacingStyle: ViewStyle = this.props.loop
+      ? {marginLeft: Spacing.S}
+      : {
+          marginLeft: index === 0 ? Spacing.M : 0,
+          marginRight:
+            index === this._getCustomDataLength() - 1 ? Spacing.M : Spacing.S,
+        };
+
+    if (full) {
+      spacingStyle = {};
+    }
+
+    return (
+      <Component
+        style={[
+          mainDimension,
+          slideStyle,
+          // animatedStyle,
+          {overflow: 'hidden'},
+          spacingStyle,
+        ]}
+        pointerEvents="box-none">
+        {this.props.renderItem({
+          item,
+          index,
+        })}
+      </Component>
+    );
+  }
+
+  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();
+  }
+
+  snapToItem(index: number, animated = true, fireCallback = true) {
+    if (!index || index < 0) {
+      index = 0;
+    }
+
+    const positionIndex = this._getPositionIndex(index);
+
+    if (positionIndex === this._activeItem) {
+      return;
+    }
+
+    this._snapToItem(positionIndex, animated, fireCallback);
+  }
+
+  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);
+  }
+
+  render() {
+    const {
+      loopClonesPerSide = 3,
+      visibleItem = 1,
+      firstItem = 0,
+      getItemLayout,
+      keyExtractor,
+      style,
+      disableIntervalMomentum,
+      enableSnap,
+    } = this.props;
+    const {hideCarousel, containerWidth} = this.state;
+
+    const initialNumPerSide = this._enableLoop() ? loopClonesPerSide : 2;
+    const initialNumToRender =
+      visibleItem > 2
+        ? visibleItem + initialNumPerSide * 2
+        : initialNumPerSide * 2;
+    const maxToRenderPerBatch = initialNumToRender;
+    const windowSize = maxToRenderPerBatch;
+
+    const snapToInterval = enableSnap
+      ? this._getItemMainDimension()
+      : undefined;
+
+    const specificProps = {
+      getItemLayout: getItemLayout || this._getItemLayout,
+      initialScrollIndex: this._getFirstItem(firstItem),
+      keyExtractor: keyExtractor || this._getKeyExtractor,
+      renderItem: this._renderItem,
+    };
+
+    return (
+      <Animated.FlatList
+        {...this.props}
+        {...specificProps}
+        ref={c => (this._carouselRef = c)}
+        overScrollMode={'never'}
+        snapToInterval={snapToInterval}
+        disableIntervalMomentum={disableIntervalMomentum}
+        pointerEvents={hideCarousel ? 'none' : 'auto'}
+        decelerationRate={'fast'}
+        numColumns={1}
+        style={[
+          style,
+          {width: '100%', flexDirection: 'row'},
+          hideCarousel ? {opacity: 0} : {},
+        ]}
+        automaticallyAdjustContentInsets={false}
+        directionalLockEnabled
+        disableScrollViewPanResponder={false}
+        pinchGestureEnabled={false}
+        scrollsToTop={false}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        initialNumToRender={initialNumToRender}
+        maxToRenderPerBatch={maxToRenderPerBatch}
+        windowSize={windowSize}
+        pagingEnabled={enableSnap}
+        data={this._getCustomData()}
+        horizontal
+        scrollEventThrottle={1}
+        onLayout={this._onLayout}
+        onMomentumScrollEnd={this._onMomentumScrollEnd}
+        onScroll={this._onScrollHandler}
+        onTouchStart={this._onTouchStart}
+        onTouchEnd={this._onTouchEnd}
+      />
+    );
+  }
+}
+
+export {Carousel}
+export type {CarouselProps, CarouselRef};