@momo-kits/carousel 0.150.2-phuc.15 → 0.150.3-beta.20

package/index.tsx

@@ -1,840 +1,1470 @@
-import React from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
-  Dimensions,
-  GestureResponderEvent,
+  I18nManager,
   LayoutChangeEvent,
-  NativeScrollEvent,
   NativeSyntheticEvent,
+  NativeScrollEvent,
   Platform,
   View,
-  ViewStyle,
 } from 'react-native';
-import { defaultAnimatedStyles, defaultScrollInterpolator } from './animation';
-import { CarouselProps, CarouselRef, CarouselState, Position } from './types';
-import { Spacing } from '@momo-kits/foundation';
+import {
+  defaultAnimatedStyles,
+  defaultScrollInterpolator,
+  shiftAnimatedStyles,
+  stackAnimatedStyles,
+  stackScrollInterpolator,
+  tinderAnimatedStyles,
+  tinderScrollInterpolator,
+} from './animation';
+import { CarouselProps, CarouselRef, Position } from './types';
 
 const IS_ANDROID = Platform.OS === 'android';
 const IS_IOS = Platform.OS === 'ios';
-const screenWidth = Dimensions.get('window').width;
-
-class Carousel extends React.PureComponent<CarouselProps, CarouselState> {
-  static defaultProps = {
-    activeSlideAlignment: 'start',
-    activeSlideOffset: 20,
-    apparitionDelay: 0,
-    autoplay: false,
-    autoplayDelay: 1000,
-    autoplayInterval: 3000,
-    callbackOffsetMargin: 5,
-    containerCustomStyle: {},
-    contentContainerCustomStyle: {},
-    enableSnap: true,
-    firstItem: 0,
-    hasParallaxImages: false,
-    loop: false,
-    loopClonesPerSide: 3,
-    scrollEnabled: true,
-    slideStyle: {},
-    shouldOptimizeUpdates: true,
-    vertical: false,
-    isCustomScrollWidth: false,
-    disableIntervalMomentum: IS_ANDROID,
-    useExperimentalSnap: IS_ANDROID,
-    visibleItem: 1,
-    full: false,
-  };
+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]);
 
-  _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 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],
+  );
 
-    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);
-  }
+  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 [];
+      }
 
-  componentDidMount() {
-    const { apparitionDelay, autoplay } = this.props;
+      if (!enableLoop()) {
+        return propsData;
+      }
 
-    this._mounted = true;
-    this._initPositionsAndInterpolators();
+      let previousItems: any[] = [];
+      let nextItems: any[] = [];
 
-    // Without 'requestAnimationFrame' or a `0` timeout, images will randomly not be rendered on Android...
-    this._initTimeout = setTimeout(() => {
-      if (!this._mounted) {
-        return;
-      }
+      if (loopClones > dataLength) {
+        const dataMultiplier = Math.floor(loopClones / dataLength);
+        const remainder = loopClones % dataLength;
 
-      const apparitionCallback = () => {
-        if (apparitionDelay) {
-          this.setState({ hideCarousel: false });
-        }
-        if (autoplay) {
-          this.startAutoplay();
+        for (let i = 0; i < dataMultiplier; i++) {
+          previousItems.push(...propsData);
+          nextItems.push(...propsData);
         }
-      };
 
-      if (apparitionDelay) {
-        this._apparitionTimeout = setTimeout(() => {
-          apparitionCallback();
-        }, apparitionDelay);
+        previousItems.unshift(...propsData.slice(-remainder));
+        nextItems.push(...propsData.slice(0, remainder));
       } else {
-        apparitionCallback();
+        previousItems = propsData.slice(-loopClones);
+        nextItems = propsData.slice(0, loopClones);
       }
-    }, 1);
-  }
-
-  componentDidUpdate(prevProps: CarouselProps) {
-    const { interpolators } = this.state;
-    const { firstItem = 0, scrollEnabled } = this.props;
-    const itemsLength = this._getCustomDataLength(this.props);
 
-    if (!itemsLength) {
-      return;
-    }
+      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;
+      }
 
-    const nextFirstItem = this._getFirstItem(firstItem, this.props);
-    let nextActiveItem =
-      typeof this._activeItem !== 'undefined'
-        ? this._activeItem
-        : nextFirstItem;
+      return enableLoop() ? dataLength + 2 * loopClones : dataLength;
+    },
+    [data, loopClonesPerSide, enableLoop],
+  );
 
-    if (nextActiveItem > itemsLength - 1) {
-      nextActiveItem = itemsLength - 1;
-    }
+  const getCustomIndex = useCallback(
+    (index: number, propsOverride = props) => {
+      const itemsLength = getCustomDataLength(propsOverride);
 
-    if (scrollEnabled !== prevProps.scrollEnabled) {
-      this._setScrollEnabled(scrollEnabled);
-    }
+      if (!itemsLength || typeof index === 'undefined') {
+        return 0;
+      }
 
-    if (interpolators.length !== itemsLength) {
-      this._activeItem = nextActiveItem;
-      this._previousItemsLength = itemsLength;
+      return needsRTLAdaptations() ? itemsLength - index - 1 : index;
+    },
+    [getCustomDataLength, needsRTLAdaptations],
+  );
 
-      this._initPositionsAndInterpolators(this.props);
-    } else if (
-      nextFirstItem !== this._previousFirstItem &&
-      nextFirstItem !== this._activeItem
-    ) {
-      this._activeItem = nextFirstItem;
-      this._previousFirstItem = nextFirstItem;
-      this._snapToItem(nextFirstItem, false, true, true);
-    }
-
-    if (this.props.onScroll !== prevProps.onScroll) {
-      this._setScrollHandler(this.props);
-    }
-  }
+  const getDataIndex = useCallback(
+    (index: number) => {
+      const dataLength = data && data.length;
+      if (!enableLoop() || !dataLength) {
+        return index;
+      }
 
-  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);
-  }
+      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]);
 
-  _setScrollHandler(props: CarouselProps) {
-    const scrollEventConfig = {
-      listener: this._onScroll,
-      useNativeDriver: true,
-    };
-    this._scrollPos = new Animated.Value(0);
-    const argMapping = [
-      { nativeEvent: { contentOffset: { x: this._scrollPos } } },
-    ];
+  const getFirstItem = useCallback(
+    (index: number, propsOverride = props) => {
+      const { loopClonesPerSide: loopClones = loopClonesPerSide } =
+        propsOverride;
+      const itemsLength = getCustomDataLength(propsOverride);
 
-    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;
+      if (!itemsLength || index > itemsLength - 1 || index < 0) {
+        return 0;
       }
-      argMapping.push(...props.onScroll._argMapping);
-    }
-    this._onScrollHandler = Animated.event(argMapping, scrollEventConfig);
-  }
-
-  _enableLoop() {
-    const { data, enableSnap, loop } = this.props;
-    return enableSnap && loop && data && data.length && data.length > 1;
-  }
 
-  _shouldAnimateSlides(props = this.props) {
-    const { inactiveSlideOpacity = 1, inactiveSlideScale = 1 } = props;
-    return inactiveSlideOpacity < 1 || inactiveSlideScale < 1;
-  }
+      return enableLoop() ? index + loopClones : index;
+    },
+    [getCustomDataLength, enableLoop, loopClonesPerSide],
+  );
 
-  _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)
+  const getWrappedRef = useCallback(() => {
+    if (
+      carouselRef.current &&
+      ((needsScrollView() && carouselRef.current.scrollTo) ||
+        (!needsScrollView() && carouselRef.current.scrollToOffset))
+    ) {
+      return carouselRef.current;
+    }
+    return (
+      carouselRef.current &&
+      carouselRef.current.getNode &&
+      carouselRef.current.getNode()
     );
-  }
+  }, [needsScrollView]);
 
-  _isMultiple(x: number, y: number) {
-    return Math.round(Math.round(x / y) / (1 / y)) === Math.round(x);
-  }
+  const getScrollEnabled = useCallback(() => {
+    return scrollEnabledRef.current;
+  }, []);
 
-  _getCustomData(props = this.props) {
-    const { data, loopClonesPerSide = 3 } = props;
-    const dataLength = data && data.length;
-
-    if (!dataLength) {
-      return [];
-    }
+  const setScrollEnabled = useCallback(
+    (enabled = true) => {
+      const wrappedRef = getWrappedRef();
 
-    if (!this._enableLoop()) {
-      return data;
-    }
+      if (!wrappedRef || !wrappedRef.setNativeProps) {
+        return;
+      }
 
-    let previousItems = [];
-    let nextItems = [];
+      wrappedRef.setNativeProps({ scrollEnabled: enabled });
+      scrollEnabledRef.current = enabled;
+    },
+    [getWrappedRef],
+  );
 
-    if (loopClonesPerSide > dataLength) {
-      const dataMultiplier = Math.floor(loopClonesPerSide / dataLength);
-      const remainder = loopClonesPerSide % dataLength;
+  const getItemMainDimension = useCallback(() => {
+    return vertical ? itemHeight : itemWidth;
+  }, [vertical, itemHeight, itemWidth]);
 
-      for (let i = 0; i < dataMultiplier; i++) {
-        previousItems.push(...data);
-        nextItems.push(...data);
+  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;
       }
 
-      previousItems.unshift(...data.slice(-remainder));
-      nextItems.push(...data.slice(0, remainder));
-    } else {
-      previousItems = data.slice(-loopClonesPerSide);
-      nextItems = data.slice(0, loopClonesPerSide);
-    }
-
-    return previousItems.concat(data, nextItems);
-  }
-
-  _getCustomDataLength(props = this.props) {
-    const { data, loopClonesPerSide = 3 } = props;
-    const dataLength = data && data.length;
+      if (
+        positionsRef.current[lastIndex] &&
+        offset >= positionsRef.current[lastIndex].start
+      ) {
+        return lastIndex;
+      }
 
-    if (!dataLength) {
-      return 0;
-    }
+      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;
+        }
+      }
 
-    return this._enableLoop() ? dataLength + 2 * loopClonesPerSide : dataLength;
-  }
+      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;
+      }
 
-  _getCustomIndex(index: number, props = this.props) {
-    const itemsLength = this._getCustomDataLength(props);
+      // Guard against invalid dimensions that would cause NaN in interpolators
+      if (
+        !itemMainDimension ||
+        itemMainDimension <= 0 ||
+        !isFinite(itemMainDimension)
+      ) {
+        return;
+      }
 
-    if (!itemsLength || typeof index === 'undefined') {
-      return 0;
-    }
+      const newInterpolators: Animated.AnimatedInterpolation<number>[] = [];
+      positionsRef.current = [];
 
-    return index;
-  }
+      getCustomData(propsOverride).forEach((_itemData: any, index: number) => {
+        const _index = getCustomIndex(index, propsOverride);
+        let animatedValue: Animated.AnimatedInterpolation<number>;
 
-  _getDataIndex(index: number) {
-    const { data, loopClonesPerSide = 3 } = this.props;
-    const dataLength = data && data.length;
-    if (!this._enableLoop() || !dataLength) {
-      return index;
-    }
+        positionsRef.current[index] = {
+          start: index * itemMainDimension,
+          end: index * itemMainDimension + itemMainDimension,
+        };
 
-    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);
+        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',
+            });
+          }
         }
 
-        for (let j = 0; j < dataMultiplier; j++) {
-          dataIndexes.push(...baseDataIndexes);
-        }
+        newInterpolators.push(animatedValue);
+      });
+
+      setInterpolators(newInterpolators);
+    },
+    [
+      data,
+      getItemMainDimension,
+      getCustomData,
+      getCustomIndex,
+      shouldAnimateSlides,
+      shouldUseStackLayout,
+      shouldUseTinderLayout,
+      scrollInterpolator,
+    ],
+  );
+
+  const hackActiveSlideAnimation = useCallback(
+    (index: number, scrollValue = 1) => {
+      const offset = getItemScrollOffset(index);
 
-        dataIndexes.unshift(...baseDataIndexes.slice(-remainder));
-        return dataIndexes[index];
-      } else {
-        return index + dataLength - loopClonesPerSide;
+      if (
+        !mountedRef.current ||
+        !carouselRef.current ||
+        typeof offset === 'undefined'
+      ) {
+        return;
       }
-    } else {
-      return index - loopClonesPerSide;
-    }
-  }
-
-  _getFirstItem(index: number, props = this.props) {
-    const { loopClonesPerSide = 3 } = props;
-    const itemsLength = this._getCustomDataLength(props);
 
-    if (!itemsLength || index > itemsLength - 1 || index < 0) {
-      return 0;
-    }
+      const multiplier = currentScrollOffsetRef.current === 0 ? 1 : -1;
+      const scrollDelta = scrollValue * multiplier;
 
-    return this._enableLoop() ? index + loopClonesPerSide : index;
-  }
+      scrollTo({ offset: offset + scrollDelta, animated: false });
 
-  _getWrappedRef() {
-    return this._carouselRef;
-  }
-
-  _getScrollEnabled() {
-    return this._scrollEnabled;
-  }
+      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;
+      }
 
-  _setScrollEnabled(scrollEnabled = true) {
-    this._scrollEnabled = scrollEnabled;
-  }
+      let repositionTo = index;
 
-  _getItemMainDimension() {
-    const { itemWidth } = this.state;
-    const { full } = this.props;
-    return full ? itemWidth : itemWidth + Spacing.S;
-  }
+      if (index >= dataLength + loopClonesPerSide) {
+        repositionTo = index - dataLength;
+      } else if (index < loopClonesPerSide) {
+        repositionTo = index + dataLength;
+      }
 
-  _getItemScrollOffset(index: number) {
-    return (
-      this._positions && this._positions[index] && this._positions[index].start
-    );
-  }
+      snapToItem(repositionTo, animated, false);
+    },
+    [data, loopClonesPerSide, shouldRepositionScroll],
+  );
 
-  _getItemLayout(_: any, index: number) {
-    const itemMainDimension = this._getItemMainDimension();
-    return {
+  const scrollTo = useCallback(
+    ({
+      offset,
       index,
-      length: itemMainDimension,
-      offset: itemMainDimension * index,
-    };
-  }
+      animated = true,
+    }: {
+      offset?: number;
+      index?: number;
+      animated?: boolean;
+    }) => {
+      const wrappedRef = getWrappedRef();
+      if (
+        !mountedRef.current ||
+        !wrappedRef ||
+        (typeof offset === 'undefined' && typeof index === 'undefined')
+      ) {
+        return;
+      }
 
-  _getKeyExtractor(_: any, index: any) {
-    return `flatlist-item-${index}`;
-  }
+      let scrollToOffset;
+      if (typeof index !== 'undefined') {
+        scrollToOffset = getItemScrollOffset(index);
+      } else {
+        scrollToOffset = offset;
+      }
 
-  _getScrollOffset(event: NativeSyntheticEvent<NativeScrollEvent>) {
-    return event.nativeEvent.contentOffset.x;
-  }
+      if (typeof scrollToOffset === 'undefined') {
+        return;
+      }
 
-  _getActiveSlideOffset() {
-    const { activeSlideOffset = 0 } = this.props;
-    const itemMainDimension = this._getItemMainDimension();
-    const minOffset = 10;
-    return itemMainDimension / 2 - activeSlideOffset >= minOffset
-      ? activeSlideOffset
-      : minOffset;
-  }
+      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();
+      }
 
-  _getActiveItem(offset: number) {
-    const itemMainDimension = this._getItemMainDimension();
-    const center = offset + itemMainDimension / 2;
-    const activeSlideOffset = this._getActiveSlideOffset();
-    const lastIndex = this._positions.length - 1;
-    let itemIndex;
+      onTouchStart && onTouchStart(event);
+    },
+    [getScrollEnabled, onTouchStart],
+  );
 
-    if (offset <= 0) {
-      return 0;
-    }
+  const handleTouchEnd = useCallback(
+    (event: any) => {
+      if (
+        getScrollEnabled() &&
+        autoplayRef.current &&
+        !autoplayingRef.current
+      ) {
+        startAutoplay();
+      }
 
-    if (
-      this._positions[lastIndex] &&
-      offset >= this._positions[lastIndex].start
-    ) {
-      return lastIndex;
-    }
+      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));
+      }
 
-    for (let i = 0; i < this._positions.length; i++) {
-      const { start, end } = this._positions[i];
       if (
-        center + activeSlideOffset >= start &&
-        center - activeSlideOffset <= end
+        (IS_IOS && scrollOffset >= lastItemScrollOffset) ||
+        (IS_ANDROID &&
+          Math.floor(scrollOffset) >= Math.floor(lastItemScrollOffset))
       ) {
-        itemIndex = i;
-        break;
+        activeItemRef.current = nextActiveItem;
+        repositionScroll(nextActiveItem);
       }
-    }
 
-    return itemIndex || 0;
-  }
+      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);
+        }
+      }
 
-  _initPositionsAndInterpolators(props = this.props) {
-    const { data } = props;
-    const itemMainDimension = this._getItemMainDimension();
+      onMomentumScrollEnd && onMomentumScrollEnd(event);
 
-    if (!data || !data.length) {
-      return;
-    }
+      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;
+      }
 
-    const interpolators: any[] = [];
-    this._positions = [];
+      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;
+      }
 
-    this._getCustomData(props).forEach((_itemData, index) => {
-      const _index = this._getCustomIndex(index, props);
-      let animatedValue;
+      if (!index || index < 0) {
+        index = 0;
+      } else if (itemsLength > 0 && index >= itemsLength) {
+        index = itemsLength - 1;
+      }
 
-      this._positions[index] = {
-        start: index * itemMainDimension,
-        end: index * itemMainDimension + itemMainDimension,
-      };
+      if (index === activeItemRef.current && !forceScrollTo) {
+        return;
+      }
 
-      if (!this._shouldAnimateSlides(props) || !this._scrollPos) {
-        animatedValue = new Animated.Value(1);
-      } else {
-        let interpolator = defaultScrollInterpolator(
-          _index,
-          this.state.itemWidth,
-        );
+      const offset = getItemScrollOffset(index);
 
-        animatedValue = this._scrollPos.interpolate({
-          ...interpolator,
-          extrapolate: 'clamp',
-        });
+      if (offset === undefined) {
+        return;
       }
 
-      interpolators.push(animatedValue);
-    });
+      scrollTo({ offset, animated });
 
-    this.setState({ interpolators });
-  }
+      const requiresManualTrigger = !animated || IS_ANDROID;
+      if (requiresManualTrigger) {
+        activeItemRef.current = index;
 
-  _repositionScroll(index: number, animated = false) {
-    const { data, loopClonesPerSide = 3 } = this.props;
-    const dataLength = data && data.length;
+        if (fireCallback) {
+          onSnapToItem && onSnapToItem(getDataIndex(index));
+        }
 
-    if (typeof index === 'undefined' || !this._shouldRepositionScroll(index)) {
+        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) {
       return;
     }
 
-    let repositionTo = index;
-
-    if (index >= dataLength + loopClonesPerSide) {
-      repositionTo = index - dataLength;
-    } else if (index < loopClonesPerSide) {
-      repositionTo = index + dataLength;
+    if (autoplayTimeoutRef.current) {
+      clearTimeout(autoplayTimeoutRef.current);
     }
+    autoplayTimeoutRef.current = setTimeout(() => {
+      autoplayingRef.current = true;
+      autoplayIntervalRef.current = setInterval(() => {
+        if (autoplayingRef.current) {
+          snapToNext();
+        }
+      }, autoplayInterval);
+    }, autoplayDelay);
+  }, [autoplayInterval, autoplayDelay]);
 
-    this._snapToItem(repositionTo, animated, false);
-  }
-
-  _onTouchStart(event: any) {
-    const { onTouchStart } = this.props;
-
-    if (this._getScrollEnabled() !== false && this._autoplaying) {
-      this.pauseAutoPlay();
+  const pauseAutoPlay = useCallback(() => {
+    autoplayingRef.current = false;
+    if (autoplayTimeoutRef.current) {
+      clearTimeout(autoplayTimeoutRef.current);
     }
-
-    onTouchStart && onTouchStart(event);
-  }
-
-  _onTouchEnd(event: GestureResponderEvent) {
-    const { onTouchEnd } = this.props;
-
-    if (
-      this._getScrollEnabled() !== false &&
-      this._autoplay &&
-      !this._autoplaying
-    ) {
-      this.startAutoplay();
+    if (enableAutoplayTimeoutRef.current) {
+      clearTimeout(enableAutoplayTimeoutRef.current);
+    }
+    if (autoplayIntervalRef.current) {
+      clearInterval(autoplayIntervalRef.current);
     }
+  }, []);
 
-    onTouchEnd && onTouchEnd(event);
-  }
+  const stopAutoplay = useCallback(() => {
+    autoplayRef.current = false;
+    pauseAutoPlay();
+  }, [pauseAutoPlay]);
+
+  const snapToItemPublic = useCallback(
+    (index: number, animated = true, fireCallback = true) => {
+      if (!index || index < 0) {
+        index = 0;
+      }
 
-  _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 positionIndex = getPositionIndex(index);
 
-    this._currentScrollOffset = scrollOffset;
+      if (positionIndex === activeItemRef.current) {
+        return;
+      }
 
-    if (nextActiveItem !== this._onScrollActiveItem) {
-      this._onScrollActiveItem = nextActiveItem;
-      onScrollIndexChanged &&
-        onScrollIndexChanged(this._getDataIndex(nextActiveItem));
+      snapToItem(positionIndex, animated, fireCallback);
+    },
+    [getPositionIndex, snapToItem],
+  );
 
-      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
-    }
+  const snapToNext = useCallback(
+    (animated = true, fireCallback = true) => {
+      const itemsLength = getCustomDataLength();
 
-    if (
-      (IS_IOS && scrollOffset > lastItemScrollOffset) ||
-      (IS_ANDROID &&
-        Math.floor(scrollOffset) > Math.floor(lastItemScrollOffset))
-    ) {
-      this._activeItem = nextActiveItem;
-      this._repositionScroll(nextActiveItem);
+      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 (typeof onScroll === 'function' && event) {
-      onScroll(event);
+    if (vertical && (!sliderHeight || !itemHeight)) {
+      console.error(
+        `${pluginName}: You need to specify both 'sliderHeight' and 'itemHeight' for vertical carousels`,
+      );
     }
-  }
-
-  _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);
+  }, [vertical, sliderWidth, itemWidth, sliderHeight, itemHeight]);
 
-    if (nextActiveItem !== this._activeItem) {
-      this._activeItem = nextActiveItem;
-      onSnapToItem && onSnapToItem(this._getDataIndex(nextActiveItem));
+  // 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 (hasSnapped && IS_ANDROID) {
-        this._repositionScroll(nextActiveItem);
-      } else if (IS_IOS) {
-        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);
     }
+    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;
+      }
 
-    onMomentumScrollEnd && onMomentumScrollEnd(event);
-
-    if (IS_ANDROID && this._autoplay && !this._autoplaying) {
-      if (this._enableAutoplayTimeout != null)
-        clearTimeout(this._enableAutoplayTimeout);
-      this._enableAutoplayTimeout = setTimeout(() => {
-        this.startAutoplay();
-      }, autoplayDelay);
-    }
-  }
+      const apparitionCallback = () => {
+        if (apparitionDelay) {
+          setHideCarousel(false);
+        }
+        if (autoplay) {
+          startAutoplay();
+        }
+      };
 
-  _onLayout(event: LayoutChangeEvent) {
-    const { onLayout, visibleItem = 1 } = this.props;
+      if (needsScrollView()) {
+        const _firstItem = getFirstItem(firstItem);
+        snapToItem(_firstItem, false, false, true);
+      }
 
-    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;
-    }
+      if (apparitionDelay) {
+        apparitionTimeoutRef.current = setTimeout(() => {
+          apparitionCallback();
+        }, apparitionDelay);
+      } else {
+        apparitionCallback();
+      }
+    }, 1);
 
-    this.setState({ containerWidth, itemWidth });
+    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);
+    };
+  }, []);
 
-    onLayout && onLayout(event);
-  }
+  // componentDidUpdate - handle scrollEnabled changes
+  useEffect(() => {
+    if (scrollEnabledProp !== scrollEnabledRef.current) {
+      setScrollEnabled(scrollEnabledProp);
+    }
+  }, [scrollEnabledProp, setScrollEnabled]);
 
-  _getPositionIndex(index: number) {
-    const { loop, loopClonesPerSide = 3 } = this.props;
-    return loop ? index + loopClonesPerSide : index;
-  }
+  // componentDidUpdate - handle data/size changes
+  useEffect(() => {
+    const itemsLength = getCustomDataLength();
 
-  _snapToItem(
-    index: number,
-    animated = true,
-    fireCallback = true,
-    forceScrollTo = false,
-  ) {
-    const { onSnapToItem } = this.props;
-    const itemsLength = this._getCustomDataLength();
-    const wrappedRef = this._getWrappedRef();
-    if (!itemsLength || !wrappedRef) {
+    if (!itemsLength) {
       return;
     }
 
-    if (!index || index < 0) {
-      index = 0;
-    } else if (itemsLength > 0 && index >= itemsLength) {
-      index = itemsLength - 1;
-    }
+    const nextFirstItem = getFirstItem(firstItem);
+    let nextActiveItem =
+      typeof activeItemRef.current !== 'undefined'
+        ? activeItemRef.current
+        : nextFirstItem;
 
-    if (index === this._activeItem && !forceScrollTo) {
-      return;
-    }
+    const hasNewSize =
+      (vertical &&
+        (previousItemsLengthRef.current !== itemsLength ||
+          previousItemsLengthRef.current === 0)) ||
+      (!vertical &&
+        (previousItemsLengthRef.current !== itemsLength ||
+          previousItemsLengthRef.current === 0));
 
-    this._carouselRef.scrollToIndex({
-      index,
-      animated: true,
-    });
+    if (nextActiveItem > itemsLength - 1) {
+      nextActiveItem = itemsLength - 1;
+    }
 
-    const requiresManualTrigger = !animated || IS_ANDROID;
-    if (requiresManualTrigger) {
-      this._activeItem = index;
+    if (interpolators.length !== itemsLength || hasNewSize) {
+      activeItemRef.current = nextActiveItem;
+      previousItemsLengthRef.current = itemsLength;
 
-      if (fireCallback) {
-        onSnapToItem && onSnapToItem(this._getDataIndex(index));
+      initPositionsAndInterpolators();
+      if (previousItemsLengthRef.current > itemsLength) {
+        hackActiveSlideAnimation(nextActiveItem);
       }
 
-      if (IS_ANDROID && this._shouldRepositionScroll(index)) {
-        if (animated) {
-          this._androidRepositioningTimeout = setTimeout(() => {
-            this._repositionScroll(index, false);
-          }, 400);
-        } else {
-          this._repositionScroll(index);
-        }
+      if (hasNewSize) {
+        snapToItem(nextActiveItem, false, false, true);
       }
+    } 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;
+      }
 
-  _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 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);
 
-    if (typeof animatedValue === 'undefined') {
-      return null;
-    }
+    const specificProps = !needsScrollView()
+      ? {
+          initialNumToRender,
+          maxToRenderPerBatch,
+          windowSize,
+        }
+      : {};
 
-    const animate = this._shouldAnimateSlides();
-    const Component = animate ? Animated.View : View;
-    const mainDimension = { width: itemWidth };
+    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),
+          },
+    ];
 
-    let spacingStyle: ViewStyle = this.props.loop
-      ? { marginLeft: Spacing.S }
+    const innerMarginStyle = vertical
+      ? {
+          paddingTop: getContainerInnerMargin(),
+          paddingBottom: getContainerInnerMargin(true),
+        }
       : {
-          marginLeft: index === 0 ? Spacing.M : 0,
-          marginRight:
-            index === this._getCustomDataLength() - 1 ? Spacing.M : Spacing.S,
+          paddingLeft: getContainerInnerMargin(),
+          paddingRight: getContainerInnerMargin(true),
         };
 
-    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>
-    );
-  }
-
-  startAutoplay() {
-    const { autoplayInterval, autoplayDelay } = this.props;
-    this._autoplay = true;
-
-    if (this._autoplaying) {
-      return;
-    }
+    const contentContainerStyle = [
+      !useExperimentalSnap ? innerMarginStyle : {},
+      contentContainerCustomStyle || {},
+    ];
 
-    if (this._autoplayTimeout != null) clearTimeout(this._autoplayTimeout);
-    this._autoplayTimeout = setTimeout(() => {
-      this._autoplaying = true;
-      this._autoplayInterval = setInterval(() => {
-        if (this._autoplaying) {
-          this.snapToNext();
+    const snapProps = useExperimentalSnap
+      ? {
+          disableIntervalMomentum,
+          snapToAlignment: activeSlideAlignment,
+          snapToInterval: snapToInterval || getItemMainDimension(),
         }
-      }, autoplayInterval);
-    }, autoplayDelay);
-  }
-
-  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);
-  }
-
-  stopAutoplay() {
-    this._autoplay = false;
-    this.pauseAutoPlay();
-  }
-
-  snapToItem(index: number, animated = true, fireCallback = true) {
-    if (!index || index < 0) {
-      index = 0;
-    }
-
-    const positionIndex = this._getPositionIndex(index);
+      : {
+          snapToOffsets: getSnapOffsets(),
+        };
 
-    if (positionIndex === this._activeItem) {
-      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
+        }
+      : {};
 
-    this._snapToItem(positionIndex, animated, fireCallback);
+    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;
   }
 
-  snapToNext(animated = true, fireCallback = true) {
-    const itemsLength = this._getCustomDataLength();
+  const overridableProps = getComponentOverridableProps();
+  const staticProps = getComponentStaticProps();
 
-    let newIndex = this._activeItem + 1;
-    if (newIndex > itemsLength - 1) {
-      newIndex = 0;
-    }
-    this._snapToItem(newIndex, animated, fireCallback);
-  }
+  // Filter out props that should not be passed to FlatList/ScrollView
+  const { renderItem: _, ...propsWithoutRenderItem } = props;
 
-  snapToPrev(animated = true, fireCallback = true) {
-    const itemsLength = this._getCustomDataLength();
+  const componentProps: any = {
+    ...overridableProps,
+    ...propsWithoutRenderItem,
+    ...staticProps,
+  };
 
-    let newIndex = this._activeItem - 1;
-    if (newIndex < 0) {
-      newIndex = itemsLength - 1;
-    }
-    this._snapToItem(newIndex, animated, fireCallback);
-  }
+  const ScrollViewComponent =
+    typeof useScrollView === 'function' ? useScrollView : Animated.ScrollView;
 
-  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 needsScrollView() || !Animated.FlatList ? (
+    <ScrollViewComponent {...componentProps}>
+      {getCustomData().map((item: any, index: number) => {
+        return renderItemComponent({
+          item,
+          index,
+        });
+      })}
+    </ScrollViewComponent>
+  ) : (
+    <Animated.FlatList {...componentProps} />
+  );
+});
 
-    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}
-      />
-    );
-  }
-}
+Carousel.displayName = 'Carousel';
 
 export { Carousel };
-export type { CarouselProps, CarouselRef };
+export type { CarouselRef, CarouselProps };