@momo-kits/carousel 0.150.3-beta.20 → 0.151.1-beta.2

package/index.tsx

@@ -1,1470 +1,840 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React from 'react';
 import {
   Animated,
-  I18nManager,
+  Dimensions,
+  GestureResponderEvent,
   LayoutChangeEvent,
-  NativeSyntheticEvent,
   NativeScrollEvent,
+  NativeSyntheticEvent,
   Platform,
   View,
+  ViewStyle,
 } from 'react-native';
-import {
-  defaultAnimatedStyles,
-  defaultScrollInterpolator,
-  shiftAnimatedStyles,
-  stackAnimatedStyles,
-  stackScrollInterpolator,
-  tinderAnimatedStyles,
-  tinderScrollInterpolator,
-} from './animation';
-import { CarouselProps, CarouselRef, Position } from './types';
+import { defaultAnimatedStyles, defaultScrollInterpolator } from './animation';
+import { CarouselProps, CarouselRef, 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 Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
-  const {
-    activeSlideAlignment = 'center',
-    activeSlideOffset = 25,
-    apparitionDelay = 0,
-    autoplay = false,
-    autoplayDelay = 1000,
-    autoplayInterval = 3000,
-    data = [],
-    enableSnap = true,
-    firstItem = 0,
-    inactiveSlideOpacity = 1,
-    inactiveSlideScale = 0.9,
-    inactiveSlideShift = 0,
-    snapToInterval,
-    layout = 'default',
-    layoutCardOffset,
-    loop = false,
-    loopClonesPerSide = 3,
-    scrollEnabled: scrollEnabledProp = true,
-    useScrollView = false,
-    vertical = false,
-    useExperimentalSnap = false,
-    disableIntervalMomentum = false,
-    itemWidth,
-    itemHeight,
-    sliderWidth,
-    sliderHeight,
-    renderItem,
-    scrollInterpolator,
-    slideInterpolatedStyle,
-    slideStyle,
-    containerCustomStyle,
-    contentContainerCustomStyle,
-    style,
-    keyExtractor,
-    getItemLayout: getItemLayoutProp,
-    CellRendererComponent,
-    onScroll,
-    onScrollIndexChanged,
-    onSnapToItem,
-    onMomentumScrollEnd,
-    onLayout,
-    onTouchStart,
-    onTouchEnd,
-  } = props;
-
-  // State
-  const [hideCarousel, setHideCarousel] = useState(!!apparitionDelay);
-  const [interpolators, setInterpolators] = useState<
-    Animated.AnimatedInterpolation<number>[]
-  >([]);
-
-  // Refs for instance variables
-  const mountedRef = useRef(false);
-  const carouselRef = useRef<any>(null);
-  const scrollPosRef = useRef(new Animated.Value(0));
-  const onScrollHandlerRef = useRef<any>(null);
-  const positionsRef = useRef<Position[]>([]);
-  const currentScrollOffsetRef = useRef(0);
-  const scrollEnabledRef = useRef(scrollEnabledProp !== false);
-  const activeItemRef = useRef(0);
-  const onScrollActiveItemRef = useRef(0);
-  const previousFirstItemRef = useRef(0);
-  const previousItemsLengthRef = useRef(0);
-  const onLayoutInitDoneRef = useRef(false);
-
-  // Autoplay refs
-  const autoplayRef = useRef(false);
-  const autoplayingRef = useRef(false);
-  const autoplayTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const autoplayIntervalRef = useRef<ReturnType<typeof setInterval> | null>(
-    null,
-  );
-  const enableAutoplayTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-
-  // Other timeouts
-  const initTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const apparitionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-  const hackSlideAnimationTimeoutRef = useRef<ReturnType<
-    typeof setTimeout
-  > | null>(null);
-  const snapNoMomentumTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-  const androidRepositioningTimeoutRef = useRef<ReturnType<
-    typeof setTimeout
-  > | null>(null);
-
-  // Helper functions
-  const needsScrollView = useCallback(() => {
-    return IS_ANDROID
-      ? useScrollView ||
-          !Animated.FlatList ||
-          shouldUseStackLayout() ||
-          shouldUseTinderLayout()
-      : useScrollView || !Animated.FlatList;
-  }, [useScrollView, layout]);
-
-  const needsRTLAdaptations = useCallback(() => {
-    return IS_RTL && IS_ANDROID && !vertical;
-  }, [vertical]);
-
-  const enableLoop = useCallback(() => {
-    return enableSnap && loop && data && data.length && data.length > 1;
-  }, [enableSnap, loop, data]);
+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,
+  };
 
-  const shouldAnimateSlides = useCallback(() => {
-    return (
-      inactiveSlideOpacity < 1 ||
-      inactiveSlideScale < 1 ||
-      !!scrollInterpolator ||
-      !!slideInterpolatedStyle ||
-      shouldUseShiftLayout() ||
-      shouldUseStackLayout() ||
-      shouldUseTinderLayout()
-    );
-  }, [
-    inactiveSlideOpacity,
-    inactiveSlideScale,
-    scrollInterpolator,
-    slideInterpolatedStyle,
-    layout,
-    inactiveSlideShift,
-  ]);
-
-  const shouldUseShiftLayout = useCallback(() => {
-    return layout === 'default' && inactiveSlideShift !== 0;
-  }, [layout, inactiveSlideShift]);
-
-  const shouldUseStackLayout = useCallback(() => {
-    return layout === 'stack';
-  }, [layout]);
-
-  const shouldUseTinderLayout = useCallback(() => {
-    return layout === 'tinder';
-  }, [layout]);
-
-  const shouldRepositionScroll = useCallback(
-    (index: number) => {
-      const dataLength = data && data.length;
-      if (
-        !enableSnap ||
-        !dataLength ||
-        !enableLoop() ||
-        (index >= loopClonesPerSide && index < dataLength + loopClonesPerSide)
-      ) {
-        return false;
-      }
-      return true;
-    },
-    [data, enableSnap, loopClonesPerSide, enableLoop],
-  );
+  _activeItem;
+  _onScrollActiveItem;
+  _previousFirstItem;
+  _previousItemsLength;
+  _mounted;
+  _positions: Position[];
+  _currentScrollOffset;
+  _scrollEnabled;
+  _initTimeout?: ReturnType<typeof setTimeout>;
+  _apparitionTimeout?: ReturnType<typeof setTimeout>;
+  _enableAutoplayTimeout?: ReturnType<typeof setTimeout>;
+  _autoplayTimeout?: ReturnType<typeof setTimeout>;
+  _snapNoMomentumTimeout?: ReturnType<typeof setTimeout>;
+  _androidRepositioningTimeout?: ReturnType<typeof setTimeout>;
+  _scrollPos?: Animated.Value;
+  _onScrollHandler?: (...args: any[]) => void;
+  _autoplay?: boolean;
+  _autoplaying?: boolean;
+  _autoplayInterval?: ReturnType<typeof setInterval>;
+  _carouselRef: any;
+  _onLayoutInitDone?: boolean;
+
+  constructor(props: CarouselProps) {
+    super(props);
+
+    this.state = {
+      hideCarousel: !!props.apparitionDelay,
+      interpolators: [],
+      containerWidth: screenWidth,
+      itemWidth: screenWidth - Spacing.L * 2,
+    };
 
-  const isMultiple = useCallback((x: number, y: number) => {
-    return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
-  }, []);
-
-  const getCustomData = useCallback(
-    (propsOverride = props) => {
-      const {
-        data: propsData = [],
-        loopClonesPerSide: loopClones = loopClonesPerSide,
-      } = propsOverride;
-      const dataLength = propsData && propsData.length;
-
-      if (!dataLength) {
-        return [];
-      }
+    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);
+  }
 
-      if (!enableLoop()) {
-        return propsData;
-      }
+  componentDidMount() {
+    const { apparitionDelay, autoplay } = this.props;
 
-      let previousItems: any[] = [];
-      let nextItems: any[] = [];
+    this._mounted = true;
+    this._initPositionsAndInterpolators();
 
-      if (loopClones > dataLength) {
-        const dataMultiplier = Math.floor(loopClones / dataLength);
-        const remainder = loopClones % dataLength;
+    // Without 'requestAnimationFrame' or a `0` timeout, images will randomly not be rendered on Android...
+    this._initTimeout = setTimeout(() => {
+      if (!this._mounted) {
+        return;
+      }
 
-        for (let i = 0; i < dataMultiplier; i++) {
-          previousItems.push(...propsData);
-          nextItems.push(...propsData);
+      const apparitionCallback = () => {
+        if (apparitionDelay) {
+          this.setState({ hideCarousel: false });
+        }
+        if (autoplay) {
+          this.startAutoplay();
         }
+      };
 
-        previousItems.unshift(...propsData.slice(-remainder));
-        nextItems.push(...propsData.slice(0, remainder));
+      if (apparitionDelay) {
+        this._apparitionTimeout = setTimeout(() => {
+          apparitionCallback();
+        }, apparitionDelay);
       } else {
-        previousItems = propsData.slice(-loopClones);
-        nextItems = propsData.slice(0, loopClones);
+        apparitionCallback();
       }
+    }, 1);
+  }
 
-      return previousItems.concat(propsData, nextItems);
-    },
-    [data, loopClonesPerSide, enableLoop],
-  );
-
-  const getCustomDataLength = useCallback(
-    (propsOverride = props) => {
-      const {
-        data: propsData = [],
-        loopClonesPerSide: loopClones = loopClonesPerSide,
-      } = propsOverride;
-      const dataLength = propsData && propsData.length;
-
-      if (!dataLength) {
-        return 0;
-      }
+  componentDidUpdate(prevProps: CarouselProps) {
+    const { interpolators } = this.state;
+    const { firstItem = 0, scrollEnabled } = this.props;
+    const itemsLength = this._getCustomDataLength(this.props);
 
-      return enableLoop() ? dataLength + 2 * loopClones : dataLength;
-    },
-    [data, loopClonesPerSide, enableLoop],
-  );
+    if (!itemsLength) {
+      return;
+    }
 
-  const getCustomIndex = useCallback(
-    (index: number, propsOverride = props) => {
-      const itemsLength = getCustomDataLength(propsOverride);
+    const nextFirstItem = this._getFirstItem(firstItem, this.props);
+    let nextActiveItem =
+      typeof this._activeItem !== 'undefined'
+        ? this._activeItem
+        : nextFirstItem;
 
-      if (!itemsLength || typeof index === 'undefined') {
-        return 0;
-      }
+    if (nextActiveItem > itemsLength - 1) {
+      nextActiveItem = itemsLength - 1;
+    }
 
-      return needsRTLAdaptations() ? itemsLength - index - 1 : index;
-    },
-    [getCustomDataLength, needsRTLAdaptations],
-  );
+    if (scrollEnabled !== prevProps.scrollEnabled) {
+      this._setScrollEnabled(scrollEnabled);
+    }
 
-  const getDataIndex = useCallback(
-    (index: number) => {
-      const dataLength = data && data.length;
-      if (!enableLoop() || !dataLength) {
-        return index;
-      }
+    if (interpolators.length !== itemsLength) {
+      this._activeItem = nextActiveItem;
+      this._previousItemsLength = itemsLength;
 
-      if (index >= dataLength + loopClonesPerSide) {
-        return loopClonesPerSide > dataLength
-          ? (index - loopClonesPerSide) % dataLength
-          : index - dataLength - loopClonesPerSide;
-      } else if (index < loopClonesPerSide) {
-        if (loopClonesPerSide > dataLength) {
-          const baseDataIndexes: number[] = [];
-          const dataIndexes: number[] = [];
-          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;
-      }
-    },
-    [data, loopClonesPerSide, enableLoop],
-  );
-
-  const getPositionIndex = useCallback(
-    (index: number) => {
-      return loop ? index + loopClonesPerSide : index;
-    },
-    [loop, loopClonesPerSide],
-  );
-
-  const getSnapOffsets = useCallback(() => {
-    const offset = getItemMainDimension();
-    return [...Array(getCustomDataLength())].map((_, i) => {
-      return i * offset;
-    });
-  }, [getCustomDataLength, itemWidth, itemHeight, vertical]);
+      this._initPositionsAndInterpolators(this.props);
+    } else if (
+      nextFirstItem !== this._previousFirstItem &&
+      nextFirstItem !== this._activeItem
+    ) {
+      this._activeItem = nextFirstItem;
+      this._previousFirstItem = nextFirstItem;
+      this._snapToItem(nextFirstItem, false, true, true);
+    }
 
-  const getFirstItem = useCallback(
-    (index: number, propsOverride = props) => {
-      const { loopClonesPerSide: loopClones = loopClonesPerSide } =
-        propsOverride;
-      const itemsLength = getCustomDataLength(propsOverride);
+    if (this.props.onScroll !== prevProps.onScroll) {
+      this._setScrollHandler(this.props);
+    }
+  }
 
-      if (!itemsLength || index > itemsLength - 1 || index < 0) {
-        return 0;
-      }
+  componentWillUnmount() {
+    this._mounted = false;
+    this.stopAutoplay();
+    if (this._initTimeout != null) clearTimeout(this._initTimeout);
+    if (this._apparitionTimeout != null) clearTimeout(this._apparitionTimeout);
+    if (this._enableAutoplayTimeout != null)
+      clearTimeout(this._enableAutoplayTimeout);
+    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
+    if (this._snapNoMomentumTimeout != null)
+      clearTimeout(this._snapNoMomentumTimeout);
+    if (this._androidRepositioningTimeout != null)
+      clearTimeout(this._androidRepositioningTimeout);
+  }
 
-      return enableLoop() ? index + loopClones : index;
-    },
-    [getCustomDataLength, enableLoop, loopClonesPerSide],
-  );
+  _setScrollHandler(props: CarouselProps) {
+    const scrollEventConfig = {
+      listener: this._onScroll,
+      useNativeDriver: true,
+    };
+    this._scrollPos = new Animated.Value(0);
+    const argMapping = [
+      { nativeEvent: { contentOffset: { x: this._scrollPos } } },
+    ];
 
-  const getWrappedRef = useCallback(() => {
-    if (
-      carouselRef.current &&
-      ((needsScrollView() && carouselRef.current.scrollTo) ||
-        (!needsScrollView() && carouselRef.current.scrollToOffset))
-    ) {
-      return carouselRef.current;
+    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);
     }
-    return (
-      carouselRef.current &&
-      carouselRef.current.getNode &&
-      carouselRef.current.getNode()
+    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)
     );
-  }, [needsScrollView]);
+  }
 
-  const getScrollEnabled = useCallback(() => {
-    return scrollEnabledRef.current;
-  }, []);
+  _isMultiple(x: number, y: number) {
+    return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
+  }
 
-  const setScrollEnabled = useCallback(
-    (enabled = true) => {
-      const wrappedRef = getWrappedRef();
+  _getCustomData(props = this.props) {
+    const { data, loopClonesPerSide = 3 } = props;
+    const dataLength = data && data.length;
 
-      if (!wrappedRef || !wrappedRef.setNativeProps) {
-        return;
-      }
+    if (!dataLength) {
+      return [];
+    }
 
-      wrappedRef.setNativeProps({ scrollEnabled: enabled });
-      scrollEnabledRef.current = enabled;
-    },
-    [getWrappedRef],
-  );
+    if (!this._enableLoop()) {
+      return data;
+    }
 
-  const getItemMainDimension = useCallback(() => {
-    return vertical ? itemHeight : itemWidth;
-  }, [vertical, itemHeight, itemWidth]);
+    let previousItems = [];
+    let nextItems = [];
 
-  const getItemScrollOffset = useCallback((index: number) => {
-    return (
-      positionsRef.current &&
-      positionsRef.current[index] &&
-      positionsRef.current[index].start
-    );
-  }, []);
-
-  const getItemLayout = useCallback(
-    (_: any, index: number) => {
-      const itemMainDimension = getItemMainDimension();
-      return {
-        index,
-        length: itemMainDimension,
-        offset: itemMainDimension * index,
-      };
-    },
-    [getItemMainDimension],
-  );
-
-  const getCellRendererComponent = useCallback(
-    ({ children, index, style: cellStyle, ...cellProps }: any) => {
-      const customStyle = [
-        cellStyle,
-        !IS_ANDROID ? { zIndex: getCustomDataLength() - index } : {},
-      ];
-
-      return (
-        <View style={customStyle} key={index} {...cellProps}>
-          {children}
-        </View>
-      );
-    },
-    [getCustomDataLength],
-  );
-
-  const getKeyExtractor = useCallback(
-    (_: any, index: number) => {
-      return needsScrollView()
-        ? `scrollview-item-${index}`
-        : `flatlist-item-${index}`;
-    },
-    [needsScrollView],
-  );
-
-  const getScrollOffset = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      return (
-        (event &&
-          event.nativeEvent &&
-          event.nativeEvent.contentOffset &&
-          event.nativeEvent.contentOffset[vertical ? 'y' : 'x']) ||
-        0
-      );
-    },
-    [vertical],
-  );
-
-  const getContainerInnerMargin = useCallback(
-    (opposite = false) => {
-      if (
-        (activeSlideAlignment === 'start' && !opposite) ||
-        (activeSlideAlignment === 'end' && opposite)
-      ) {
-        return 0;
-      } else if (
-        (activeSlideAlignment === 'end' && !opposite) ||
-        (activeSlideAlignment === 'start' && opposite)
-      ) {
-        return vertical ? sliderHeight - itemHeight : sliderWidth - itemWidth;
-      } else {
-        return vertical
-          ? (sliderHeight - itemHeight) / 2
-          : (sliderWidth - itemWidth) / 2;
-      }
-    },
-    [
-      activeSlideAlignment,
-      vertical,
-      sliderHeight,
-      itemHeight,
-      sliderWidth,
-      itemWidth,
-    ],
-  );
-
-  const getActiveSlideOffset = useCallback(() => {
-    const itemMainDimension = getItemMainDimension();
-    const minOffset = 10;
-    return itemMainDimension / 2 - activeSlideOffset >= minOffset
-      ? activeSlideOffset
-      : minOffset;
-  }, [getItemMainDimension, activeSlideOffset]);
-
-  const getActiveItem = useCallback(
-    (offset: number) => {
-      const itemMainDimension = getItemMainDimension();
-      const center = offset + itemMainDimension / 2;
-      const activeOffset = getActiveSlideOffset();
-      const lastIndex = positionsRef.current.length - 1;
-      let itemIndex;
-
-      if (offset <= 0) {
-        return 0;
-      }
+    if (loopClonesPerSide > dataLength) {
+      const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
+      const remainder = loopClonesPerSide % dataLength;
 
-      if (
-        positionsRef.current[lastIndex] &&
-        offset >= positionsRef.current[lastIndex].start
-      ) {
-        return lastIndex;
+      for (let i = 0; i < dataMultiplier; i++) {
+        previousItems.push(...data);
+        nextItems.push(...data);
       }
 
-      for (let i = 0; i < positionsRef.current.length; i++) {
-        const { start, end } = positionsRef.current[i];
-        if (center + activeOffset >= start && center - activeOffset <= end) {
-          itemIndex = i;
-          break;
-        }
-      }
+      previousItems.unshift(...data.slice(-remainder));
+      nextItems.push(...data.slice(0, remainder));
+    } else {
+      previousItems = data.slice(-loopClonesPerSide);
+      nextItems = data.slice(0, loopClonesPerSide);
+    }
 
-      return itemIndex || 0;
-    },
-    [getItemMainDimension, getActiveSlideOffset],
-  );
-
-  const getSlideInterpolatedStyle = useCallback(
-    (index: number, animatedValue: Animated.AnimatedInterpolation<number>) => {
-      if (slideInterpolatedStyle) {
-        return slideInterpolatedStyle(index, animatedValue, props);
-      } else if (shouldUseTinderLayout()) {
-        return tinderAnimatedStyles(
-          index,
-          animatedValue,
-          props,
-          layoutCardOffset,
-        );
-      } else if (shouldUseStackLayout()) {
-        return stackAnimatedStyles(
-          index,
-          animatedValue,
-          props,
-          layoutCardOffset,
-        );
-      } else if (shouldUseShiftLayout()) {
-        return shiftAnimatedStyles(index, animatedValue, props);
-      } else {
-        return defaultAnimatedStyles(index, animatedValue, props);
-      }
-    },
-    [
-      slideInterpolatedStyle,
-      shouldUseTinderLayout,
-      shouldUseStackLayout,
-      shouldUseShiftLayout,
-      layoutCardOffset,
-      props,
-    ],
-  );
-
-  const initPositionsAndInterpolators = useCallback(
-    (propsOverride = props) => {
-      const { data: propsData = [], scrollInterpolator: scrollInterp } =
-        propsOverride;
-      const itemMainDimension = getItemMainDimension();
-
-      if (!propsData || !propsData.length) {
-        return;
-      }
+    return previousItems.concat(data, nextItems);
+  }
 
-      // Guard against invalid dimensions that would cause NaN in interpolators
-      if (
-        !itemMainDimension ||
-        itemMainDimension <= 0 ||
-        !isFinite(itemMainDimension)
-      ) {
-        return;
-      }
+  _getCustomDataLength(props = this.props) {
+    const { data, loopClonesPerSide = 3 } = props;
+    const dataLength = data && data.length;
 
-      const newInterpolators: Animated.AnimatedInterpolation<number>[] = [];
-      positionsRef.current = [];
+    if (!dataLength) {
+      return 0;
+    }
 
-      getCustomData(propsOverride).forEach((_itemData: any, index: number) => {
-        const _index = getCustomIndex(index, propsOverride);
-        let animatedValue: Animated.AnimatedInterpolation<number>;
+    return this._enableLoop() ? dataLength + 2 * loopClonesPerSide : dataLength;
+  }
 
-        positionsRef.current[index] = {
-          start: index * itemMainDimension,
-          end: index * itemMainDimension + itemMainDimension,
-        };
+  _getCustomIndex(index: number, props = this.props) {
+    const itemsLength = this._getCustomDataLength(props);
 
-        if (!shouldAnimateSlides() || !scrollPosRef.current) {
-          animatedValue = new Animated.Value(1) as any;
-        } else {
-          let interpolator;
-
-          if (scrollInterp) {
-            interpolator = scrollInterp(_index, propsOverride);
-          } else if (shouldUseStackLayout()) {
-            interpolator = stackScrollInterpolator(_index, propsOverride);
-          } else if (shouldUseTinderLayout()) {
-            interpolator = tinderScrollInterpolator(_index, propsOverride);
-          }
-
-          if (
-            !interpolator ||
-            !interpolator.inputRange ||
-            !interpolator.outputRange
-          ) {
-            interpolator = defaultScrollInterpolator(_index, propsOverride);
-          }
-
-          // Validate interpolator ranges to prevent NaN errors
-          const hasValidRange =
-            interpolator.inputRange &&
-            interpolator.inputRange.every((val: number) => isFinite(val)) &&
-            interpolator.outputRange &&
-            interpolator.outputRange.every((val: number) => isFinite(val));
-
-          if (!hasValidRange) {
-            animatedValue = new Animated.Value(1) as any;
-          } else {
-            animatedValue = scrollPosRef.current.interpolate({
-              ...interpolator,
-              extrapolate: 'clamp',
-            });
-          }
+    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);
         }
 
-        newInterpolators.push(animatedValue);
-      });
-
-      setInterpolators(newInterpolators);
-    },
-    [
-      data,
-      getItemMainDimension,
-      getCustomData,
-      getCustomIndex,
-      shouldAnimateSlides,
-      shouldUseStackLayout,
-      shouldUseTinderLayout,
-      scrollInterpolator,
-    ],
-  );
-
-  const hackActiveSlideAnimation = useCallback(
-    (index: number, scrollValue = 1) => {
-      const offset = getItemScrollOffset(index);
+        for (let j = 0; j < dataMultiplier; j++) {
+          dataIndexes.push(...baseDataIndexes);
+        }
 
-      if (
-        !mountedRef.current ||
-        !carouselRef.current ||
-        typeof offset === 'undefined'
-      ) {
-        return;
+        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);
 
-      const multiplier = currentScrollOffsetRef.current === 0 ? 1 : -1;
-      const scrollDelta = scrollValue * multiplier;
+    if (!itemsLength || index > itemsLength - 1 || index < 0) {
+      return 0;
+    }
 
-      scrollTo({ offset: offset + scrollDelta, animated: false });
+    return this._enableLoop() ? index + loopClonesPerSide : index;
+  }
 
-      if (hackSlideAnimationTimeoutRef.current) {
-        clearTimeout(hackSlideAnimationTimeoutRef.current);
-      }
-      hackSlideAnimationTimeoutRef.current = setTimeout(() => {
-        scrollTo({ offset, animated: false });
-      }, 1);
-    },
-    [getItemScrollOffset],
-  );
-
-  const repositionScroll = useCallback(
-    (index: number, animated = false) => {
-      const dataLength = data && data.length;
-
-      if (typeof index === 'undefined' || !shouldRepositionScroll(index)) {
-        return;
-      }
+  _getWrappedRef() {
+    return this._carouselRef;
+  }
 
-      let repositionTo = index;
+  _getScrollEnabled() {
+    return this._scrollEnabled;
+  }
 
-      if (index >= dataLength + loopClonesPerSide) {
-        repositionTo = index - dataLength;
-      } else if (index < loopClonesPerSide) {
-        repositionTo = index + dataLength;
-      }
+  _setScrollEnabled(scrollEnabled = true) {
+    this._scrollEnabled = scrollEnabled;
+  }
+
+  _getItemMainDimension() {
+    const { itemWidth } = this.state;
+    const { full } = this.props;
+    return full ? itemWidth : itemWidth + Spacing.S;
+  }
 
-      snapToItem(repositionTo, animated, false);
-    },
-    [data, loopClonesPerSide, shouldRepositionScroll],
-  );
+  _getItemScrollOffset(index: number) {
+    return (
+      this._positions && this._positions[index] && this._positions[index].start
+    );
+  }
 
-  const scrollTo = useCallback(
-    ({
-      offset,
+  _getItemLayout(_: any, index: number) {
+    const itemMainDimension = this._getItemMainDimension();
+    return {
       index,
-      animated = true,
-    }: {
-      offset?: number;
-      index?: number;
-      animated?: boolean;
-    }) => {
-      const wrappedRef = getWrappedRef();
-      if (
-        !mountedRef.current ||
-        !wrappedRef ||
-        (typeof offset === 'undefined' && typeof index === 'undefined')
-      ) {
-        return;
-      }
+      length: itemMainDimension,
+      offset: itemMainDimension * index,
+    };
+  }
 
-      let scrollToOffset;
-      if (typeof index !== 'undefined') {
-        scrollToOffset = getItemScrollOffset(index);
-      } else {
-        scrollToOffset = offset;
-      }
+  _getKeyExtractor(_: any, index: any) {
+    return `flatlist-item-${index}`;
+  }
 
-      if (typeof scrollToOffset === 'undefined') {
-        return;
-      }
+  _getScrollOffset(event: NativeSyntheticEvent<NativeScrollEvent>) {
+    return event.nativeEvent.contentOffset.x;
+  }
 
-      const options = needsScrollView()
-        ? {
-            x: vertical ? 0 : scrollToOffset,
-            y: vertical ? scrollToOffset : 0,
-            animated,
-          }
-        : {
-            offset: scrollToOffset,
-            animated,
-          };
-
-      if (needsScrollView()) {
-        wrappedRef.scrollTo(options);
-      } else {
-        wrappedRef.scrollToOffset(options);
-      }
-    },
-    [getWrappedRef, getItemScrollOffset, needsScrollView, vertical],
-  );
-
-  const handleTouchStart = useCallback(
-    (event: any) => {
-      if (getScrollEnabled() !== false && autoplayingRef.current) {
-        pauseAutoPlay();
-      }
+  _getActiveSlideOffset() {
+    const { activeSlideOffset = 0 } = this.props;
+    const itemMainDimension = this._getItemMainDimension();
+    const minOffset = 10;
+    return itemMainDimension / 2 - activeSlideOffset >= minOffset
+      ? activeSlideOffset
+      : minOffset;
+  }
 
-      onTouchStart && onTouchStart(event);
-    },
-    [getScrollEnabled, onTouchStart],
-  );
+  _getActiveItem(offset: number) {
+    const itemMainDimension = this._getItemMainDimension();
+    const center = offset + itemMainDimension / 2;
+    const activeSlideOffset = this._getActiveSlideOffset();
+    const lastIndex = this._positions.length - 1;
+    let itemIndex;
 
-  const handleTouchEnd = useCallback(
-    (event: any) => {
-      if (
-        getScrollEnabled() &&
-        autoplayRef.current &&
-        !autoplayingRef.current
-      ) {
-        startAutoplay();
-      }
+    if (offset <= 0) {
+      return 0;
+    }
 
-      onTouchEnd && onTouchEnd(event);
-    },
-    [getScrollEnabled, onTouchEnd],
-  );
-
-  const handleScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const scrollOffset = event
-        ? getScrollOffset(event)
-        : currentScrollOffsetRef.current;
-      const nextActiveItem = getActiveItem(scrollOffset);
-      const dataLength = getCustomDataLength();
-      const lastItemScrollOffset = getItemScrollOffset(dataLength - 1);
-
-      currentScrollOffsetRef.current = scrollOffset;
-
-      if (nextActiveItem !== onScrollActiveItemRef.current) {
-        onScrollActiveItemRef.current = nextActiveItem;
-        onScrollIndexChanged &&
-          onScrollIndexChanged(getDataIndex(nextActiveItem));
-      }
+    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 (
-        (IS_IOS && scrollOffset >= lastItemScrollOffset) ||
-        (IS_ANDROID &&
-          Math.floor(scrollOffset) >= Math.floor(lastItemScrollOffset))
+        center + activeSlideOffset >= start &&
+        center - activeSlideOffset <= end
       ) {
-        activeItemRef.current = nextActiveItem;
-        repositionScroll(nextActiveItem);
+        itemIndex = i;
+        break;
       }
+    }
 
-      if (typeof onScroll === 'function' && event) {
-        onScroll(event);
-      }
-    },
-    [
-      getScrollOffset,
-      getActiveItem,
-      getCustomDataLength,
-      getItemScrollOffset,
-      getDataIndex,
-      onScrollIndexChanged,
-      onScroll,
-      repositionScroll,
-    ],
-  );
-
-  const handleMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const scrollOffset = event
-        ? getScrollOffset(event)
-        : currentScrollOffsetRef.current;
-      const nextActiveItem = getActiveItem(scrollOffset);
-      const hasSnapped = isMultiple(
-        scrollOffset,
-        vertical ? itemHeight : itemWidth,
-      );
-
-      if (nextActiveItem !== activeItemRef.current) {
-        activeItemRef.current = nextActiveItem;
-        onSnapToItem && onSnapToItem(getDataIndex(nextActiveItem));
-
-        if (hasSnapped && IS_ANDROID) {
-          repositionScroll(nextActiveItem);
-        } else if (IS_IOS) {
-          repositionScroll(nextActiveItem);
-        }
-      }
+    return itemIndex || 0;
+  }
 
-      onMomentumScrollEnd && onMomentumScrollEnd(event);
+  _initPositionsAndInterpolators(props = this.props) {
+    const { data } = props;
+    const itemMainDimension = this._getItemMainDimension();
 
-      if (IS_ANDROID && autoplayRef.current && !autoplayingRef.current) {
-        if (enableAutoplayTimeoutRef.current) {
-          clearTimeout(enableAutoplayTimeoutRef.current);
-        }
-        enableAutoplayTimeoutRef.current = setTimeout(() => {
-          startAutoplay();
-        }, autoplayDelay);
-      }
-    },
-    [
-      getScrollOffset,
-      getActiveItem,
-      isMultiple,
-      vertical,
-      itemHeight,
-      itemWidth,
-      onSnapToItem,
-      getDataIndex,
-      repositionScroll,
-      onMomentumScrollEnd,
-      autoplayDelay,
-    ],
-  );
-
-  const handleLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      if (onLayoutInitDoneRef.current) {
-        initPositionsAndInterpolators();
-        snapToItem(activeItemRef.current, false, false, true);
-      } else {
-        onLayoutInitDoneRef.current = true;
-      }
+    if (!data || !data.length) {
+      return;
+    }
 
-      onLayout && onLayout(event);
-    },
-    [initPositionsAndInterpolators, onLayout],
-  );
-
-  const snapToItem = useCallback(
-    (
-      index: number,
-      animated = true,
-      fireCallback = true,
-      forceScrollTo = false,
-    ) => {
-      const itemsLength = getCustomDataLength();
-      const wrappedRef = getWrappedRef();
-      if (!itemsLength || !wrappedRef) {
-        return;
-      }
+    const interpolators: any[] = [];
+    this._positions = [];
 
-      if (!index || index < 0) {
-        index = 0;
-      } else if (itemsLength > 0 && index >= itemsLength) {
-        index = itemsLength - 1;
-      }
+    this._getCustomData(props).forEach((_itemData, index) => {
+      const _index = this._getCustomIndex(index, props);
+      let animatedValue;
 
-      if (index === activeItemRef.current && !forceScrollTo) {
-        return;
-      }
+      this._positions[index] = {
+        start: index * itemMainDimension,
+        end: index * itemMainDimension + itemMainDimension,
+      };
 
-      const offset = getItemScrollOffset(index);
+      if (!this._shouldAnimateSlides(props) || !this._scrollPos) {
+        animatedValue = new Animated.Value(1);
+      } else {
+        let interpolator = defaultScrollInterpolator(
+          _index,
+          this.state.itemWidth,
+        );
 
-      if (offset === undefined) {
-        return;
+        animatedValue = this._scrollPos.interpolate({
+          ...interpolator,
+          extrapolate: 'clamp',
+        });
       }
 
-      scrollTo({ offset, animated });
+      interpolators.push(animatedValue);
+    });
 
-      const requiresManualTrigger = !animated || IS_ANDROID;
-      if (requiresManualTrigger) {
-        activeItemRef.current = index;
+    this.setState({ interpolators });
+  }
 
-        if (fireCallback) {
-          onSnapToItem && onSnapToItem(getDataIndex(index));
-        }
+  _repositionScroll(index: number, animated = false) {
+    const { data, loopClonesPerSide = 3 } = this.props;
+    const dataLength = data && data.length;
 
-        if (IS_ANDROID && shouldRepositionScroll(index)) {
-          if (animated) {
-            if (androidRepositioningTimeoutRef.current) {
-              clearTimeout(androidRepositioningTimeoutRef.current);
-            }
-            androidRepositioningTimeoutRef.current = setTimeout(() => {
-              repositionScroll(index, false);
-            }, 400);
-          } else {
-            repositionScroll(index);
-          }
-        }
-      }
-    },
-    [
-      getCustomDataLength,
-      getWrappedRef,
-      getItemScrollOffset,
-      scrollTo,
-      onSnapToItem,
-      getDataIndex,
-      shouldRepositionScroll,
-      repositionScroll,
-    ],
-  );
-
-  const startAutoplay = useCallback(() => {
-    autoplayRef.current = true;
-
-    if (autoplayingRef.current) {
+    if (typeof index === 'undefined' || !this._shouldRepositionScroll(index)) {
       return;
     }
 
-    if (autoplayTimeoutRef.current) {
-      clearTimeout(autoplayTimeoutRef.current);
-    }
-    autoplayTimeoutRef.current = setTimeout(() => {
-      autoplayingRef.current = true;
-      autoplayIntervalRef.current = setInterval(() => {
-        if (autoplayingRef.current) {
-          snapToNext();
-        }
-      }, autoplayInterval);
-    }, autoplayDelay);
-  }, [autoplayInterval, autoplayDelay]);
+    let repositionTo = index;
 
-  const pauseAutoPlay = useCallback(() => {
-    autoplayingRef.current = false;
-    if (autoplayTimeoutRef.current) {
-      clearTimeout(autoplayTimeoutRef.current);
-    }
-    if (enableAutoplayTimeoutRef.current) {
-      clearTimeout(enableAutoplayTimeoutRef.current);
+    if (index >= dataLength + loopClonesPerSide) {
+      repositionTo = index - dataLength;
+    } else if (index < loopClonesPerSide) {
+      repositionTo = index + dataLength;
     }
-    if (autoplayIntervalRef.current) {
-      clearInterval(autoplayIntervalRef.current);
+
+    this._snapToItem(repositionTo, animated, false);
+  }
+
+  _onTouchStart(event: any) {
+    const { onTouchStart } = this.props;
+
+    if (this._getScrollEnabled() !== false && this._autoplaying) {
+      this.pauseAutoPlay();
     }
-  }, []);
 
-  const stopAutoplay = useCallback(() => {
-    autoplayRef.current = false;
-    pauseAutoPlay();
-  }, [pauseAutoPlay]);
+    onTouchStart && onTouchStart(event);
+  }
 
-  const snapToItemPublic = useCallback(
-    (index: number, animated = true, fireCallback = true) => {
-      if (!index || index < 0) {
-        index = 0;
-      }
+  _onTouchEnd(event: GestureResponderEvent) {
+    const { onTouchEnd } = this.props;
 
-      const positionIndex = getPositionIndex(index);
+    if (
+      this._getScrollEnabled() !== false &&
+      this._autoplay &&
+      !this._autoplaying
+    ) {
+      this.startAutoplay();
+    }
 
-      if (positionIndex === activeItemRef.current) {
-        return;
-      }
+    onTouchEnd && onTouchEnd(event);
+  }
 
-      snapToItem(positionIndex, animated, fireCallback);
-    },
-    [getPositionIndex, snapToItem],
-  );
+  _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);
 
-  const snapToNext = useCallback(
-    (animated = true, fireCallback = true) => {
-      const itemsLength = getCustomDataLength();
+    this._currentScrollOffset = scrollOffset;
 
-      let newIndex = activeItemRef.current + 1;
-      if (newIndex > itemsLength - 1) {
-        newIndex = 0;
-      }
-      snapToItem(newIndex, animated, fireCallback);
-    },
-    [getCustomDataLength, snapToItem],
-  );
-
-  const snapToPrev = useCallback(
-    (animated = true, fireCallback = true) => {
-      const itemsLength = getCustomDataLength();
-
-      let newIndex = activeItemRef.current - 1;
-      if (newIndex < 0) {
-        newIndex = itemsLength - 1;
-      }
-      snapToItem(newIndex, animated, fireCallback);
-    },
-    [getCustomDataLength, snapToItem],
-  );
-
-  const triggerRenderingHack = useCallback(
-    (offset = 1) => {
-      hackActiveSlideAnimation(activeItemRef.current, offset);
-    },
-    [hackActiveSlideAnimation],
-  );
-
-  // Display warnings
-  const displayWarnings = useCallback(() => {
-    const pluginName = 'react-native-snap-carousel';
-
-    if (!vertical && (!sliderWidth || !itemWidth)) {
-      console.error(
-        `${pluginName}: You need to specify both 'sliderWidth' and 'itemWidth' for horizontal carousels`,
-      );
-    }
-    if (vertical && (!sliderHeight || !itemHeight)) {
-      console.error(
-        `${pluginName}: You need to specify both 'sliderHeight' and 'itemHeight' for vertical carousels`,
-      );
+    if (nextActiveItem !== this._onScrollActiveItem) {
+      this._onScrollActiveItem = nextActiveItem;
+      onScrollIndexChanged &&
+        onScrollIndexChanged(this._getDataIndex(nextActiveItem));
+
+      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
     }
-  }, [vertical, sliderWidth, itemWidth, sliderHeight, itemHeight]);
 
-  // Set scroll handler
-  const setScrollHandler = useCallback(() => {
-    const scrollEventConfig = {
-      listener: handleScroll,
-      useNativeDriver: true,
-    };
-    scrollPosRef.current = new Animated.Value(0);
-    const argMapping = vertical
-      ? [{ nativeEvent: { contentOffset: { y: scrollPosRef.current } } }]
-      : [{ nativeEvent: { contentOffset: { x: scrollPosRef.current } } }];
+    if (
+      (IS_IOS && scrollOffset > lastItemScrollOffset) ||
+      (IS_ANDROID &&
+        Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
+    ) {
+      this._activeItem = nextActiveItem;
+      this._repositionScroll(nextActiveItem);
+    }
 
-    if (onScroll && Array.isArray((onScroll as any)._argMapping)) {
-      argMapping.pop();
-      const [argMap] = (onScroll as any)._argMapping;
-      if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
-        scrollPosRef.current =
-          argMap.nativeEvent.contentOffset.x ||
-          argMap.nativeEvent.contentOffset.y ||
-          scrollPosRef.current;
-      }
-      argMapping.push(...(onScroll as any)._argMapping);
+    if (typeof onScroll === 'function' && event) {
+      onScroll(event);
     }
-    onScrollHandlerRef.current = Animated.event(argMapping, scrollEventConfig);
-  }, [handleScroll, vertical, onScroll]);
-
-  // Expose public methods via ref
-  useImperativeHandle(
-    ref,
-    () => ({
-      snapToItem: snapToItemPublic,
-      snapToNext,
-      snapToPrev,
-      startAutoplay,
-      pauseAutoPlay,
-      stopAutoplay,
-      triggerRenderingHack,
-      get realIndex() {
-        return activeItemRef.current;
-      },
-      get currentIndex() {
-        return getDataIndex(activeItemRef.current);
-      },
-      get currentScrollPosition() {
-        return currentScrollOffsetRef.current;
-      },
-    }),
-    [
-      snapToItemPublic,
-      snapToNext,
-      snapToPrev,
-      startAutoplay,
-      pauseAutoPlay,
-      stopAutoplay,
-      triggerRenderingHack,
-      getDataIndex,
-    ],
-  );
-
-  // componentDidMount
-  useEffect(() => {
-    mountedRef.current = true;
-    initPositionsAndInterpolators();
-    displayWarnings();
-    setScrollHandler();
-
-    initTimeoutRef.current = setTimeout(() => {
-      if (!mountedRef.current) {
-        return;
-      }
+  }
 
-      const apparitionCallback = () => {
-        if (apparitionDelay) {
-          setHideCarousel(false);
-        }
-        if (autoplay) {
-          startAutoplay();
-        }
-      };
+  _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 (needsScrollView()) {
-        const _firstItem = getFirstItem(firstItem);
-        snapToItem(_firstItem, false, false, true);
-      }
+    if (nextActiveItem !== this._activeItem) {
+      this._activeItem = nextActiveItem;
+      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
 
-      if (apparitionDelay) {
-        apparitionTimeoutRef.current = setTimeout(() => {
-          apparitionCallback();
-        }, apparitionDelay);
-      } else {
-        apparitionCallback();
+      if (hasSnapped && IS_ANDROID) {
+        this._repositionScroll(nextActiveItem);
+      } else if (IS_IOS) {
+        this._repositionScroll(nextActiveItem);
       }
-    }, 1);
+    }
 
-    return () => {
-      mountedRef.current = false;
-      stopAutoplay();
-      if (initTimeoutRef.current) clearTimeout(initTimeoutRef.current);
-      if (apparitionTimeoutRef.current)
-        clearTimeout(apparitionTimeoutRef.current);
-      if (hackSlideAnimationTimeoutRef.current)
-        clearTimeout(hackSlideAnimationTimeoutRef.current);
-      if (enableAutoplayTimeoutRef.current)
-        clearTimeout(enableAutoplayTimeoutRef.current);
-      if (autoplayTimeoutRef.current) clearTimeout(autoplayTimeoutRef.current);
-      if (snapNoMomentumTimeoutRef.current)
-        clearTimeout(snapNoMomentumTimeoutRef.current);
-      if (androidRepositioningTimeoutRef.current)
-        clearTimeout(androidRepositioningTimeoutRef.current);
-    };
-  }, []);
+    onMomentumScrollEnd && onMomentumScrollEnd(event);
 
-  // componentDidUpdate - handle scrollEnabled changes
-  useEffect(() => {
-    if (scrollEnabledProp !== scrollEnabledRef.current) {
-      setScrollEnabled(scrollEnabledProp);
+    if (IS_ANDROID && this._autoplay && !this._autoplaying) {
+      if (this._enableAutoplayTimeout != null)
+        clearTimeout(this._enableAutoplayTimeout);
+      this._enableAutoplayTimeout = setTimeout(() => {
+        this.startAutoplay();
+      }, autoplayDelay);
     }
-  }, [scrollEnabledProp, setScrollEnabled]);
+  }
 
-  // componentDidUpdate - handle data/size changes
-  useEffect(() => {
-    const itemsLength = getCustomDataLength();
+  _onLayout(event: LayoutChangeEvent) {
+    const { onLayout, visibleItem = 1 } = this.props;
 
-    if (!itemsLength) {
-      return;
+    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(
+            (containerWidth * 0.9 - visibleItem * Spacing.S) / visibleItem,
+          );
+    if (this.props.itemWidth) {
+      itemWidth = this.props.itemWidth;
+    }
+    if (this.props.full) {
+      itemWidth = containerWidth;
     }
 
-    const nextFirstItem = getFirstItem(firstItem);
-    let nextActiveItem =
-      typeof activeItemRef.current !== 'undefined'
-        ? activeItemRef.current
-        : nextFirstItem;
+    this.setState({ containerWidth, itemWidth });
 
-    const hasNewSize =
-      (vertical &&
-        (previousItemsLengthRef.current !== itemsLength ||
-          previousItemsLengthRef.current === 0)) ||
-      (!vertical &&
-        (previousItemsLengthRef.current !== itemsLength ||
-          previousItemsLengthRef.current === 0));
+    onLayout && onLayout(event);
+  }
 
-    if (nextActiveItem > itemsLength - 1) {
-      nextActiveItem = itemsLength - 1;
+  _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 (interpolators.length !== itemsLength || hasNewSize) {
-      activeItemRef.current = nextActiveItem;
-      previousItemsLengthRef.current = itemsLength;
+    if (!index || index < 0) {
+      index = 0;
+    } else if (itemsLength > 0 && index >= itemsLength) {
+      index = itemsLength - 1;
+    }
 
-      initPositionsAndInterpolators();
-      if (previousItemsLengthRef.current > itemsLength) {
-        hackActiveSlideAnimation(nextActiveItem);
+    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 (hasNewSize) {
-        snapToItem(nextActiveItem, false, false, true);
+      if (IS_ANDROID && this._shouldRepositionScroll(index)) {
+        if (animated) {
+          this._androidRepositioningTimeout = setTimeout(() => {
+            this._repositionScroll(index, false);
+          }, 400);
+        } else {
+          this._repositionScroll(index);
+        }
       }
-    } else if (
-      nextFirstItem !== previousFirstItemRef.current &&
-      nextFirstItem !== activeItemRef.current
-    ) {
-      activeItemRef.current = nextFirstItem;
-      previousFirstItemRef.current = nextFirstItem;
-      snapToItem(nextFirstItem, false, true, true);
     }
-  }, [
-    data,
-    firstItem,
-    interpolators.length,
-    vertical,
-    itemWidth,
-    itemHeight,
-    sliderWidth,
-    sliderHeight,
-  ]);
-
-  // componentDidUpdate - handle onScroll prop changes
-  useEffect(() => {
-    setScrollHandler();
-  }, [onScroll]);
-
-  // Render item
-  const renderItemComponent = useCallback(
-    ({ item, index }: { item: any; index: number }) => {
-      const animatedValue = interpolators && interpolators[index];
-
-      if (typeof animatedValue === 'undefined') {
-        return null;
-      }
+  }
 
-      const animate = shouldAnimateSlides();
-      const Component = animate ? Animated.View : View;
-      const animatedStyle = animate
-        ? getSlideInterpolatedStyle(index, animatedValue)
-        : {};
-      const dataIndex = getDataIndex(index);
-
-      const mainDimension = vertical
-        ? { height: itemHeight }
-        : { width: itemWidth };
-      const specificProps = needsScrollView()
-        ? {
-            key: keyExtractor
-              ? keyExtractor(item, index)
-              : getKeyExtractor(item, index),
-          }
-        : {};
-
-      return (
-        <Component
-          style={[mainDimension, slideStyle, animatedStyle]}
-          pointerEvents="box-none"
-          {...specificProps}
-        >
-          {vertical
-            ? renderItem(
-                {
-                  item,
-                  index,
-                  dataIndex,
-                  realIndex: getDataIndex(index),
-                  activeIndex: getDataIndex(activeItemRef.current),
-                },
-                {
-                  scrollPosition: scrollPosRef.current,
-                  carouselRef: carouselRef.current,
-                  vertical: vertical,
-                  sliderHeight: sliderHeight,
-                  itemHeight: itemHeight,
-                },
-              )
-            : renderItem(
-                {
-                  item,
-                  index,
-                  dataIndex,
-                  realIndex: getDataIndex(index),
-                  activeIndex: getDataIndex(activeItemRef.current),
-                },
-                {
-                  scrollPosition: scrollPosRef.current,
-                  carouselRef: carouselRef.current,
-                  vertical: false,
-                  sliderWidth: sliderWidth,
-                  itemWidth: itemWidth,
-                },
-              )}
-        </Component>
-      );
-    },
-    [
-      interpolators,
-      shouldAnimateSlides,
-      getSlideInterpolatedStyle,
-      getDataIndex,
-      vertical,
-      itemHeight,
-      itemWidth,
-      needsScrollView,
-      keyExtractor,
-      getKeyExtractor,
-      slideStyle,
-      renderItem,
-      sliderHeight,
-      sliderWidth,
-    ],
-  );
-
-  // Get component props
-  const getComponentOverridableProps = useCallback(() => {
-    const visibleItems =
-      Math.max(
-        1,
-        Math.ceil(
-          vertical
-            ? (sliderHeight || 1) / (itemHeight || 1)
-            : (sliderWidth || 1) / (itemWidth || 1),
-        ),
-      ) + 1;
-    const initialNumPerSide = enableLoop() ? loopClonesPerSide : 2;
-    const initialNumToRender = Math.max(
-      1,
-      visibleItems + initialNumPerSide * 2,
-    );
-    const maxToRenderPerBatch = Math.max(
-      1,
-      initialNumToRender + initialNumPerSide * 2,
-    );
-    const windowSize = Math.max(2, maxToRenderPerBatch);
+  _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];
 
-    const specificProps = !needsScrollView()
-      ? {
-          initialNumToRender,
-          maxToRenderPerBatch,
-          windowSize,
-        }
-      : {};
+    if (typeof animatedValue === 'undefined') {
+      return null;
+    }
 
-    return {
-      ...specificProps,
-      automaticallyAdjustContentInsets: false,
-      decelerationRate: 'fast' as const,
-      directionalLockEnabled: true,
-      disableScrollViewPanResponder: false,
-      inverted: needsRTLAdaptations(),
-      overScrollMode: 'never' as const,
-      pinchGestureEnabled: false,
-      pointerEvents: hideCarousel ? ('none' as const) : ('auto' as const),
-      scrollsToTop: false,
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false,
-    };
-  }, [
-    vertical,
-    sliderHeight,
-    itemHeight,
-    sliderWidth,
-    itemWidth,
-    enableLoop,
-    loopClonesPerSide,
-    needsScrollView,
-    needsRTLAdaptations,
-    hideCarousel,
-  ]);
-
-  const getComponentStaticProps = useCallback(() => {
-    const containerStyle = [
-      containerCustomStyle || style || {},
-      hideCarousel ? { opacity: 0 } : {},
-      vertical
-        ? { height: sliderHeight, flexDirection: 'column' as const }
-        : {
-            width: sliderWidth,
-            flexDirection: needsRTLAdaptations()
-              ? ('row-reverse' as const)
-              : ('row' as const),
-          },
-    ];
+    const animate = this._shouldAnimateSlides();
+    const Component = animate ? Animated.View : View;
+    const mainDimension = { width: itemWidth };
 
-    const innerMarginStyle = vertical
-      ? {
-          paddingTop: getContainerInnerMargin(),
-          paddingBottom: getContainerInnerMargin(true),
-        }
+    let spacingStyle: ViewStyle = this.props.loop
+      ? { marginLeft: Spacing.S }
       : {
-          paddingLeft: getContainerInnerMargin(),
-          paddingRight: getContainerInnerMargin(true),
+          marginLeft: index === 0 ? Spacing.M : 0,
+          marginRight:
+            index === this._getCustomDataLength() - 1 ? Spacing.M : Spacing.S,
         };
 
-    const contentContainerStyle = [
-      !useExperimentalSnap ? innerMarginStyle : {},
-      contentContainerCustomStyle || {},
-    ];
+    if (full) {
+      spacingStyle = {};
+    }
+    const animatedStyle = defaultAnimatedStyles(animatedValue, this.props);
+    return (
+      <Component
+        style={[
+          mainDimension,
+          animatedStyle,
+          { overflow: 'hidden' },
+          spacingStyle,
+          slideStyle,
+        ]}
+        pointerEvents="box-none"
+      >
+        {this.props.renderItem({
+          item,
+          index,
+        })}
+      </Component>
+    );
+  }
 
-    const snapProps = useExperimentalSnap
-      ? {
-          disableIntervalMomentum,
-          snapToAlignment: activeSlideAlignment,
-          snapToInterval: snapToInterval || getItemMainDimension(),
-        }
-      : {
-          snapToOffsets: getSnapOffsets(),
-        };
+  startAutoplay() {
+    const { autoplayInterval, autoplayDelay } = this.props;
+    this._autoplay = true;
+
+    if (this._autoplaying) {
+      return;
+    }
 
-    const specificProps = !needsScrollView()
-      ? {
-          CellRendererComponent:
-            CellRendererComponent || getCellRendererComponent,
-          getItemLayout: getItemLayoutProp || getItemLayout,
-          initialScrollIndex: getFirstItem(firstItem),
-          keyExtractor: keyExtractor || getKeyExtractor,
-          numColumns: 1,
-          renderItem: renderItemComponent as any, // Type cast for compatibility
+    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
+    this._autoplayTimeout = setTimeout(() => {
+      this._autoplaying = true;
+      this._autoplayInterval = setInterval(() => {
+        if (this._autoplaying) {
+          this.snapToNext();
         }
-      : {};
+      }, autoplayInterval);
+    }, autoplayDelay);
+  }
 
-    return {
-      ...specificProps,
-      ...snapProps,
-      ref: carouselRef,
-      contentContainerStyle: contentContainerStyle,
-      data: getCustomData(),
-      horizontal: !vertical,
-      scrollEventThrottle: 1,
-      style: containerStyle,
-      onLayout: handleLayout,
-      onMomentumScrollEnd: handleMomentumScrollEnd,
-      onScroll: onScrollHandlerRef.current,
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-    };
-  }, [
-    containerCustomStyle,
-    style,
-    hideCarousel,
-    vertical,
-    sliderHeight,
-    sliderWidth,
-    needsRTLAdaptations,
-    getContainerInnerMargin,
-    useExperimentalSnap,
-    contentContainerCustomStyle,
-    disableIntervalMomentum,
-    activeSlideAlignment,
-    getItemMainDimension,
-    getSnapOffsets,
-    needsScrollView,
-    CellRendererComponent,
-    getCellRendererComponent,
-    getItemLayout,
-    getFirstItem,
-    firstItem,
-    keyExtractor,
-    getKeyExtractor,
-    renderItemComponent,
-    getCustomData,
-    handleLayout,
-    handleMomentumScrollEnd,
-    handleTouchStart,
-    handleTouchEnd,
-  ]);
-
-  // Render
-  if (!data || !renderItem) {
-    return null;
+  pauseAutoPlay() {
+    this._autoplaying = false;
+    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
+    if (this._enableAutoplayTimeout != null)
+      clearTimeout(this._enableAutoplayTimeout);
+    if (this._autoplayInterval != null) clearInterval(this._autoplayInterval);
   }
 
-  const overridableProps = getComponentOverridableProps();
-  const staticProps = getComponentStaticProps();
+  stopAutoplay() {
+    this._autoplay = false;
+    this.pauseAutoPlay();
+  }
 
-  // Filter out props that should not be passed to FlatList/ScrollView
-  const { renderItem: _, ...propsWithoutRenderItem } = props;
+  snapToItem(index: number, animated = true, fireCallback = true) {
+    if (!index || index < 0) {
+      index = 0;
+    }
 
-  const componentProps: any = {
-    ...overridableProps,
-    ...propsWithoutRenderItem,
-    ...staticProps,
-  };
+    const positionIndex = this._getPositionIndex(index);
+
+    if (positionIndex === this._activeItem) {
+      return;
+    }
 
-  const ScrollViewComponent =
-    typeof useScrollView === 'function' ? useScrollView : Animated.ScrollView;
+    this._snapToItem(positionIndex, animated, fireCallback);
+  }
 
-  return needsScrollView() || !Animated.FlatList ? (
-    <ScrollViewComponent {...componentProps}>
-      {getCustomData().map((item: any, index: number) => {
-        return renderItemComponent({
-          item,
-          index,
-        });
-      })}
-    </ScrollViewComponent>
-  ) : (
-    <Animated.FlatList {...componentProps} />
-  );
-});
+  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();
 
-Carousel.displayName = 'Carousel';
+    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,
+      contentContainerStyle,
+    } = this.props;
+    const { hideCarousel } = 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={
+          this.props.snapToInterval ? this.props.snapToInterval : snapToInterval
+        }
+        disableIntervalMomentum={disableIntervalMomentum}
+        pointerEvents={hideCarousel ? 'none' : 'auto'}
+        decelerationRate={'fast'}
+        numColumns={1}
+        style={[
+          style,
+          { width: '100%', flexDirection: 'row' },
+          hideCarousel ? { opacity: 0 } : {},
+        ]}
+        automaticallyAdjustContentInsets={false}
+        directionalLockEnabled
+        contentContainerStyle={contentContainerStyle}
+        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 { CarouselRef, CarouselProps };
+export type { CarouselProps, CarouselRef };