react-native-reanimated-carousel 3.3.1 → 3.3.2

package/package.json

@@ -1,13 +1,14 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "3.3.1",
+    "version": "3.3.2",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "react-native": "src/index.tsx",
     "types": "lib/typescript/index.d.ts",
     "source": "src/index",
     "files": [
-        "lib"
+        "lib",
+        "src"
     ],
     "scripts": {
         "gif": "node scripts/makegif.js ./scripts/gif-works-directory",

package/src/Carousel.tsx

@@ -0,0 +1,247 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React from "react";
+import { StyleSheet } from "react-native";
+import { runOnJS, useDerivedValue } from "react-native-reanimated";
+
+import { useAutoPlay } from "./hooks/useAutoPlay";
+import { useCarouselController } from "./hooks/useCarouselController";
+import { useCommonVariables } from "./hooks/useCommonVariables";
+import { useInitProps } from "./hooks/useInitProps";
+import { useLayoutConfig } from "./hooks/useLayoutConfig";
+import { useOnProgressChange } from "./hooks/useOnProgressChange";
+import { usePropsErrorBoundary } from "./hooks/usePropsErrorBoundary";
+import { useVisibleRanges } from "./hooks/useVisibleRanges";
+import { BaseLayout } from "./layouts/BaseLayout";
+import { ScrollViewGesture } from "./ScrollViewGesture";
+import { CTX } from "./store";
+import type { ICarouselInstance, TCarouselProps } from "./types";
+import { computedRealIndexWithAutoFillData } from "./utils/computedWithAutoFillData";
+
+const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
+  (_props, ref) => {
+    const props = useInitProps(_props);
+
+    const {
+      testID,
+      loop,
+      autoFillData,
+      // Fill data with autoFillData
+      data,
+      // Length of fill data
+      dataLength,
+      // Raw data that has not been processed
+      rawData,
+      // Length of raw data
+      rawDataLength,
+      mode,
+      style,
+      width,
+      height,
+      vertical,
+      autoPlay,
+      windowSize,
+      autoPlayReverse,
+      autoPlayInterval,
+      scrollAnimationDuration,
+      withAnimation,
+      renderItem,
+      onScrollEnd,
+      onSnapToItem,
+      onScrollBegin,
+      onProgressChange,
+      customAnimation,
+      defaultIndex,
+    } = props;
+
+    const commonVariables = useCommonVariables(props);
+    const { size, handlerOffset } = commonVariables;
+
+    const offsetX = useDerivedValue(() => {
+      const totalSize = size * dataLength;
+      const x = handlerOffset.value % totalSize;
+
+      if (!loop)
+        return handlerOffset.value;
+
+      return isNaN(x) ? 0 : x;
+    }, [loop, size, dataLength]);
+
+    usePropsErrorBoundary({ ...props, dataLength });
+    useOnProgressChange({
+      autoFillData,
+      loop,
+      size,
+      offsetX,
+      rawDataLength,
+      onProgressChange,
+    });
+
+    const carouselController = useCarouselController({
+      loop,
+      size,
+      dataLength,
+      autoFillData,
+      handlerOffset,
+      withAnimation,
+      defaultIndex,
+      onScrollEnd: () => runOnJS(_onScrollEnd)(),
+      onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
+      duration: scrollAnimationDuration,
+    });
+
+    const { next, prev, scrollTo, getSharedIndex, getCurrentIndex }
+            = carouselController;
+
+    const { start: startAutoPlay, pause: pauseAutoPlay } = useAutoPlay({
+      autoPlay,
+      autoPlayInterval,
+      autoPlayReverse,
+      carouselController,
+    });
+
+    const _onScrollEnd = React.useCallback(() => {
+      const _sharedIndex = Math.round(getSharedIndex());
+
+      const realIndex = computedRealIndexWithAutoFillData({
+        index: _sharedIndex,
+        dataLength: rawDataLength,
+        loop,
+        autoFillData,
+      });
+
+      if (onSnapToItem)
+        onSnapToItem(realIndex);
+
+      if (onScrollEnd)
+        onScrollEnd(realIndex);
+    }, [
+      loop,
+      autoFillData,
+      rawDataLength,
+      getSharedIndex,
+      onSnapToItem,
+      onScrollEnd,
+    ]);
+
+    const scrollViewGestureOnScrollBegin = React.useCallback(() => {
+      pauseAutoPlay();
+      onScrollBegin?.();
+    }, [onScrollBegin, pauseAutoPlay]);
+
+    const scrollViewGestureOnScrollEnd = React.useCallback(() => {
+      startAutoPlay();
+      _onScrollEnd();
+    }, [_onScrollEnd, startAutoPlay]);
+
+    const scrollViewGestureOnTouchBegin = React.useCallback(pauseAutoPlay, [
+      pauseAutoPlay,
+    ]);
+
+    const scrollViewGestureOnTouchEnd = React.useCallback(startAutoPlay, [
+      startAutoPlay,
+    ]);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        prev,
+        getCurrentIndex,
+        scrollTo,
+      }),
+      [getCurrentIndex, next, prev, scrollTo],
+    );
+
+    const visibleRanges = useVisibleRanges({
+      total: dataLength,
+      viewSize: size,
+      translation: handlerOffset,
+      windowSize,
+    });
+
+    const layoutConfig = useLayoutConfig({ ...props, size });
+
+    const renderLayout = React.useCallback(
+      (item: any, i: number) => {
+        const realIndex = computedRealIndexWithAutoFillData({
+          index: i,
+          dataLength: rawDataLength,
+          loop,
+          autoFillData,
+        });
+
+        return (
+          <BaseLayout
+            key={i}
+            index={i}
+            handlerOffset={offsetX}
+            visibleRanges={visibleRanges}
+            animationStyle={customAnimation || layoutConfig}
+          >
+            {({ animationValue }) =>
+              renderItem({
+                item,
+                index: realIndex,
+                animationValue,
+              })
+            }
+          </BaseLayout>
+        );
+      },
+      [
+        loop,
+        rawData,
+        offsetX,
+        visibleRanges,
+        autoFillData,
+        renderItem,
+        layoutConfig,
+        customAnimation,
+      ],
+    );
+
+    return (
+      <CTX.Provider value={{ props, common: commonVariables }}>
+        <ScrollViewGesture
+          key={mode}
+          size={size}
+          translation={handlerOffset}
+          style={[
+            styles.container,
+            {
+              width: width || "100%",
+              height: height || "100%",
+            },
+            style,
+            vertical
+              ? styles.itemsVertical
+              : styles.itemsHorizontal,
+          ]}
+          testID={testID}
+          onScrollBegin={scrollViewGestureOnScrollBegin}
+          onScrollEnd={scrollViewGestureOnScrollEnd}
+          onTouchBegin={scrollViewGestureOnTouchBegin}
+          onTouchEnd={scrollViewGestureOnTouchEnd}
+        >
+          {data.map(renderLayout)}
+        </ScrollViewGesture>
+      </CTX.Provider>
+    );
+  },
+);
+
+export default Carousel as <T extends any>(
+  props: React.PropsWithChildren<TCarouselProps<T>>
+) => React.ReactElement;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+  },
+  itemsHorizontal: {
+    flexDirection: "row",
+  },
+  itemsVertical: {
+    flexDirection: "column",
+  },
+});

package/src/LazyView.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+interface Props {
+  shouldUpdate: boolean
+}
+
+export const LazyView: React.FC<Props> = (props) => {
+  const { shouldUpdate, children } = props;
+
+  if (!shouldUpdate)
+    return <></>;
+
+  return <>{children}</>;
+};

package/src/ScrollViewGesture.tsx

@@ -0,0 +1,328 @@
+import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { PanGestureHandlerGestureEvent } from "react-native-gesture-handler";
+import {
+  PanGestureHandler,
+} from "react-native-gesture-handler";
+import Animated, {
+  cancelAnimation,
+  measure,
+  runOnJS,
+  useAnimatedGestureHandler,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useDerivedValue,
+  useSharedValue,
+  withDecay,
+} from "react-native-reanimated";
+
+import { Easing } from "./constants";
+import { CTX } from "./store";
+import type { WithTimingAnimation } from "./types";
+import { dealWithAnimation } from "./utils/dealWithAnimation";
+
+interface GestureContext extends Record<string, unknown> {
+  validStart: boolean
+  panOffset: number
+  max: number
+}
+
+interface Props {
+  size: number
+  infinite?: boolean
+  testID?: string
+  style?: StyleProp<ViewStyle>
+  onScrollBegin?: () => void
+  onScrollEnd?: () => void
+  onTouchBegin?: () => void
+  onTouchEnd?: () => void
+  translation: Animated.SharedValue<number>
+}
+
+const IScrollViewGesture: React.FC<Props> = (props) => {
+  const {
+    props: {
+      vertical,
+      pagingEnabled,
+      snapEnabled,
+      panGestureHandlerProps,
+      loop: infinite,
+      scrollAnimationDuration,
+      withAnimation,
+      enabled,
+      dataLength,
+      overscrollEnabled,
+    },
+  } = React.useContext(CTX);
+
+  const {
+    size,
+    translation,
+    testID,
+    style = {},
+    onScrollBegin,
+    onScrollEnd,
+    onTouchBegin,
+    onTouchEnd,
+  } = props;
+
+  const maxPage = dataLength;
+  const isHorizontal = useDerivedValue(() => !vertical, [vertical]);
+  const touching = useSharedValue(false);
+  const scrollEndTranslation = useSharedValue(0);
+  const scrollEndVelocity = useSharedValue(0);
+  const containerRef = useAnimatedRef<Animated.View>();
+
+  // Get the limit of the scroll.
+  const getLimit = React.useCallback(() => {
+    "worklet";
+
+    if (!infinite && !overscrollEnabled) {
+      const { width: containerWidth = 0 } = measure(containerRef);
+
+      // If the item's total width is less than the container's width, then there is no need to scroll.
+      if (dataLength * size < containerWidth)
+        return 0;
+
+      // Disable the "overscroll" effect
+      return dataLength * size - containerWidth;
+    }
+
+    return dataLength * size;
+  }, [infinite, size, dataLength, overscrollEnabled]);
+
+  const withSpring = React.useCallback(
+    (toValue: number, onFinished?: () => void) => {
+      "worklet";
+      const defaultWithAnimation: WithTimingAnimation = {
+        type: "timing",
+        config: {
+          duration: scrollAnimationDuration + 100,
+          easing: Easing.easeOutQuart,
+        },
+      };
+
+      return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
+        toValue,
+        (isFinished: boolean) => {
+          "worklet";
+          if (isFinished)
+            onFinished && runOnJS(onFinished)();
+        },
+      );
+    },
+    [scrollAnimationDuration, withAnimation],
+  );
+
+  const endWithSpring = React.useCallback(
+    (onFinished?: () => void) => {
+      "worklet";
+      const origin = translation.value;
+      const velocity = scrollEndVelocity.value;
+      // Default to scroll in the direction of the slide (with deceleration)
+      let finalTranslation: number = withDecay({ velocity, deceleration: 0.999 });
+
+      /**
+       * The page size is the same as the item size.
+       * If direction is vertical, the page size is the height of the item.
+       * If direction is horizontal, the page size is the width of the item.
+       *
+       * `page size` equals to `size` variable.
+       * */
+      if (pagingEnabled) {
+        // distance with direction
+        const offset = -(scrollEndTranslation.value >= 0 ? 1 : -1); // 1 or -1
+        const computed = offset < 0 ? Math.ceil : Math.floor;
+        const page = computed(-translation.value / size);
+
+        if (infinite) {
+          const finalPage = page + offset;
+          finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
+        }
+        else {
+          const finalPage = Math.min(maxPage - 1, Math.max(0, page + offset));
+          finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
+        }
+      }
+
+      if (!pagingEnabled && snapEnabled) {
+        // scroll to the nearest item
+        const nextPage = Math.round((origin + velocity * 0.4) / size) * size;
+        finalTranslation = withSpring(withProcessTranslation(nextPage), onFinished);
+      }
+
+      translation.value = finalTranslation;
+
+      function withProcessTranslation(translation: number) {
+        if (!infinite && !overscrollEnabled) {
+          const limit = getLimit();
+          const sign = Math.sign(translation);
+          return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
+        }
+
+        return translation;
+      }
+    },
+    [
+      translation,
+      scrollEndVelocity.value,
+      pagingEnabled,
+      size,
+      scrollEndTranslation.value,
+      infinite,
+      withSpring,
+      snapEnabled,
+      maxPage,
+    ],
+  );
+
+  const onFinish = React.useCallback(
+    (isFinished: boolean) => {
+      "worklet";
+      if (isFinished) {
+        touching.value = false;
+        onScrollEnd && runOnJS(onScrollEnd)();
+      }
+    },
+    [onScrollEnd, touching],
+  );
+
+  const activeDecay = React.useCallback(() => {
+    "worklet";
+    touching.value = true;
+    translation.value = withDecay(
+      { velocity: scrollEndVelocity.value },
+      isFinished => onFinish(isFinished as boolean),
+    );
+  }, [onFinish, scrollEndVelocity.value, touching, translation]);
+
+  const resetBoundary = React.useCallback(() => {
+    "worklet";
+    if (touching.value)
+      return;
+
+    if (translation.value > 0) {
+      if (scrollEndTranslation.value < 0) {
+        activeDecay();
+        return;
+      }
+      if (!infinite) {
+        translation.value = withSpring(0);
+        return;
+      }
+    }
+
+    if (translation.value < -((maxPage - 1) * size)) {
+      if (scrollEndTranslation.value > 0) {
+        activeDecay();
+        return;
+      }
+      if (!infinite)
+        translation.value = withSpring(-((maxPage - 1) * size));
+    }
+  }, [
+    touching.value,
+    translation,
+    maxPage,
+    size,
+    scrollEndTranslation.value,
+    infinite,
+    activeDecay,
+    withSpring,
+  ]);
+
+  useAnimatedReaction(
+    () => translation.value,
+    () => {
+      if (!pagingEnabled)
+        resetBoundary();
+    },
+    [pagingEnabled, resetBoundary],
+  );
+
+  const panGestureEventHandler = useAnimatedGestureHandler<
+  PanGestureHandlerGestureEvent,
+  GestureContext
+  >(
+    {
+      onStart: (_, ctx) => {
+        touching.value = true;
+        ctx.validStart = true;
+        onScrollBegin && runOnJS(onScrollBegin)();
+
+        ctx.max = (maxPage - 1) * size;
+        if (!infinite && !overscrollEnabled)
+          ctx.max = getLimit();
+
+        ctx.panOffset = translation.value;
+      },
+      onActive: (e, ctx) => {
+        if (ctx.validStart) {
+          ctx.validStart = false;
+          cancelAnimation(translation);
+        }
+        touching.value = true;
+        const { translationX, translationY } = e;
+        const panTranslation = isHorizontal.value
+          ? translationX
+          : translationY;
+        if (!infinite) {
+          if ((translation.value > 0 || translation.value < -ctx.max)) {
+            const boundary = translation.value > 0 ? 0 : -ctx.max;
+            const fixed = boundary - ctx.panOffset;
+            const dynamic = panTranslation - fixed;
+            translation.value = boundary + dynamic * 0.5;
+            return;
+          }
+        }
+
+        const translationValue = ctx.panOffset + panTranslation;
+        translation.value = translationValue;
+      },
+      onEnd: (e) => {
+        const { velocityX, velocityY, translationX, translationY } = e;
+        scrollEndVelocity.value = isHorizontal.value
+          ? velocityX
+          : velocityY;
+        scrollEndTranslation.value = isHorizontal.value
+          ? translationX
+          : translationY;
+
+        endWithSpring(onScrollEnd);
+
+        if (!infinite)
+          touching.value = false;
+      },
+    },
+    [
+      pagingEnabled,
+      isHorizontal.value,
+      infinite,
+      maxPage,
+      size,
+      snapEnabled,
+      onScrollBegin,
+      onScrollEnd,
+    ],
+  );
+
+  return (
+    <PanGestureHandler
+      {...panGestureHandlerProps}
+      enabled={enabled}
+      onGestureEvent={panGestureEventHandler}
+    >
+      <Animated.View
+        ref={containerRef}
+        testID={testID}
+        style={style}
+        onTouchStart={onTouchBegin}
+        onTouchEnd={onTouchEnd}
+      >
+        {props.children}
+      </Animated.View>
+    </PanGestureHandler>
+  );
+};
+
+export const ScrollViewGesture = IScrollViewGesture;

package/src/constants/index.ts

@@ -0,0 +1,16 @@
+import type Animated from "react-native-reanimated";
+import { Easing as _Easing } from "react-native-reanimated";
+
+export enum DATA_LENGTH {
+  SINGLE_ITEM = 1,
+  DOUBLE_ITEM = 2,
+}
+
+export const Easing = {
+  easeOutQuart: _Easing.bezier(
+    0.25,
+    1,
+    0.5,
+    1,
+  ) as unknown as Animated.EasingFunction,
+};

package/src/hooks/computeNewIndexWhenDataChanges.ts

@@ -0,0 +1,51 @@
+export function omitZero(a: number, b: number) {
+  "worklet";
+  if (a === 0)
+    return 0;
+
+  return b;
+}
+
+export function computeNewIndexWhenDataChanges(params: {
+  direction: number
+  handlerOffset: number
+  size: number
+  previousLength: number
+  currentLength: number
+}) {
+  "worklet";
+  const { direction, handlerOffset: _handlerOffset, size, previousLength, currentLength } = params;
+
+  let handlerOffset = _handlerOffset;
+  let positionIndex;
+  let round;
+
+  const isPositive = direction < 0;
+
+  if (isPositive) {
+    positionIndex = (Math.abs(handlerOffset)) / size;
+    round = parseInt(String(omitZero(previousLength, positionIndex / previousLength)));
+  }
+  else {
+    positionIndex = (Math.abs(handlerOffset) - size) / size;
+    round = parseInt(String(omitZero(previousLength, positionIndex / previousLength))) + 1;
+  }
+
+  const prevOffset = omitZero(previousLength, positionIndex % previousLength);
+  const prevIndex = isPositive ? prevOffset : previousLength - prevOffset - 1;
+  const changedLength = round * (currentLength - previousLength);
+  const changedOffset = changedLength * size;
+  if (prevIndex > currentLength - 1 && currentLength < previousLength) {
+    if (isPositive)
+      handlerOffset = (currentLength - 1) * size * direction;
+
+    else
+      handlerOffset = (currentLength - 1) * size * -1;
+  }
+  else {
+    handlerOffset += changedOffset * direction;
+  }
+
+  return handlerOffset;
+}
+