react-native-reanimated-carousel 4.0.0-alpha.1 → 4.0.0-alpha.11

package/src/components/ItemRenderer.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import type { FC } from "react";
+import type { ViewStyle } from "react-native";
+import type Animated from "react-native-reanimated";
+import { useAnimatedReaction, type AnimatedStyleProp, runOnJS } from "react-native-reanimated";
+
+import type { TAnimationStyle } from "./BaseLayout";
+import { BaseLayout } from "./BaseLayout";
+
+import type { VisibleRanges } from "../hooks/useVisibleRanges";
+import { useVisibleRanges } from "../hooks/useVisibleRanges";
+import type { CarouselRenderItem } from "../types";
+import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+
+interface Props {
+  data: any[]
+  dataLength: number
+  rawDataLength: number
+  loop: boolean
+  size: number
+  windowSize?: number
+  autoFillData: boolean
+  offsetX: Animated.SharedValue<number>
+  handlerOffset: Animated.SharedValue<number>
+  layoutConfig: TAnimationStyle
+  renderItem: CarouselRenderItem<any>
+  customAnimation?: ((value: number) => AnimatedStyleProp<ViewStyle>)
+}
+
+export const ItemRenderer: FC<Props> = (props) => {
+  const {
+    data,
+    size,
+    windowSize,
+    handlerOffset,
+    offsetX,
+    dataLength,
+    rawDataLength,
+    loop,
+    autoFillData,
+    layoutConfig,
+    renderItem,
+    customAnimation,
+  } = props;
+
+  const visibleRanges = useVisibleRanges({
+    total: dataLength,
+    viewSize: size,
+    translation: handlerOffset,
+    windowSize,
+    loop,
+  });
+
+  const [displayedItems, setDisplayedItems] = React.useState<VisibleRanges>(null!);
+
+  useAnimatedReaction(
+    () => visibleRanges.value,
+    ranges => runOnJS(setDisplayedItems)(ranges),
+    [visibleRanges],
+  );
+
+  if (!displayedItems)
+    return null;
+
+  return (
+    <>
+      {
+        data.map((item, index) => {
+          const realIndex = computedRealIndexWithAutoFillData({
+            index,
+            dataLength: rawDataLength,
+            loop,
+            autoFillData,
+          });
+
+          const { negativeRange, positiveRange } = displayedItems;
+
+          const shouldRender = (index >= negativeRange[0] && index <= negativeRange[1])
+          || (index >= positiveRange[0] && index <= positiveRange[1]);
+
+          if (!shouldRender)
+            return null;
+
+          return (
+            <BaseLayout
+              key={index}
+              index={index}
+              handlerOffset={offsetX}
+              visibleRanges={visibleRanges}
+              animationStyle={customAnimation || layoutConfig}
+            >
+              {({ animationValue }) =>
+                renderItem({
+                  item,
+                  index: realIndex,
+                  animationValue,
+                })
+              }
+            </BaseLayout>
+          );
+        })
+      }
+    </>
+  );
+};

package/src/components/Pagination/Basic/PaginationItem.tsx

@@ -0,0 +1,111 @@
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type { ViewStyle } from "react-native";
+import { View } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+export type DotStyle = Omit<ViewStyle, "width" | "height"> & {
+  width?: number
+  height?: number
+};
+
+export const PaginationItem: React.FC<
+PropsWithChildren<{
+  index: number
+  count: number
+  size?: number
+  animValue: Animated.SharedValue<number>
+  horizontal?: boolean
+  dotStyle?: DotStyle
+  activeDotStyle?: DotStyle
+}>
+> = (props) => {
+  const {
+    animValue,
+    dotStyle,
+    activeDotStyle,
+    index,
+    count,
+    size,
+    horizontal,
+    children,
+  } = props;
+
+  const defaultDotSize = 10;
+
+  const sizes = {
+    width: size || dotStyle?.width || defaultDotSize,
+    height: size || dotStyle?.height || defaultDotSize,
+  };
+
+  /**
+   * TODO: Keep this for future implementation
+   * Used to change the size of the active dot with animation
+   */
+  // const animatedSize = {
+  //   width: activeDotStyle?.width,
+  //   height: activeDotStyle?.height,
+  // };
+
+  const width = sizes.width;
+  const height = sizes.height;
+
+  const animStyle = useAnimatedStyle(() => {
+    const size = horizontal ? height : width;
+    let inputRange = [index - 1, index, index + 1];
+    let outputRange = [-size, 0, size];
+
+    if (index === 0 && animValue?.value > count - 1) {
+      inputRange = [count - 1, count, count + 1];
+      outputRange = [-size, 0, size];
+    }
+
+    return {
+      transform: [
+        {
+          translateX: interpolate(
+            animValue?.value,
+            inputRange,
+            outputRange,
+            Extrapolate.CLAMP,
+          ),
+        },
+      ],
+    };
+  }, [animValue, index, count, horizontal]);
+
+  return (
+    <View
+      style={[
+        {
+          width,
+          height,
+          overflow: "hidden",
+          transform: [
+            {
+              rotateZ: horizontal ? "90deg" : "0deg",
+            },
+          ],
+        },
+        dotStyle,
+      ]}
+    >
+      <Animated.View
+        style={[
+          {
+            backgroundColor: "black",
+            flex: 1,
+          },
+          animStyle,
+          activeDotStyle,
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
+  );
+};

package/src/components/Pagination/Basic/index.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import { View } from "react-native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import type { SharedValue } from "react-native-reanimated";
+
+import type { DotStyle } from "./PaginationItem";
+import { PaginationItem } from "./PaginationItem";
+
+export interface BasicProps<T extends {} = {}> {
+  progress: SharedValue<number>
+  horizontal?: boolean
+  data: Array<T>
+  renderItem?: (item: T, index: number) => React.ReactNode
+  containerStyle?: StyleProp<ViewStyle>
+  dotStyle?: DotStyle
+  activeDotStyle?: DotStyle
+  size?: number
+  onPress?: (index: number) => void
+}
+
+export const Basic = <T extends {}>(props: BasicProps<T>) => {
+  const {
+    activeDotStyle,
+    dotStyle,
+    progress,
+    horizontal = true,
+    data,
+    size,
+    containerStyle,
+    renderItem,
+    onPress,
+  } = props;
+
+  if (
+    typeof size === "string" ||
+    typeof dotStyle?.width === "string" ||
+    typeof dotStyle?.height === "string"
+  )
+    throw new Error("size/width/height must be a number");
+
+  return (
+    <View
+      style={[
+        {
+          justifyContent: "space-between",
+          alignSelf: "center",
+        },
+        horizontal
+          ? {
+            flexDirection: "row",
+          }
+          : {
+            flexDirection: "column",
+          },
+        containerStyle,
+      ]}
+    >
+      {data.map((item, index) => {
+        return (
+          <TouchableWithoutFeedback
+            key={index}
+            onPress={() => onPress?.(index)}
+          >
+            <PaginationItem
+              index={index}
+              size={size}
+              count={data.length}
+              dotStyle={dotStyle}
+              animValue={progress}
+              horizontal={!horizontal}
+              activeDotStyle={activeDotStyle}
+            >
+              {renderItem?.(item, index)}
+            </PaginationItem>
+          </TouchableWithoutFeedback>
+        );
+      })}
+    </View>
+  );
+};

package/src/components/Pagination/index.tsx

@@ -0,0 +1,5 @@
+import { Basic } from "./Basic";
+
+export const Pagination = {
+  Basic,
+};

package/src/components/ScrollViewGesture.tsx

@@ -1,11 +1,8 @@
 import type { PropsWithChildren } from "react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { GestureStateChangeEvent, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
-import {
-  Gesture,
-  GestureDetector,
-} from "react-native-gesture-handler";
+import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   cancelAnimation,
   measure,
@@ -18,7 +15,7 @@ import Animated, {
 } from "react-native-reanimated";
 
 import { Easing } from "../constants";
-import { useUpdateGestureConfig } from "../hooks/useUpdateGestureConfig";
+import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
 import { CTX } from "../store";
 import type { WithTimingAnimation } from "../types";
 import { dealWithAnimation } from "../utils/deal-with-animation";
@@ -28,7 +25,7 @@ interface Props {
   infinite?: boolean
   testID?: string
   style?: StyleProp<ViewStyle>
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   onScrollEnd?: () => void
   onTouchBegin?: () => void
   onTouchEnd?: () => void
@@ -42,13 +39,15 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       vertical,
       pagingEnabled,
       snapEnabled,
-      loop: infinite,
+      loop,
       scrollAnimationDuration,
       withAnimation,
       enabled,
       dataLength,
       overscrollEnabled,
       maxScrollDistancePerSwipe,
+      minScrollDistancePerSwipe,
+      fixedDirection,
     },
   } = React.useContext(CTX);
 
@@ -57,7 +56,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     translation,
     testID,
     style = {},
-    onScrollBegin,
+    onScrollStart,
     onScrollEnd,
     onTouchBegin,
     onTouchEnd,
@@ -73,12 +72,13 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const scrollEndVelocity = useSharedValue(0);
   const containerRef = useAnimatedRef<Animated.View>();
   const maxScrollDistancePerSwipeIsSet = typeof maxScrollDistancePerSwipe === "number";
+  const minScrollDistancePerSwipeIsSet = typeof minScrollDistancePerSwipe === "number";
 
   // Get the limit of the scroll.
   const getLimit = React.useCallback(() => {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !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.
@@ -90,7 +90,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     }
 
     return dataLength * size;
-  }, [infinite, size, dataLength, overscrollEnabled]);
+  }, [loop, size, dataLength, overscrollEnabled]);
 
   const withSpring = React.useCallback(
     (toValue: number, onFinished?: () => void) => {
@@ -141,7 +141,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
           const computed = offset < 0 ? Math.ceil : Math.floor;
           const page = computed(-translation.value / size);
 
-          if (infinite) {
+          if (loop) {
             const finalPage = page + offset;
             finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
           }
@@ -161,7 +161,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       translation.value = finalTranslation;
 
       function withProcessTranslation(translation: number) {
-        if (!infinite && !overscrollEnabled) {
+        if (!loop && !overscrollEnabled) {
           const limit = getLimit();
           const sign = Math.sign(translation);
           return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -174,7 +174,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       withSpring,
       size,
       maxPage,
-      infinite,
+      loop,
       snapEnabled,
       translation,
       pagingEnabled,
@@ -215,7 +215,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite) {
+      if (!loop) {
         translation.value = withSpring(0);
         return;
       }
@@ -226,7 +226,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite)
+      if (!loop)
         translation.value = withSpring(-((maxPage - 1) * size));
     }
   }, [
@@ -235,7 +235,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     maxPage,
     size,
     scrollEndTranslation.value,
-    infinite,
+    loop,
     activeDecay,
     withSpring,
   ]);
@@ -252,7 +252,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   function withProcessTranslation(translation: number) {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const limit = getLimit();
       const sign = Math.sign(translation);
       return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -261,15 +261,15 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     return translation;
   }
 
-  const onGestureBegin = useCallback(() => {
+  const onGestureStart = useCallback((_: PanGestureHandlerEventPayload) => {
     "worklet";
 
     touching.value = true;
     validStart.value = true;
-    onScrollBegin && runOnJS(onScrollBegin)();
+    onScrollStart && runOnJS(onScrollStart)();
 
     max.value = (maxPage - 1) * size;
-    if (!infinite && !overscrollEnabled)
+    if (!loop && !overscrollEnabled)
       max.value = getLimit();
 
     panOffset.value = translation.value;
@@ -277,14 +277,14 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     max,
     size,
     maxPage,
-    infinite,
+    loop,
     touching,
     panOffset,
     validStart,
     translation,
     overscrollEnabled,
     getLimit,
-    onScrollBegin,
+    onScrollStart,
   ]);
 
   const onGestureUpdate = useCallback((e: PanGestureHandlerEventPayload) => {
@@ -296,10 +296,18 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     }
     touching.value = true;
     const { translationX, translationY } = e;
-    const panTranslation = isHorizontal.value
+
+    let panTranslation = isHorizontal.value
       ? translationX
       : translationY;
-    if (!infinite) {
+
+    if (fixedDirection === "negative")
+      panTranslation = -Math.abs(panTranslation);
+
+    else if (fixedDirection === "positive")
+      panTranslation = +Math.abs(panTranslation);
+
+    if (!loop) {
       if ((translation.value > 0 || translation.value < -max.value)) {
         const boundary = translation.value > 0 ? 0 : -max.value;
         const fixed = boundary - panOffset.value;
@@ -315,71 +323,88 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     isHorizontal,
     max,
     panOffset,
-    infinite,
+    loop,
     overscrollEnabled,
+    fixedDirection,
     translation,
     validStart,
     touching,
   ]);
 
-  const onGestureFinish = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+  const onGestureEnd = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>, _success: boolean) => {
     "worklet";
 
     const { velocityX, velocityY, translationX, translationY } = e;
     scrollEndVelocity.value = isHorizontal.value
       ? velocityX
       : velocityY;
-    scrollEndTranslation.value = isHorizontal.value
+
+    let panTranslation = isHorizontal.value
       ? translationX
       : translationY;
 
+    if (fixedDirection === "negative")
+      panTranslation = -Math.abs(panTranslation);
+
+    else if (fixedDirection === "positive")
+      panTranslation = +Math.abs(panTranslation);
+
+    scrollEndTranslation.value = panTranslation;
+
     const totalTranslation = scrollEndVelocity.value + scrollEndTranslation.value;
 
-    if (maxScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) > maxScrollDistancePerSwipe) {
+    /**
+     * If the maximum scroll distance is set and the translation `exceeds the maximum scroll distance`,
+     * the carousel will keep the view at the current position.
+    */
+    if (
+      maxScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) > maxScrollDistancePerSwipe
+    ) {
       const nextPage = Math.round((panOffset.value + maxScrollDistancePerSwipe * Math.sign(totalTranslation)) / size) * size;
       translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
     }
+    /**
+     * If the minimum scroll distance is set and the translation `didn't exceeds the minimum scroll distance`,
+     * the carousel will keep the view at the current position.
+    */
+    else if (
+      minScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) < minScrollDistancePerSwipe
+    ) {
+      const nextPage = Math.round((panOffset.value + minScrollDistancePerSwipe * Math.sign(totalTranslation)) / size) * size;
+      translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
+    }
     else {
       endWithSpring(onScrollEnd);
     }
 
-    if (!infinite)
+    if (!loop)
       touching.value = false;
   }, [
     size,
-    infinite,
+    loop,
     touching,
     panOffset,
     translation,
     isHorizontal,
     scrollEndVelocity,
     scrollEndTranslation,
+    fixedDirection,
     maxScrollDistancePerSwipeIsSet,
     maxScrollDistancePerSwipe,
+    maxScrollDistancePerSwipeIsSet,
+    minScrollDistancePerSwipe,
     endWithSpring,
     withSpring,
     onScrollEnd,
   ]);
 
-  const gesture = useMemo(() => {
-    const gesture = Gesture.Pan()
-      .onBegin(onGestureBegin)
-      .onUpdate(onGestureUpdate)
-      .onEnd(onGestureFinish);
-
-    if (onConfigurePanGesture)
-      onConfigurePanGesture(gesture);
-
-    return gesture;
-  },
-  [
-    onGestureBegin,
-    onGestureUpdate,
-    onGestureFinish,
+  const gesture = usePanGestureProxy({
     onConfigurePanGesture,
-  ]);
-
-  useUpdateGestureConfig(gesture, { enabled });
+    onGestureStart,
+    onGestureUpdate,
+    onGestureEnd,
+    options: { enabled },
+  });
 
   return (
     <GestureDetector gesture={gesture}>

package/src/components/rnr-demo.test.tsx

@@ -0,0 +1,43 @@
+import type { FC } from "react";
+import React from "react";
+import Animated, { useAnimatedStyle, useDerivedValue } from "react-native-reanimated";
+import renderer from "react-test-renderer";
+
+describe("useSharedValue", () => {
+  it("retains value on rerender", () => {
+    const initialValue = 0;
+    const updatedValue = 1;
+
+    interface Props {
+      key: string
+      value: number
+    }
+
+    const TestComponent: FC<Props> = (props) => {
+      const opacity = useDerivedValue(() => props.value, [props.value]);
+      const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+      }), [opacity]);
+
+      return <Animated.View style={animatedStyle} />;
+    };
+
+    // When rendering with initial value
+    const wrapper = renderer.create(<TestComponent key="box" value={initialValue} />);
+
+    expect(
+      typeof wrapper.root.children[0] !== "string"
+        ? wrapper.root.children[0].props.style.animatedStyle.current.value.opacity
+        : false,
+    ).toBe(initialValue);
+
+    // When rendering with updated value
+    wrapper.update(<TestComponent key="box" value={updatedValue} />);
+
+    expect(
+      typeof wrapper.root.children[0] !== "string"
+        ? wrapper.root.children[0].props.style.animatedStyle.current.value.opacity
+        : false,
+    ).toBe(initialValue);
+  });
+});