@momo-kits/carousel 0.0.65-alpha.14 → 0.0.65-alpha.16

package/CarouselV2.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { Animated, I18nManager, Platform, View } from 'react-native';
+import {Animated, I18nManager, Platform, View} from 'react-native';
 // import shallowCompare from 'react-addons-shallow-compare';
 import {
-    defaultScrollInterpolator,
-    stackScrollInterpolator,
-    tinderScrollInterpolator,
-    defaultAnimatedStyles,
-    shiftAnimatedStyles,
-    stackAnimatedStyles,
-    tinderAnimatedStyles,
+  defaultScrollInterpolator,
+  stackScrollInterpolator,
+  tinderScrollInterpolator,
+  defaultAnimatedStyles,
+  shiftAnimatedStyles,
+  stackAnimatedStyles,
+  tinderAnimatedStyles,
 } from './utils/animationsV2';
 import PropTypes from 'prop-types';
 
@@ -27,1362 +27,1337 @@ const IS_IOS = Platform.OS === 'ios';
 const IS_RTL = I18nManager.isRTL;
 
 export default class Carousel extends React.PureComponent {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            hideCarousel: !!props.apparitionDelay,
-            interpolators: [],
-        };
-
-        // this._RNVersionCode = this._getRNVersionCode();
-
-        // The following values are not stored in the state because 'setState()' is asynchronous
-        // and this results in an absolutely crappy behavior on Android while swiping (see #156)
-        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; // Store ScrollView's scroll position
-        this._scrollEnabled = props.scrollEnabled !== false;
-
-        this._getCellRendererComponent =
-            this._getCellRendererComponent.bind(this);
-        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);
-
-        // WARNING: call this AFTER binding _onScroll
-        this._setScrollHandler(props);
-
-        // Display warnings
-        this._displayWarnings(props);
-    }
-
-    get realIndex() {
-        return this._activeItem;
-    }
-
-    //   shouldComponentUpdate (
-    //       nextProps,
-    //       nextState
-    //   ) {
-    //       if (this.props.shouldOptimizeUpdates === false) {
-    //           return true;
-    //       } else {
-    //           return shallowCompare(this, nextProps, nextState);
-    //       }
-    //   }
-
-    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) {
-        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 =
-            this.props.vertical !== prevProps.vertical ||
-            (this.props.vertical &&
-                prevProps.vertical &&
-                (prevProps.itemHeight !== this.props.itemHeight ||
-                    prevProps.sliderHeight !== this.props.sliderHeight)) ||
-            (!this.props.vertical &&
-                !prevProps.vertical &&
-                (prevProps.itemWidth !== this.props.itemWidth ||
-                    prevProps.sliderWidth !== this.props.sliderWidth));
-
-        // Prevent issues with dynamically removed items
-        if (nextActiveItem > itemsLength - 1) {
-            nextActiveItem = itemsLength - 1;
-        }
-
-        // Handle changing scrollEnabled independent of user -> carousel interaction
-        if (scrollEnabled !== prevProps.scrollEnabled) {
-            this._setScrollEnabled(scrollEnabled);
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hideCarousel: !!props.apparitionDelay,
+      interpolators: [],
+    };
+
+    // this._RNVersionCode = this._getRNVersionCode();
+
+    // The following values are not stored in the state because 'setState()' is asynchronous
+    // and this results in an absolutely crappy behavior on Android while swiping (see #156)
+    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; // Store ScrollView's scroll position
+    this._scrollEnabled = props.scrollEnabled !== false;
+
+    this._getCellRendererComponent = this._getCellRendererComponent.bind(this);
+    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);
+
+    // WARNING: call this AFTER binding _onScroll
+    this._setScrollHandler(props);
+
+    // Display warnings
+    this._displayWarnings(props);
+  }
+
+  get realIndex() {
+    return this._activeItem;
+  }
+
+  //   shouldComponentUpdate (
+  //       nextProps,
+  //       nextState
+  //   ) {
+  //       if (this.props.shouldOptimizeUpdates === false) {
+  //           return true;
+  //       } else {
+  //           return shallowCompare(this, nextProps, nextState);
+  //       }
+  //   }
+
+  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 (interpolators.length !== itemsLength || hasNewSize) {
-            this._activeItem = nextActiveItem;
-            this._previousItemsLength = itemsLength;
-
-            this._initPositionsAndInterpolators(this.props);
-
-            // Handle scroll issue when dynamically removing items (see #133)
-            // This also fixes first item's active state on Android
-            // Because 'initialScrollIndex' apparently doesn't trigger scroll
-            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);
+        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) {
+    const {interpolators} = this.state;
+    const {firstItem, scrollEnabled} = this.props;
+    const itemsLength = this._getCustomDataLength(this.props);
+
+    if (!itemsLength) {
+      return;
     }
 
-    componentWillUnmount() {
-        this._mounted = false;
-        this.stopAutoplay();
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._initTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._apparitionTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._hackSlideAnimationTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._enableAutoplayTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._autoplayTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._snapNoMomentumTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._androidRepositioningTimeout);
+    const nextFirstItem = this._getFirstItem(firstItem, this.props);
+    let nextActiveItem =
+      typeof this._activeItem !== 'undefined'
+        ? this._activeItem
+        : nextFirstItem;
+
+    const hasNewSize =
+      this.props.vertical !== prevProps.vertical ||
+      (this.props.vertical &&
+        prevProps.vertical &&
+        (prevProps.itemHeight !== this.props.itemHeight ||
+          prevProps.sliderHeight !== this.props.sliderHeight)) ||
+      (!this.props.vertical &&
+        !prevProps.vertical &&
+        (prevProps.itemWidth !== this.props.itemWidth ||
+          prevProps.sliderWidth !== this.props.sliderWidth));
+
+    // Prevent issues with dynamically removed items
+    if (nextActiveItem > itemsLength - 1) {
+      nextActiveItem = itemsLength - 1;
     }
 
-    _setScrollHandler(props) {
-        // Native driver for scroll events
-        const scrollEventConfig = {
-            listener: this._onScroll,
-            useNativeDriver: true,
-        };
-        this._scrollPos = new Animated.Value(0);
-        const argMapping = props.vertical
-            ? [{ nativeEvent: { contentOffset: { y: this._scrollPos } } }]
-            : [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }];
-
-        // @ts-expect-error Let's ignore for now that trick
-        if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
-            // Because of a react-native issue https://github.com/facebook/react-native/issues/13294
-            argMapping.pop();
-            // @ts-expect-error Let's ignore for now that trick
-            const [argMap] = props.onScroll._argMapping;
-            if (
-                argMap &&
-                argMap.nativeEvent &&
-                argMap.nativeEvent.contentOffset
-            ) {
-                // Shares the same animated value passed in props
-                this._scrollPos =
-                    argMap.nativeEvent.contentOffset.x ||
-                    argMap.nativeEvent.contentOffset.y ||
-                    this._scrollPos;
-            }
-            // @ts-expect-error Let's ignore for now that trick
-            argMapping.push(...props.onScroll._argMapping);
-        }
-        this._onScrollHandler = Animated.event(argMapping, scrollEventConfig);
+    // Handle changing scrollEnabled independent of user -> carousel interaction
+    if (scrollEnabled !== prevProps.scrollEnabled) {
+      this._setScrollEnabled(scrollEnabled);
     }
 
-    // This will return a future-proof version code number compatible with semantic versioning
-    // Examples: 0.59.3 -> 5903 / 0.61.4 -> 6104 / 0.62.12 -> 6212 / 1.0.2 -> 10002
-    // _getRNVersionCode () {
-    //     const version = RN_PACKAGE && RN_PACKAGE.version;
-    //     if (!version) {
-    //         return null;
-    //     }
-    //     const versionSplit = version.split('.');
-    //     if (!versionSplit || !versionSplit.length) {
-    //         return null;
-    //     }
-    //     return versionSplit[0] * 10000 +
-    //         (typeof versionSplit[1] !== 'undefined' ? versionSplit[1] * 100 : 0) +
-    //         (typeof versionSplit[2] !== 'undefined' ? versionSplit[2] * 1 : 0);
-    // }
-
-    _displayWarnings(props = this.props) {
-        const pluginName = 'react-native-snap-carousel';
-        const removedProps = [
-            'activeAnimationType',
-            'activeAnimationOptions',
-            'enableMomentum',
-            'lockScrollTimeoutDuration',
-            'lockScrollWhileSnapping',
-            'onBeforeSnapToItem',
-            'swipeThreshold',
-        ];
-
-        // if (this._RNVersionCode && this._RNVersionCode < 5800) {
-        //     console.error(
-        //         `${pluginName}: Version 4+ of the plugin is based on React Native props that were introduced in version 0.58. ` +
-        //         'Please downgrade to version 3.x or update your version of React Native.'
-        //     );
-        // }
-        if (!props.vertical && (!props.sliderWidth || !props.itemWidth)) {
-            console.error(
-                `${pluginName}: You need to specify both 'sliderWidth' and 'itemWidth' for horizontal carousels`,
-            );
-        }
-        if (props.vertical && (!props.sliderHeight || !props.itemHeight)) {
-            console.error(
-                `${pluginName}: You need to specify both 'sliderHeight' and 'itemHeight' for vertical carousels`,
-            );
-        }
-
-        removedProps.forEach((removedProp) => {
-            if (removedProp in props) {
-                console.warn(
-                    `${pluginName}: Prop ${removedProp} has been removed in version 4 of the plugin`,
-                );
-            }
-        });
+    if (interpolators.length !== itemsLength || hasNewSize) {
+      this._activeItem = nextActiveItem;
+      this._previousItemsLength = itemsLength;
+
+      this._initPositionsAndInterpolators(this.props);
+
+      // Handle scroll issue when dynamically removing items (see #133)
+      // This also fixes first item's active state on Android
+      // Because 'initialScrollIndex' apparently doesn't trigger scroll
+      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);
     }
 
-    _needsScrollView() {
-        const { useScrollView } = this.props;
-        // Android's cell renderer is buggy and has a stange overflow
-        // TODO: a workaround might be to pass the custom animated styles directly to it
-        return IS_ANDROID
-            ? useScrollView ||
-                  !Animated.FlatList ||
-                  this._shouldUseStackLayout() ||
-                  this._shouldUseTinderLayout()
-            : useScrollView || !Animated.FlatList;
+    if (this.props.onScroll !== prevProps.onScroll) {
+      this._setScrollHandler(this.props);
     }
-
-    _needsRTLAdaptations() {
-        const { vertical } = this.props;
-        return IS_RTL && IS_ANDROID && !vertical;
+  }
+
+  componentWillUnmount() {
+    this._mounted = false;
+    this.stopAutoplay();
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._initTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._apparitionTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._hackSlideAnimationTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._enableAutoplayTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._autoplayTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._snapNoMomentumTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._androidRepositioningTimeout);
+  }
+
+  _setScrollHandler(props) {
+    // Native driver for scroll events
+    const scrollEventConfig = {
+      listener: this._onScroll,
+      useNativeDriver: true,
+    };
+    this._scrollPos = new Animated.Value(0);
+    const argMapping = props.vertical
+      ? [{nativeEvent: {contentOffset: {y: this._scrollPos}}}]
+      : [{nativeEvent: {contentOffset: {x: this._scrollPos}}}];
+
+    // @ts-expect-error Let's ignore for now that trick
+    if (props.onScroll && Array.isArray(props.onScroll._argMapping)) {
+      // Because of a react-native issue https://github.com/facebook/react-native/issues/13294
+      argMapping.pop();
+      // @ts-expect-error Let's ignore for now that trick
+      const [argMap] = props.onScroll._argMapping;
+      if (argMap && argMap.nativeEvent && argMap.nativeEvent.contentOffset) {
+        // Shares the same animated value passed in props
+        this._scrollPos =
+          argMap.nativeEvent.contentOffset.x ||
+          argMap.nativeEvent.contentOffset.y ||
+          this._scrollPos;
+      }
+      // @ts-expect-error Let's ignore for now that trick
+      argMapping.push(...props.onScroll._argMapping);
     }
-
-    _enableLoop() {
-        const { data, enableSnap, loop } = this.props;
-        return enableSnap && loop && data && data.length && data.length > 1;
+    this._onScrollHandler = Animated.event(argMapping, scrollEventConfig);
+  }
+
+  // This will return a future-proof version code number compatible with semantic versioning
+  // Examples: 0.59.3 -> 5903 / 0.61.4 -> 6104 / 0.62.12 -> 6212 / 1.0.2 -> 10002
+  // _getRNVersionCode () {
+  //     const version = RN_PACKAGE && RN_PACKAGE.version;
+  //     if (!version) {
+  //         return null;
+  //     }
+  //     const versionSplit = version.split('.');
+  //     if (!versionSplit || !versionSplit.length) {
+  //         return null;
+  //     }
+  //     return versionSplit[0] * 10000 +
+  //         (typeof versionSplit[1] !== 'undefined' ? versionSplit[1] * 100 : 0) +
+  //         (typeof versionSplit[2] !== 'undefined' ? versionSplit[2] * 1 : 0);
+  // }
+
+  _displayWarnings(props = this.props) {
+    const pluginName = 'react-native-snap-carousel';
+    const removedProps = [
+      'activeAnimationType',
+      'activeAnimationOptions',
+      'enableMomentum',
+      'lockScrollTimeoutDuration',
+      'lockScrollWhileSnapping',
+      'onBeforeSnapToItem',
+      'swipeThreshold',
+    ];
+
+    // if (this._RNVersionCode && this._RNVersionCode < 5800) {
+    //     console.error(
+    //         `${pluginName}: Version 4+ of the plugin is based on React Native props that were introduced in version 0.58. ` +
+    //         'Please downgrade to version 3.x or update your version of React Native.'
+    //     );
+    // }
+    if (!props.vertical && (!props.sliderWidth || !props.itemWidth)) {
+      console.error(
+        `${pluginName}: You need to specify both 'sliderWidth' and 'itemWidth' for horizontal carousels`,
+      );
     }
-
-    _shouldAnimateSlides(props = this.props) {
-        const {
-            inactiveSlideOpacity,
-            inactiveSlideScale,
-            scrollInterpolator,
-            slideInterpolatedStyle,
-        } = props;
-        return (
-            inactiveSlideOpacity < 1 ||
-            inactiveSlideScale < 1 ||
-            !!scrollInterpolator ||
-            !!slideInterpolatedStyle ||
-            this._shouldUseShiftLayout() ||
-            this._shouldUseStackLayout() ||
-            this._shouldUseTinderLayout()
-        );
+    if (props.vertical && (!props.sliderHeight || !props.itemHeight)) {
+      console.error(
+        `${pluginName}: You need to specify both 'sliderHeight' and 'itemHeight' for vertical carousels`,
+      );
     }
 
-    _shouldUseShiftLayout() {
-        const { inactiveSlideShift, layout } = this.props;
-        return layout === 'default' && inactiveSlideShift !== 0;
+    removedProps.forEach(removedProp => {
+      if (removedProp in props) {
+        console.warn(
+          `${pluginName}: Prop ${removedProp} has been removed in version 4 of the plugin`,
+        );
+      }
+    });
+  }
+
+  _needsScrollView() {
+    const {useScrollView} = this.props;
+    // Android's cell renderer is buggy and has a stange overflow
+    // TODO: a workaround might be to pass the custom animated styles directly to it
+    return IS_ANDROID
+      ? useScrollView ||
+          !Animated.FlatList ||
+          this._shouldUseStackLayout() ||
+          this._shouldUseTinderLayout()
+      : useScrollView || !Animated.FlatList;
+  }
+
+  _needsRTLAdaptations() {
+    const {vertical} = this.props;
+    return IS_RTL && IS_ANDROID && !vertical;
+  }
+
+  _enableLoop() {
+    const {data, enableSnap, loop} = this.props;
+    return enableSnap && loop && data && data.length && data.length > 1;
+  }
+
+  _shouldAnimateSlides(props = this.props) {
+    const {
+      inactiveSlideOpacity,
+      inactiveSlideScale,
+      scrollInterpolator,
+      slideInterpolatedStyle,
+    } = props;
+    return (
+      inactiveSlideOpacity < 1 ||
+      inactiveSlideScale < 1 ||
+      !!scrollInterpolator ||
+      !!slideInterpolatedStyle ||
+      this._shouldUseShiftLayout() ||
+      this._shouldUseStackLayout() ||
+      this._shouldUseTinderLayout()
+    );
+  }
+
+  _shouldUseShiftLayout() {
+    const {inactiveSlideShift, layout} = this.props;
+    return layout === 'default' && inactiveSlideShift !== 0;
+  }
+
+  _shouldUseStackLayout() {
+    return this.props.layout === 'stack';
+  }
+
+  _shouldUseTinderLayout() {
+    return this.props.layout === 'tinder';
+  }
+
+  _shouldRepositionScroll(index) {
+    const {data, enableSnap, loopClonesPerSide} = this.props;
+    const dataLength = data && data.length;
+    if (
+      !enableSnap ||
+      !dataLength ||
+      !this._enableLoop() ||
+      (index >= loopClonesPerSide && index < dataLength + loopClonesPerSide)
+    ) {
+      return false;
     }
+    return true;
+  }
 
-    _shouldUseStackLayout() {
-        return this.props.layout === 'stack';
-    }
+  _isMultiple(x, y) {
+    // This prevents Javascript precision issues: https://stackoverflow.com/a/58440614/
+    // Required because Android viewport size can return pretty complicated decimals numbers
+    return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
+  }
 
-    _shouldUseTinderLayout() {
-        return this.props.layout === 'tinder';
-    }
+  _getCustomData(props = this.props) {
+    const {data, loopClonesPerSide} = props;
+    const dataLength = data && data.length;
 
-    _shouldRepositionScroll(index) {
-        const { data, enableSnap, loopClonesPerSide } = this.props;
-        const dataLength = data && data.length;
-        if (
-            !enableSnap ||
-            !dataLength ||
-            !this._enableLoop() ||
-            (index >= loopClonesPerSide &&
-                index < dataLength + loopClonesPerSide)
-        ) {
-            return false;
-        }
-        return true;
+    if (!dataLength) {
+      return [];
     }
 
-    _isMultiple(x, y) {
-        // This prevents Javascript precision issues: https://stackoverflow.com/a/58440614/
-        // Required because Android viewport size can return pretty complicated decimals numbers
-        return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
+    if (!this._enableLoop()) {
+      return data;
     }
 
-    _getCustomData(props = this.props) {
-        const { data, loopClonesPerSide } = props;
-        const dataLength = data && data.length;
-
-        if (!dataLength) {
-            return [];
-        }
+    let previousItems = [];
+    let nextItems = [];
 
-        if (!this._enableLoop()) {
-            return data;
-        }
+    if (loopClonesPerSide > dataLength) {
+      const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
+      const remainder = loopClonesPerSide % dataLength;
 
-        let previousItems = [];
-        let nextItems = [];
+      for (let i = 0; i < dataMultiplier; i++) {
+        previousItems.push(...data);
+        nextItems.push(...data);
+      }
 
-        if (loopClonesPerSide > dataLength) {
-            const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
-            const remainder = loopClonesPerSide % dataLength;
+      previousItems.unshift(...data.slice(-remainder));
+      nextItems.push(...data.slice(0, remainder));
+    } else {
+      previousItems = data.slice(-loopClonesPerSide);
+      nextItems = data.slice(0, loopClonesPerSide);
+    }
 
-            for (let i = 0; i < dataMultiplier; i++) {
-                previousItems.push(...data);
-                nextItems.push(...data);
-            }
+    return previousItems.concat(data, nextItems);
+  }
 
-            previousItems.unshift(...data.slice(-remainder));
-            nextItems.push(...data.slice(0, remainder));
-        } else {
-            previousItems = data.slice(-loopClonesPerSide);
-            nextItems = data.slice(0, loopClonesPerSide);
-        }
+  _getCustomDataLength(props = this.props) {
+    const {data, loopClonesPerSide} = props;
+    const dataLength = data && data.length;
 
-        return previousItems.concat(data, nextItems);
+    if (!dataLength) {
+      return 0;
     }
 
-    _getCustomDataLength(props = this.props) {
-        const { data, loopClonesPerSide } = props;
-        const dataLength = data && data.length;
+    return this._enableLoop() ? dataLength + 2 * loopClonesPerSide : dataLength;
+  }
 
-        if (!dataLength) {
-            return 0;
-        }
+  _getCustomIndex(index, props = this.props) {
+    const itemsLength = this._getCustomDataLength(props);
 
-        return this._enableLoop()
-            ? dataLength + 2 * loopClonesPerSide
-            : dataLength;
+    if (!itemsLength || typeof index === 'undefined') {
+      return 0;
     }
 
-    _getCustomIndex(index, props = this.props) {
-        const itemsLength = this._getCustomDataLength(props);
-
-        if (!itemsLength || typeof index === 'undefined') {
-            return 0;
-        }
+    return this._needsRTLAdaptations() ? itemsLength - index - 1 : index;
+  }
 
-        return this._needsRTLAdaptations() ? itemsLength - index - 1 : index;
+  _getDataIndex(index) {
+    const {data, loopClonesPerSide} = this.props;
+    const dataLength = data && data.length;
+    if (!this._enableLoop() || !dataLength) {
+      return index;
     }
 
-    _getDataIndex(index) {
-        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) {
+      // TODO: is there a simpler way of determining the interpolated index?
+      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);
         }
 
-        if (index >= dataLength + loopClonesPerSide) {
-            return loopClonesPerSide > dataLength
-                ? (index - loopClonesPerSide) % dataLength
-                : index - dataLength - loopClonesPerSide;
-        } else if (index < loopClonesPerSide) {
-            // TODO: is there a simpler way of determining the interpolated index?
-            if (loopClonesPerSide > dataLength) {
-                const baseDataIndexes = [];
-                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;
+        for (let j = 0; j < dataMultiplier; j++) {
+          dataIndexes.push(...baseDataIndexes);
         }
-    }
 
-    // Used with `snapToItem()` and 'PaginationDot'
-    _getPositionIndex(index) {
-        const { loop, loopClonesPerSide } = this.props;
-        return loop ? index + loopClonesPerSide : index;
+        dataIndexes.unshift(...baseDataIndexes.slice(-remainder));
+        return dataIndexes[index];
+      } else {
+        return index + dataLength - loopClonesPerSide;
+      }
+    } else {
+      return index - loopClonesPerSide;
     }
-
-    _getSnapOffsets(props = this.props) {
-        const offset = this._getItemMainDimension();
-        if (!props.enableSnap) return;
-        return [...Array(this._getCustomDataLength(props))].map((_, i) => {
-            return i * offset;
-        });
+  }
+
+  // Used with `snapToItem()` and 'PaginationDot'
+  _getPositionIndex(index) {
+    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, props = this.props) {
+    const {loopClonesPerSide} = props;
+    const itemsLength = this._getCustomDataLength(props);
+
+    if (!itemsLength || index > itemsLength - 1 || index < 0) {
+      return 0;
     }
 
-    _getFirstItem(index, 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;
-    }
+    return this._enableLoop() ? index + loopClonesPerSide : index;
+  }
 
-    _getWrappedRef() {
-        // Starting with RN 0.62, we should no longer call `getNode()` on the ref of an Animated component
-        if (
-            this._carouselRef &&
-            ((this._needsScrollView() && this._carouselRef.scrollTo) ||
-                (!this._needsScrollView() && this._carouselRef.scrollToOffset))
-        ) {
-            return this._carouselRef;
-        }
-        // https://github.com/facebook/react-native/issues/10635
-        // https://stackoverflow.com/a/48786374/8412141
-        return (
-            this._carouselRef &&
-            // @ts-expect-error This is for before 0.62
-            this._carouselRef.getNode &&
-            // @ts-expect-error This is for before 0.62
-            this._carouselRef.getNode()
-        );
+  _getWrappedRef() {
+    // Starting with RN 0.62, we should no longer call `getNode()` on the ref of an Animated component
+    if (
+      this._carouselRef &&
+      ((this._needsScrollView() && this._carouselRef.scrollTo) ||
+        (!this._needsScrollView() && this._carouselRef.scrollToOffset))
+    ) {
+      return this._carouselRef;
     }
-
-    _getScrollEnabled() {
-        return this._scrollEnabled;
+    // https://github.com/facebook/react-native/issues/10635
+    // https://stackoverflow.com/a/48786374/8412141
+    return (
+      this._carouselRef &&
+      // @ts-expect-error This is for before 0.62
+      this._carouselRef.getNode &&
+      // @ts-expect-error This is for before 0.62
+      this._carouselRef.getNode()
+    );
+  }
+
+  _getScrollEnabled() {
+    return this._scrollEnabled;
+  }
+
+  _setScrollEnabled(scrollEnabled = true) {
+    const wrappedRef = this._getWrappedRef();
+
+    if (!wrappedRef || !wrappedRef.setNativeProps) {
+      return;
     }
 
-    _setScrollEnabled(scrollEnabled = true) {
-        const wrappedRef = this._getWrappedRef();
-
-        if (!wrappedRef || !wrappedRef.setNativeProps) {
-            return;
-        }
-
-        // 'setNativeProps()' is used instead of 'setState()' because the latter
-        // really takes a toll on Android behavior when momentum is disabled
-        wrappedRef.setNativeProps({ scrollEnabled });
-        this._scrollEnabled = scrollEnabled;
+    // 'setNativeProps()' is used instead of 'setState()' because the latter
+    // really takes a toll on Android behavior when momentum is disabled
+    wrappedRef.setNativeProps({scrollEnabled});
+    this._scrollEnabled = scrollEnabled;
+  }
+
+  _getItemMainDimension() {
+    return this.props.vertical ? this.props.itemHeight : this.props.itemWidth;
+  }
+
+  _getItemScrollOffset(index) {
+    return (
+      this._positions && this._positions[index] && this._positions[index].start
+    );
+  }
+
+  _getItemLayout(_, index) {
+    const itemMainDimension = this._getItemMainDimension();
+    return {
+      index,
+      length: itemMainDimension,
+      offset: itemMainDimension * index, // + this._getContainerInnerMargin()
+    };
+  }
+
+  // This will allow us to have a proper zIndex even with a FlatList
+  // https://github.com/facebook/react-native/issues/18616#issuecomment-389444165
+  _getCellRendererComponent({children, index, style, ...props}) {
+    const cellStyle = [
+      style,
+      !IS_ANDROID ? {zIndex: this._getCustomDataLength() - index} : {},
+    ];
+
+    return (
+      <View style={cellStyle} key={index} {...props}>
+        {children}
+      </View>
+    );
+  }
+
+  _getKeyExtractor(_, index) {
+    return this._needsScrollView()
+      ? `scrollview-item-${index}`
+      : `flatlist-item-${index}`;
+  }
+
+  _getScrollOffset(event) {
+    const {vertical} = this.props;
+    return (
+      (event &&
+        event.nativeEvent &&
+        event.nativeEvent.contentOffset &&
+        event.nativeEvent.contentOffset[vertical ? 'y' : 'x']) ||
+      0
+    );
+  }
+
+  _getContainerInnerMargin(opposite = false) {
+    const {activeSlideAlignment} = this.props;
+
+    if (
+      (activeSlideAlignment === 'start' && !opposite) ||
+      (activeSlideAlignment === 'end' && opposite)
+    ) {
+      return 0;
+    } else if (
+      (activeSlideAlignment === 'end' && !opposite) ||
+      (activeSlideAlignment === 'start' && opposite)
+    ) {
+      return this.props.vertical
+        ? this.props.sliderHeight - this.props.itemHeight
+        : this.props.sliderWidth - this.props.itemWidth;
+    } else {
+      return this.props.vertical
+        ? (this.props.sliderHeight - this.props.itemHeight) / 2
+        : (this.props.sliderWidth - this.props.itemWidth) / 2;
     }
-
-    _getItemMainDimension() {
-        return this.props.vertical
-            ? this.props.itemHeight
-            : this.props.itemWidth;
+  }
+
+  _getActiveSlideOffset() {
+    const {activeSlideOffset} = this.props;
+    const itemMainDimension = this._getItemMainDimension();
+    const minOffset = 10;
+    // Make sure activeSlideOffset never prevents the active area from being at least 10 px wide
+    return itemMainDimension / 2 - activeSlideOffset >= minOffset
+      ? activeSlideOffset
+      : minOffset;
+  }
+
+  _getActiveItem(offset) {
+    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;
     }
 
-    _getItemScrollOffset(index) {
-        return (
-            this._positions &&
-            this._positions[index] &&
-            this._positions[index].start
-        );
+    if (
+      this._positions[lastIndex] &&
+      offset >= this._positions[lastIndex].start
+    ) {
+      return lastIndex;
     }
 
-    _getItemLayout(_, index) {
-        const itemMainDimension = this._getItemMainDimension();
-        return {
-            index,
-            length: itemMainDimension,
-            offset: itemMainDimension * index, // + this._getContainerInnerMargin()
-        };
+    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;
+      }
     }
 
-    // This will allow us to have a proper zIndex even with a FlatList
-    // https://github.com/facebook/react-native/issues/18616#issuecomment-389444165
-    _getCellRendererComponent({ children, index, style, ...props }) {
-        const cellStyle = [
-            style,
-            !IS_ANDROID ? { zIndex: this._getCustomDataLength() - index } : {},
-        ];
-
-        return (
-            <View style={cellStyle} key={index} {...props}>
-                {children}
-            </View>
-        );
-    }
+    return itemIndex || 0;
+  }
 
-    _getKeyExtractor(_, index) {
-        return this._needsScrollView()
-            ? `scrollview-item-${index}`
-            : `flatlist-item-${index}`;
-    }
+  _getSlideInterpolatedStyle(index, animatedValue) {
+    const {layoutCardOffset, slideInterpolatedStyle} = this.props;
 
-    _getScrollOffset(event) {
-        const { vertical } = this.props;
-        return (
-            (event &&
-                event.nativeEvent &&
-                event.nativeEvent.contentOffset &&
-                event.nativeEvent.contentOffset[vertical ? 'y' : 'x']) ||
-            0
-        );
+    if (slideInterpolatedStyle) {
+      return slideInterpolatedStyle(index, animatedValue, this.props);
+    } else if (this._shouldUseTinderLayout()) {
+      return tinderAnimatedStyles(
+        index,
+        animatedValue,
+        this.props,
+        layoutCardOffset,
+      );
+    } else if (this._shouldUseStackLayout()) {
+      return stackAnimatedStyles(
+        index,
+        animatedValue,
+        this.props,
+        layoutCardOffset,
+      );
+    } else if (this._shouldUseShiftLayout()) {
+      return shiftAnimatedStyles(index, animatedValue, this.props);
+    } else {
+      return defaultAnimatedStyles(index, animatedValue, this.props);
     }
+  }
 
-    _getContainerInnerMargin(opposite = false) {
-        const { activeSlideAlignment } = this.props;
-
-        if (
-            (activeSlideAlignment === 'start' && !opposite) ||
-            (activeSlideAlignment === 'end' && opposite)
-        ) {
-            return 0;
-        } else if (
-            (activeSlideAlignment === 'end' && !opposite) ||
-            (activeSlideAlignment === 'start' && opposite)
-        ) {
-            return this.props.vertical
-                ? this.props.sliderHeight - this.props.itemHeight
-                : this.props.sliderWidth - this.props.itemWidth;
-        } else {
-            return this.props.vertical
-                ? (this.props.sliderHeight - this.props.itemHeight) / 2
-                : (this.props.sliderWidth - this.props.itemWidth) / 2;
-        }
-    }
+  _initPositionsAndInterpolators(props = this.props) {
+    const {data, scrollInterpolator} = props;
+    const itemMainDimension = this._getItemMainDimension();
 
-    _getActiveSlideOffset() {
-        const { activeSlideOffset } = this.props;
-        const itemMainDimension = this._getItemMainDimension();
-        const minOffset = 10;
-        // Make sure activeSlideOffset never prevents the active area from being at least 10 px wide
-        return itemMainDimension / 2 - activeSlideOffset >= minOffset
-            ? activeSlideOffset
-            : minOffset;
+    if (!data || !data.length) {
+      return;
     }
 
-    _getActiveItem(offset) {
-        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;
-        }
+    const interpolators = [];
+    this._positions = [];
 
-        if (
-            this._positions[lastIndex] &&
-            offset >= this._positions[lastIndex].start
-        ) {
-            return lastIndex;
-        }
+    this._getCustomData(props).forEach((_itemData, index) => {
+      const _index = this._getCustomIndex(index, props);
+      let animatedValue;
 
-        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;
-            }
-        }
+      this._positions[index] = {
+        start: index * itemMainDimension,
+        end: index * itemMainDimension + itemMainDimension,
+      };
 
-        return itemIndex || 0;
-    }
+      if (!this._shouldAnimateSlides(props) || !this._scrollPos) {
+        animatedValue = new Animated.Value(1);
+      } else {
+        let interpolator;
 
-    _getSlideInterpolatedStyle(index, animatedValue) {
-        const { layoutCardOffset, slideInterpolatedStyle } = this.props;
-
-        if (slideInterpolatedStyle) {
-            return slideInterpolatedStyle(index, animatedValue, this.props);
-        } else if (this._shouldUseTinderLayout()) {
-            return tinderAnimatedStyles(
-                index,
-                animatedValue,
-                this.props,
-                layoutCardOffset,
-            );
+        if (scrollInterpolator) {
+          interpolator = scrollInterpolator(_index, props);
         } else if (this._shouldUseStackLayout()) {
-            return stackAnimatedStyles(
-                index,
-                animatedValue,
-                this.props,
-                layoutCardOffset,
-            );
-        } else if (this._shouldUseShiftLayout()) {
-            return shiftAnimatedStyles(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;
+          interpolator = stackScrollInterpolator(_index, props);
+        } else if (this._shouldUseTinderLayout()) {
+          interpolator = tinderScrollInterpolator(_index, props);
         }
 
-        const interpolators = [];
-        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);
-                } else if (this._shouldUseStackLayout()) {
-                    interpolator = stackScrollInterpolator(_index, props);
-                } else if (this._shouldUseTinderLayout()) {
-                    interpolator = tinderScrollInterpolator(_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, scrollValue = 1) {
-        const offset = this._getItemScrollOffset(index);
-
         if (
-            !this._mounted ||
-            !this._carouselRef ||
-            typeof offset === 'undefined'
+          !interpolator ||
+          !interpolator.inputRange ||
+          !interpolator.outputRange
         ) {
-            return;
+          interpolator = defaultScrollInterpolator(_index, props);
         }
 
-        const multiplier = this._currentScrollOffset === 0 ? 1 : -1;
-        const scrollDelta = scrollValue * multiplier;
-
-        this._scrollTo({
-            offset: offset + scrollDelta,
-            animated: false,
+        animatedValue = this._scrollPos.interpolate({
+          ...interpolator,
+          extrapolate: 'clamp',
         });
+      }
 
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._hackSlideAnimationTimeout);
-        this._hackSlideAnimationTimeout = setTimeout(() => {
-            this._scrollTo({
-                offset,
-                animated: false,
-            });
-        }, 1); // works randomly when set to '0'
-    }
-
-    _repositionScroll(index, animated = false) {
-        const { data, loopClonesPerSide } = this.props;
-        const dataLength = data && data.length;
+      interpolators.push(animatedValue);
+    });
 
-        if (
-            typeof index === 'undefined' ||
-            !this._shouldRepositionScroll(index)
-        ) {
-            return;
-        }
+    this.setState({interpolators});
+  }
 
-        let repositionTo = index;
+  _hackActiveSlideAnimation(index, scrollValue = 1) {
+    const offset = this._getItemScrollOffset(index);
 
-        if (index >= dataLength + loopClonesPerSide) {
-            repositionTo = index - dataLength;
-        } else if (index < loopClonesPerSide) {
-            repositionTo = index + dataLength;
-        }
-
-        this._snapToItem(repositionTo, animated, false);
+    if (!this._mounted || !this._carouselRef || typeof offset === 'undefined') {
+      return;
     }
 
-    _scrollTo({ offset, index, animated = true }) {
-        const { vertical } = this.props;
-        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;
-        }
+    const multiplier = this._currentScrollOffset === 0 ? 1 : -1;
+    const scrollDelta = scrollValue * multiplier;
+
+    this._scrollTo({
+      offset: offset + scrollDelta,
+      animated: false,
+    });
+
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._hackSlideAnimationTimeout);
+    this._hackSlideAnimationTimeout = setTimeout(() => {
+      this._scrollTo({
+        offset,
+        animated: false,
+      });
+    }, 1); // works randomly when set to '0'
+  }
+
+  _repositionScroll(index, animated = false) {
+    const {data, loopClonesPerSide} = this.props;
+    const dataLength = data && data.length;
+
+    if (typeof index === 'undefined' || !this._shouldRepositionScroll(index)) {
+      return;
+    }
 
-        if (typeof scrollToOffset === 'undefined') {
-            return;
-        }
+    let repositionTo = index;
 
-        const options = this._needsScrollView()
-            ? {
-                  x: vertical ? 0 : offset,
-                  y: vertical ? offset : 0,
-                  animated,
-              }
-            : {
-                  offset,
-                  animated,
-              };
-
-        if (this._needsScrollView()) {
-            wrappedRef.scrollTo(options);
-        } else {
-            wrappedRef.scrollToOffset(options);
-        }
+    if (index >= dataLength + loopClonesPerSide) {
+      repositionTo = index - dataLength;
+    } else if (index < loopClonesPerSide) {
+      repositionTo = index + dataLength;
     }
 
-    _onTouchStart(event) {
-        const { onTouchStart } = this.props;
+    this._snapToItem(repositionTo, animated, false);
+  }
 
-        // `onTouchStart` is fired even when `scrollEnabled` is set to `false`
-        if (this._getScrollEnabled() !== false && this._autoplaying) {
-            this.pauseAutoPlay();
-        }
+  _scrollTo({offset, index, animated = true}) {
+    const {vertical} = this.props;
+    const wrappedRef = this._getWrappedRef();
+    if (
+      !this._mounted ||
+      !wrappedRef ||
+      (typeof offset === 'undefined' && typeof index === 'undefined')
+    ) {
+      return;
+    }
 
-        onTouchStart && onTouchStart(event);
+    let scrollToOffset;
+    if (typeof index !== 'undefined') {
+      scrollToOffset = this._getItemScrollOffset(index);
+    } else {
+      scrollToOffset = offset;
     }
 
-    _onTouchEnd(event) {
-        const { onTouchEnd } = this.props;
+    if (typeof scrollToOffset === 'undefined') {
+      return;
+    }
 
-        if (
-            this._getScrollEnabled() !== false &&
-            this._autoplay &&
-            !this._autoplaying
-        ) {
-            // This event is buggy on Android, so a fallback is provided in _onMomentumScrollEnd()
-            this.startAutoplay();
+    const options = this._needsScrollView()
+      ? {
+          x: vertical ? 0 : offset,
+          y: vertical ? offset : 0,
+          animated,
         }
+      : {
+          offset,
+          animated,
+        };
 
-        onTouchEnd && onTouchEnd(event);
+    if (this._needsScrollView()) {
+      wrappedRef.scrollTo(options);
+    } else {
+      wrappedRef.scrollToOffset(options);
     }
+  }
 
-    _onScroll(event) {
-        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;
+  _onTouchStart(event) {
+    const {onTouchStart} = this.props;
 
-        if (nextActiveItem !== this._onScrollActiveItem) {
-            this._onScrollActiveItem = nextActiveItem;
-            onScrollIndexChanged &&
-                onScrollIndexChanged(this._getDataIndex(nextActiveItem));
+    // `onTouchStart` is fired even when `scrollEnabled` is set to `false`
+    if (this._getScrollEnabled() !== false && this._autoplaying) {
+      this.pauseAutoPlay();
+    }
 
-            onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
-        }
+    onTouchStart && onTouchStart(event);
+  }
 
-        //last item
-        if (
-            (IS_IOS && scrollOffset > lastItemScrollOffset) ||
-            (IS_ANDROID &&
-                Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
-        ) {
-            this._activeItem = nextActiveItem;
-            this._repositionScroll(nextActiveItem);
-        }
+  _onTouchEnd(event) {
+    const {onTouchEnd} = this.props;
 
-        if (typeof onScroll === 'function' && event) {
-            onScroll(event);
-        }
+    if (
+      this._getScrollEnabled() !== false &&
+      this._autoplay &&
+      !this._autoplaying
+    ) {
+      // This event is buggy on Android, so a fallback is provided in _onMomentumScrollEnd()
+      this.startAutoplay();
     }
 
-    _onMomentumScrollEnd(event) {
-        const { autoplayDelay, onMomentumScrollEnd, onSnapToItem } = this.props;
-        const scrollOffset = event
-            ? this._getScrollOffset(event)
-            : this._currentScrollOffset;
-        const nextActiveItem = this._getActiveItem(scrollOffset);
-        const hasSnapped = this._isMultiple(
-            scrollOffset,
-            this.props.vertical ? this.props.itemHeight : this.props.itemWidth,
-        );
-
-        // WARNING: everything in this condition will probably need to be called on _snapToItem as well because:
-        // 1. `onMomentumScrollEnd` won't be called if the scroll isn't animated
-        // 2. `onMomentumScrollEnd` won't be called at all on Android when scrolling programmatically
-        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);
-            }
-        }
+    onTouchEnd && onTouchEnd(event);
+  }
 
-        onMomentumScrollEnd && onMomentumScrollEnd(event);
-
-        // The touchEnd event is buggy on Android, so this will serve as a fallback whenever needed
-        // https://github.com/facebook/react-native/issues/9439
-        if (IS_ANDROID && this._autoplay && !this._autoplaying) {
-            // @ts-expect-error setTimeout / clearTiemout is buggy :/
-            clearTimeout(this._enableAutoplayTimeout);
-            this._enableAutoplayTimeout = setTimeout(() => {
-                this.startAutoplay();
-            }, autoplayDelay);
-        }
-    }
+  _onScroll(event) {
+    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);
 
-    _onLayout(event) {
-        const { onLayout } = this.props;
+    this._currentScrollOffset = scrollOffset;
 
-        // Prevent unneeded actions during the first 'onLayout' (triggered on init)
-        if (this._onLayoutInitDone) {
-            this._initPositionsAndInterpolators();
-            this._snapToItem(this._activeItem, false, false, true);
-        } else {
-            this._onLayoutInitDone = true;
-        }
+    if (nextActiveItem !== this._onScrollActiveItem) {
+      this._onScrollActiveItem = nextActiveItem;
+      onScrollIndexChanged &&
+        onScrollIndexChanged(this._getDataIndex(nextActiveItem));
 
-        onLayout && onLayout(event);
+      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
     }
 
-    _snapToItem(
-        index,
-        animated = true,
-        fireCallback = true,
-        forceScrollTo = false,
+    //last item
+    if (
+      (IS_IOS && scrollOffset > lastItemScrollOffset) ||
+      (IS_ANDROID &&
+        Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
     ) {
-        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);
+      this._activeItem = nextActiveItem;
+      this._repositionScroll(nextActiveItem);
+    }
 
-        if (offset === undefined) {
-            return;
-        }
+    if (typeof onScroll === 'function' && event) {
+      onScroll(event);
+    }
+  }
+
+  _onMomentumScrollEnd(event) {
+    const {autoplayDelay, onMomentumScrollEnd, onSnapToItem} = this.props;
+    const scrollOffset = event
+      ? this._getScrollOffset(event)
+      : this._currentScrollOffset;
+    const nextActiveItem = this._getActiveItem(scrollOffset);
+    const hasSnapped = this._isMultiple(
+      scrollOffset,
+      this.props.vertical ? this.props.itemHeight : this.props.itemWidth,
+    );
+
+    // WARNING: everything in this condition will probably need to be called on _snapToItem as well because:
+    // 1. `onMomentumScrollEnd` won't be called if the scroll isn't animated
+    // 2. `onMomentumScrollEnd` won't be called at all on Android when scrolling programmatically
+    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);
+      }
+    }
 
-        this._scrollTo({
-            offset,
-            animated,
-        });
+    onMomentumScrollEnd && onMomentumScrollEnd(event);
 
-        // On both platforms, `onMomentumScrollEnd` won't be triggered if the scroll isn't animated
-        // so we need to trigger the callback manually
-        // On Android `onMomentumScrollEnd` won't be triggered when scrolling programmatically
-        // Therefore everything critical needs to be manually called here as well, even though the timing might be off
-        const requiresManualTrigger = !animated || IS_ANDROID;
-        if (requiresManualTrigger) {
-            this._activeItem = index;
-
-            if (fireCallback) {
-                onSnapToItem && onSnapToItem(this._getDataIndex(index));
-            }
-
-            // Repositioning on Android
-            if (IS_ANDROID && this._shouldRepositionScroll(index)) {
-                if (animated) {
-                    this._androidRepositioningTimeout = setTimeout(() => {
-                        // Without scroll animation, the behavior is completely buggy...
-                        this._repositionScroll(index, false);
-                    }, 400); // Approximate scroll duration on Android
-                } else {
-                    this._repositionScroll(index);
-                }
-            }
-        }
+    // The touchEnd event is buggy on Android, so this will serve as a fallback whenever needed
+    // https://github.com/facebook/react-native/issues/9439
+    if (IS_ANDROID && this._autoplay && !this._autoplaying) {
+      // @ts-expect-error setTimeout / clearTiemout is buggy :/
+      clearTimeout(this._enableAutoplayTimeout);
+      this._enableAutoplayTimeout = setTimeout(() => {
+        this.startAutoplay();
+      }, autoplayDelay);
     }
+  }
 
-    startAutoplay() {
-        const { autoplayInterval, autoplayDelay } = this.props;
-        this._autoplay = true;
+  _onLayout(event) {
+    const {onLayout} = this.props;
 
-        if (this._autoplaying) {
-            return;
-        }
+    // Prevent unneeded actions during the first 'onLayout' (triggered on init)
+    if (this._onLayoutInitDone) {
+      this._initPositionsAndInterpolators();
+      this._snapToItem(this._activeItem, false, false, true);
+    } else {
+      this._onLayoutInitDone = true;
+    }
 
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._autoplayTimeout);
-        this._autoplayTimeout = setTimeout(() => {
-            this._autoplaying = true;
-            this._autoplayInterval = setInterval(() => {
-                if (this._autoplaying) {
-                    this.snapToNext();
-                }
-            }, autoplayInterval);
-        }, autoplayDelay);
+    onLayout && onLayout(event);
+  }
+
+  _snapToItem(
+    index,
+    animated = true,
+    fireCallback = true,
+    forceScrollTo = false,
+  ) {
+    const {onSnapToItem} = this.props;
+    const itemsLength = this._getCustomDataLength();
+    const wrappedRef = this._getWrappedRef();
+    if (!itemsLength || !wrappedRef) {
+      return;
     }
 
-    pauseAutoPlay() {
-        this._autoplaying = false;
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._autoplayTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearTimeout(this._enableAutoplayTimeout);
-        // @ts-expect-error setTimeout / clearTiemout is buggy :/
-        clearInterval(this._autoplayInterval);
+    if (!index || index < 0) {
+      index = 0;
+    } else if (itemsLength > 0 && index >= itemsLength) {
+      index = itemsLength - 1;
     }
 
-    stopAutoplay() {
-        this._autoplay = false;
-        this.pauseAutoPlay();
+    if (index === this._activeItem && !forceScrollTo) {
+      return;
     }
 
-    snapToNext(animated = true, fireCallback = true) {
-        const itemsLength = this._getCustomDataLength();
+    const offset = this._getItemScrollOffset(index);
 
-        let newIndex = this._activeItem + 1;
-        if (newIndex > itemsLength - 1) {
-            newIndex = 0;
-        }
-        this._snapToItem(newIndex, animated, fireCallback);
+    if (offset === undefined) {
+      return;
     }
 
-    snapToPrev(animated = true, fireCallback = true) {
-        const itemsLength = this._getCustomDataLength();
-
-        let newIndex = this._activeItem - 1;
-        if (newIndex < 0) {
-            newIndex = itemsLength - 1;
+    this._scrollTo({
+      offset,
+      animated,
+    });
+
+    // On both platforms, `onMomentumScrollEnd` won't be triggered if the scroll isn't animated
+    // so we need to trigger the callback manually
+    // On Android `onMomentumScrollEnd` won't be triggered when scrolling programmatically
+    // Therefore everything critical needs to be manually called here as well, even though the timing might be off
+    const requiresManualTrigger = !animated || IS_ANDROID;
+    if (requiresManualTrigger) {
+      this._activeItem = index;
+
+      if (fireCallback) {
+        onSnapToItem && onSnapToItem(this._getDataIndex(index));
+      }
+
+      // Repositioning on Android
+      if (IS_ANDROID && this._shouldRepositionScroll(index)) {
+        if (animated) {
+          this._androidRepositioningTimeout = setTimeout(() => {
+            // Without scroll animation, the behavior is completely buggy...
+            this._repositionScroll(index, false);
+          }, 400); // Approximate scroll duration on Android
+        } else {
+          this._repositionScroll(index);
         }
-        this._snapToItem(newIndex, animated, fireCallback);
+      }
     }
+  }
 
-    // https://github.com/facebook/react-native/issues/1831#issuecomment-231069668
-    triggerRenderingHack(offset = 1) {
-        this._hackActiveSlideAnimation(this._activeItem, offset);
-    }
+  startAutoplay() {
+    const {autoplayInterval, autoplayDelay} = this.props;
+    this._autoplay = true;
 
-    _renderItem({ item, index }) {
-        const { interpolators } = this.state;
-        const { keyExtractor, slideStyle } = this.props;
-        const animatedValue = interpolators && interpolators[index];
+    if (this._autoplaying) {
+      return;
+    }
 
-        if (typeof animatedValue === 'undefined') {
-            return null;
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._autoplayTimeout);
+    this._autoplayTimeout = setTimeout(() => {
+      this._autoplaying = true;
+      this._autoplayInterval = setInterval(() => {
+        if (this._autoplaying) {
+          this.snapToNext();
         }
-
-        const animate = this._shouldAnimateSlides();
-        const Component = animate ? Animated.View : View;
-        const animatedStyle = animate
-            ? this._getSlideInterpolatedStyle(index, animatedValue)
-            : {};
-        const dataIndex = this._getDataIndex(index);
-
-        const mainDimension = this.props.vertical
-            ? { height: this.props.itemHeight }
-            : { 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.vertical
-                    ? this.props.renderItem(
-                          {
-                              item,
-                              index,
-                              dataIndex,
-                              realIndex: this._getDataIndex(index),
-                              activeIndex: this._getDataIndex(this._activeItem),
-                          },
-                          {
-                              scrollPosition: this._scrollPos,
-                              carouselRef: this._carouselRef,
-                              vertical: this.props.vertical,
-                              sliderHeight: this.props.sliderHeight,
-                              itemHeight: this.props.itemHeight,
-                          },
-                      )
-                    : this.props.renderItem(
-                          {
-                              item,
-                              index,
-                              dataIndex,
-                              realIndex: this._getDataIndex(index),
-                              activeIndex: this._getDataIndex(this._activeItem),
-                          },
-                          {
-                              scrollPosition: this._scrollPos,
-                              carouselRef: this._carouselRef,
-                              vertical: !!this.props.vertical,
-                              sliderWidth: this.props.sliderWidth,
-                              itemWidth: this.props.itemWidth,
-                          },
-                      )}
-            </Component>
-        );
+      }, autoplayInterval);
+    }, autoplayDelay);
+  }
+
+  pauseAutoPlay() {
+    this._autoplaying = false;
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._autoplayTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    clearTimeout(this._enableAutoplayTimeout);
+    // @ts-expect-error setTimeout / clearTiemout is buggy :/
+    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);
+  }
 
-    _getComponentOverridableProps() {
-        const { hideCarousel } = this.state;
-        const { loopClonesPerSide } = this.props;
-        const visibleItems =
-            Math.ceil(
-                this.props.vertical
-                    ? this.props.sliderHeight / this.props.itemHeight
-                    : this.props.sliderWidth / this.props.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,
-                  // updateCellsBatchingPeriod
-              }
-            : {};
-
-        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',
-            // removeClippedSubviews: !this._needsScrollView(),
-            // renderToHardwareTextureAndroid: true,
-            scrollsToTop: false,
-            showsHorizontalScrollIndicator: false,
-            showsVerticalScrollIndicator: false,
-        };
-    }
+  snapToPrev(animated = true, fireCallback = true) {
+    const itemsLength = this._getCustomDataLength();
 
-    _getComponentStaticProps() {
-        const { hideCarousel } = this.state;
-        const {
-            activeSlideAlignment,
-            CellRendererComponent,
-            containerCustomStyle,
-            contentContainerCustomStyle,
-            firstItem,
-            getItemLayout,
-            keyExtractor,
-            style,
-            useExperimentalSnap,
-            disableIntervalMomentum,
-            vertical,
-            enableSnap,
-        } = this.props;
-        const containerStyle = [
-            // { overflow: 'hidden' },
-            containerCustomStyle || style || {},
-            hideCarousel ? { opacity: 0 } : {},
-            this.props.vertical
-                ? {
-                      height: this.props.sliderHeight,
-                      flexDirection: 'column',
-                  } // LTR hack; see https://github.com/facebook/react-native/issues/11960
-                : // and https://github.com/facebook/react-native/issues/13100#issuecomment-328986423
-                  {
-                      width: this.props.sliderWidth,
-                      flexDirection: this._needsRTLAdaptations()
-                          ? 'row-reverse'
-                          : 'row',
-                  },
-        ];
-
-        const innerMarginStyle = this.props.vertical
-            ? {
-                  paddingTop: this._getContainerInnerMargin(),
-                  paddingBottom: this._getContainerInnerMargin(true),
-              }
-            : {
-                  paddingLeft: this._getContainerInnerMargin(),
-                  paddingRight: this._getContainerInnerMargin(true),
-              };
-
-        const contentContainerStyle = [
-            vertical
-                ? {
-                      paddingTop: this._getContainerInnerMargin(),
-                      paddingBottom: this._getContainerInnerMargin(true),
-                  }
-                : {
-                      paddingLeft: this._getContainerInnerMargin(),
-                      paddingRight: this._getContainerInnerMargin(true),
-                  },
-            contentContainerCustomStyle || {},
-        ];
-
-        // WARNING: `snapToAlignment` won't work as intended because of the following:
-        // https://github.com/facebook/react-native/blob/d0871d0a9a373e1d3ac35da46c85c0d0e793116d/React/Views/ScrollView/RCTScrollView.m#L751-L755
-        // - Snap points will be off
-        // - Slide animations will be off
-        // - Last items won't be set as active (no `onSnapToItem` callback)
-        // Recommended only with large slides and `activeSlideAlignment` set to `start` for the time being
-        const snapProps =
-            enableSnap && useExperimentalSnap
-                ? {
-                      disableIntervalMomentum, // Slide ± one item at a time
-                      snapToAlignment: activeSlideAlignment,
-                      snapToInterval: this._getItemMainDimension(),
-                  }
-                : {
-                      snapToOffsets: this._getSnapOffsets(),
-                  };
-
-        // Flatlist specifics
-        const specificProps = !this._needsScrollView()
-            ? {
-                  CellRendererComponent:
-                      CellRendererComponent || this._getCellRendererComponent,
-                  getItemLayout: getItemLayout || this._getItemLayout,
-                  initialScrollIndex: this._getFirstItem(firstItem),
-                  keyExtractor: keyExtractor || this._getKeyExtractor,
-                  numColumns: 1,
-                  renderItem: this._renderItem,
-              }
-            : {};
-
-        return {
-            ...specificProps,
-            ...snapProps,
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            ref: (c) => {
-                this._carouselRef = c;
-            },
-            contentContainerStyle: contentContainerStyle,
-            data: this._getCustomData(),
-            horizontal: !this.props.vertical,
-            scrollEventThrottle: 1,
-            style: containerStyle,
-            onLayout: this._onLayout,
-            onMomentumScrollEnd: this._onMomentumScrollEnd,
-            onScroll: this._onScrollHandler,
-            onTouchStart: this._onTouchStart,
-            onTouchEnd: this._onTouchEnd,
-        };
+    let newIndex = this._activeItem - 1;
+    if (newIndex < 0) {
+      newIndex = itemsLength - 1;
     }
+    this._snapToItem(newIndex, animated, fireCallback);
+  }
 
-    render() {
-        const { data, renderItem, useScrollView } = this.props;
+  // https://github.com/facebook/react-native/issues/1831#issuecomment-231069668
+  triggerRenderingHack(offset = 1) {
+    this._hackActiveSlideAnimation(this._activeItem, offset);
+  }
 
-        if (!data || !renderItem) {
-            return null;
-        }
+  _renderItem({item, index}) {
+    const {interpolators} = this.state;
+    const {keyExtractor, slideStyle} = this.props;
+    const animatedValue = interpolators && interpolators[index];
 
-        const props = {
-            ...this._getComponentOverridableProps(),
-            ...this.props,
-            ...this._getComponentStaticProps(),
+    if (typeof animatedValue === 'undefined') {
+      return null;
+    }
+
+    const animate = this._shouldAnimateSlides();
+    const Component = animate ? Animated.View : View;
+    const animatedStyle = animate
+      ? this._getSlideInterpolatedStyle(index, animatedValue)
+      : {};
+    const dataIndex = this._getDataIndex(index);
+
+    const mainDimension = this.props.vertical
+      ? {height: this.props.itemHeight}
+      : {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.vertical
+          ? this.props.renderItem(
+              {
+                item,
+                index,
+                dataIndex,
+                realIndex: this._getDataIndex(index),
+                activeIndex: this._getDataIndex(this._activeItem),
+              },
+              {
+                scrollPosition: this._scrollPos,
+                carouselRef: this._carouselRef,
+                vertical: this.props.vertical,
+                sliderHeight: this.props.sliderHeight,
+                itemHeight: this.props.itemHeight,
+              },
+            )
+          : this.props.renderItem(
+              {
+                item,
+                index,
+                dataIndex,
+                realIndex: this._getDataIndex(index),
+                activeIndex: this._getDataIndex(this._activeItem),
+              },
+              {
+                scrollPosition: this._scrollPos,
+                carouselRef: this._carouselRef,
+                vertical: !!this.props.vertical,
+                sliderWidth: this.props.sliderWidth,
+                itemWidth: this.props.itemWidth,
+              },
+            )}
+      </Component>
+    );
+  }
+
+  _getComponentOverridableProps() {
+    const {hideCarousel} = this.state;
+    const {loopClonesPerSide} = this.props;
+    const visibleItems =
+      Math.ceil(
+        this.props.vertical
+          ? this.props.sliderHeight / this.props.itemHeight
+          : this.props.sliderWidth / this.props.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,
+          // updateCellsBatchingPeriod
+        }
+      : {};
+
+    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',
+      // removeClippedSubviews: !this._needsScrollView(),
+      // renderToHardwareTextureAndroid: true,
+      scrollsToTop: false,
+      showsHorizontalScrollIndicator: false,
+      showsVerticalScrollIndicator: false,
+    };
+  }
+
+  _getComponentStaticProps() {
+    const {hideCarousel} = this.state;
+    const {
+      activeSlideAlignment,
+      CellRendererComponent,
+      containerCustomStyle,
+      contentContainerCustomStyle,
+      firstItem,
+      getItemLayout,
+      keyExtractor,
+      style,
+      useExperimentalSnap,
+      disableIntervalMomentum,
+      vertical,
+      enableSnap,
+    } = this.props;
+    const containerStyle = [
+      // { overflow: 'hidden' },
+      containerCustomStyle || style || {},
+      hideCarousel ? {opacity: 0} : {},
+      this.props.vertical
+        ? {
+            height: this.props.sliderHeight,
+            flexDirection: 'column',
+          } // LTR hack; see https://github.com/facebook/react-native/issues/11960
+        : // and https://github.com/facebook/react-native/issues/13100#issuecomment-328986423
+          {
+            width: this.props.sliderWidth,
+            flexDirection: this._needsRTLAdaptations() ? 'row-reverse' : 'row',
+          },
+    ];
+
+    const innerMarginStyle = this.props.vertical
+      ? {
+          paddingTop: this._getContainerInnerMargin(),
+          paddingBottom: this._getContainerInnerMargin(true),
+        }
+      : {
+          paddingLeft: this._getContainerInnerMargin(),
+          paddingRight: this._getContainerInnerMargin(true),
         };
 
-        const ScrollViewComponent =
-            typeof useScrollView === 'function'
-                ? useScrollView
-                : Animated.ScrollView;
-        return this._needsScrollView() || !Animated.FlatList ? (
-            <ScrollViewComponent {...props}>
-                {this._getCustomData().map((item, index) => {
-                    return this._renderItem({
-                        item,
-                        index,
-                        realIndex: this._getDataIndex(index),
-                        activeIndex: this._getDataIndex(this._activeItem),
-                    });
-                })}
-            </ScrollViewComponent>
-        ) : (
-            // @ts-expect-error Seems complicated to make TS 100% happy, while sharing that many things between
-            // flatlist && scrollview implementation. I'll prob try to rewrite parts of the logic to overcome that.
-            <Animated.FlatList {...props} />
-        );
+    const contentContainerStyle = [
+      vertical
+        ? {
+            paddingTop: this._getContainerInnerMargin(),
+            paddingBottom: this._getContainerInnerMargin(true),
+          }
+        : {
+            paddingLeft: this._getContainerInnerMargin(),
+            paddingRight: this._getContainerInnerMargin(true),
+          },
+      contentContainerCustomStyle || {},
+    ];
+
+    // WARNING: `snapToAlignment` won't work as intended because of the following:
+    // https://github.com/facebook/react-native/blob/d0871d0a9a373e1d3ac35da46c85c0d0e793116d/React/Views/ScrollView/RCTScrollView.m#L751-L755
+    // - Snap points will be off
+    // - Slide animations will be off
+    // - Last items won't be set as active (no `onSnapToItem` callback)
+    // Recommended only with large slides and `activeSlideAlignment` set to `start` for the time being
+    const snapProps =
+      enableSnap && useExperimentalSnap
+        ? {
+            disableIntervalMomentum, // Slide ± one item at a time
+            snapToAlignment: activeSlideAlignment,
+            snapToInterval: this._getItemMainDimension(),
+          }
+        : {
+            snapToOffsets: this._getSnapOffsets(),
+          };
+
+    // Flatlist specifics
+    const specificProps = !this._needsScrollView()
+      ? {
+          CellRendererComponent:
+            CellRendererComponent || this._getCellRendererComponent,
+          getItemLayout: getItemLayout || this._getItemLayout,
+          initialScrollIndex: this._getFirstItem(firstItem),
+          keyExtractor: keyExtractor || this._getKeyExtractor,
+          numColumns: 1,
+          renderItem: this._renderItem,
+        }
+      : {};
+
+    return {
+      ...specificProps,
+      ...snapProps,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref: c => {
+        this._carouselRef = c;
+      },
+      contentContainerStyle: contentContainerStyle,
+      data: this._getCustomData(),
+      horizontal: !this.props.vertical,
+      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;
     }
+
+    const props = {
+      ...this._getComponentOverridableProps(),
+      ...this.props,
+      ...this._getComponentStaticProps(),
+    };
+
+    const ScrollViewComponent =
+      typeof useScrollView === 'function' ? useScrollView : Animated.ScrollView;
+    return this._needsScrollView() || !Animated.FlatList ? (
+      <ScrollViewComponent {...props}>
+        {this._getCustomData().map((item, index) => {
+          return this._renderItem({
+            item,
+            index,
+            realIndex: this._getDataIndex(index),
+            activeIndex: this._getDataIndex(this._activeItem),
+          });
+        })}
+      </ScrollViewComponent>
+    ) : (
+      // @ts-expect-error Seems complicated to make TS 100% happy, while sharing that many things between
+      // flatlist && scrollview implementation. I'll prob try to rewrite parts of the logic to overcome that.
+      <Animated.FlatList {...props} />
+    );
+  }
 }
 
 Carousel.propTypes = {
-    data: PropTypes.array.isRequired,
-    renderItem: PropTypes.func.isRequired,
-    itemWidth: PropTypes.number, // required for horizontal carousel
-    itemHeight: PropTypes.number, // required for vertical carousel
-    sliderWidth: PropTypes.number, // required for horizontal carousel
-    sliderHeight: PropTypes.number, // required for vertical carousel
-    activeSlideAlignment: PropTypes.oneOf(['center', 'end', 'start']),
-    activeSlideOffset: PropTypes.number,
-    apparitionDelay: PropTypes.number,
-    autoplay: PropTypes.bool,
-    autoplayDelay: PropTypes.number,
-    autoplayInterval: PropTypes.number,
-    callbackOffsetMargin: PropTypes.number,
-    containerCustomStyle: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.array,
-    ]),
-    contentContainerCustomStyle: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.array,
-    ]),
-    enableSnap: PropTypes.bool,
-    firstItem: PropTypes.number,
-    hasParallaxImages: PropTypes.bool,
-    inactiveSlideOpacity: PropTypes.number,
-    inactiveSlideScale: PropTypes.number,
-    inactiveSlideShift: PropTypes.number,
-    layout: PropTypes.oneOf(['default', 'stack', 'tinder']),
-    layoutCardOffset: PropTypes.number,
-    loop: PropTypes.bool,
-    loopClonesPerSide: PropTypes.number,
-    scrollEnabled: PropTypes.bool,
-    scrollInterpolator: PropTypes.func,
-    slideInterpolatedStyle: PropTypes.func,
-    slideStyle: PropTypes.object,
-    shouldOptimizeUpdates: PropTypes.bool,
-    swipeThreshold: PropTypes.number,
-    useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
-    vertical: PropTypes.bool,
-    showsPagination: PropTypes.bool,
-    isCustomScrollWidth: PropTypes.bool,
-    disableIntervalMomentum: PropTypes.bool,
-    useExperimentalSnap: PropTypes.bool,
-    onBeforeSnapToItem: PropTypes.func,
-    onSnapToItem: PropTypes.func,
+  data: PropTypes.array.isRequired,
+  renderItem: PropTypes.func.isRequired,
+  itemWidth: PropTypes.number, // required for horizontal carousel
+  itemHeight: PropTypes.number, // required for vertical carousel
+  sliderWidth: PropTypes.number, // required for horizontal carousel
+  sliderHeight: PropTypes.number, // required for vertical carousel
+  activeSlideAlignment: PropTypes.oneOf(['center', 'end', 'start']),
+  activeSlideOffset: PropTypes.number,
+  apparitionDelay: PropTypes.number,
+  autoplay: PropTypes.bool,
+  autoplayDelay: PropTypes.number,
+  autoplayInterval: PropTypes.number,
+  callbackOffsetMargin: PropTypes.number,
+  containerCustomStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+  ]),
+  contentContainerCustomStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+  ]),
+  enableSnap: PropTypes.bool,
+  firstItem: PropTypes.number,
+  hasParallaxImages: PropTypes.bool,
+  inactiveSlideOpacity: PropTypes.number,
+  inactiveSlideScale: PropTypes.number,
+  inactiveSlideShift: PropTypes.number,
+  layout: PropTypes.oneOf(['default', 'stack', 'tinder']),
+  layoutCardOffset: PropTypes.number,
+  loop: PropTypes.bool,
+  loopClonesPerSide: PropTypes.number,
+  scrollEnabled: PropTypes.bool,
+  scrollInterpolator: PropTypes.func,
+  slideInterpolatedStyle: PropTypes.func,
+  slideStyle: PropTypes.object,
+  shouldOptimizeUpdates: PropTypes.bool,
+  swipeThreshold: PropTypes.number,
+  useScrollView: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  vertical: PropTypes.bool,
+  showsPagination: PropTypes.bool,
+  isCustomScrollWidth: PropTypes.bool,
+  disableIntervalMomentum: PropTypes.bool,
+  useExperimentalSnap: PropTypes.bool,
+  onBeforeSnapToItem: PropTypes.func,
+  onSnapToItem: PropTypes.func,
 };
 
 Carousel.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,
+  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,
 };