react-native-reanimated-carousel 4.0.0-alpha.7 → 4.0.0-alpha.9

package/src/components/Carousel.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { runOnJS, useDerivedValue } from "react-native-reanimated";
 
-import { BaseLayout } from "./BaseLayout";
+import { ItemRenderer } from "./ItemRenderer";
 import { ScrollViewGesture } from "./ScrollViewGesture";
 
 import { useAutoPlay } from "../hooks/useAutoPlay";
@@ -13,7 +13,6 @@ 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 { CTX } from "../store";
 import type { ICarouselInstance, TCarouselProps } from "../types";
 import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
@@ -30,8 +29,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       data,
       // Length of fill data
       dataLength,
-      // Raw data that has not been processed
-      rawData,
       // Length of raw data
       rawDataLength,
       mode,
@@ -49,7 +46,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       renderItem,
       onScrollEnd,
       onSnapToItem,
-      onScrollBegin,
+      onScrollStart,
       onProgressChange,
       customAnimation,
       defaultIndex,
@@ -89,7 +86,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       fixedDirection,
       duration: scrollAnimationDuration,
       onScrollEnd: () => runOnJS(_onScrollEnd)(),
-      onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
+      onScrollStart: () => !!onScrollStart && runOnJS(onScrollStart)(),
     });
 
     const { next, prev, scrollTo, getSharedIndex, getCurrentIndex }
@@ -126,10 +123,10 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       onScrollEnd,
     ]);
 
-    const scrollViewGestureOnScrollBegin = React.useCallback(() => {
+    const scrollViewGestureOnScrollStart = React.useCallback(() => {
       pauseAutoPlay();
-      onScrollBegin?.();
-    }, [onScrollBegin, pauseAutoPlay]);
+      onScrollStart?.();
+    }, [onScrollStart, pauseAutoPlay]);
 
     const scrollViewGestureOnScrollEnd = React.useCallback(() => {
       startAutoPlay();
@@ -155,55 +152,8 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       [getCurrentIndex, next, prev, scrollTo],
     );
 
-    const visibleRanges = useVisibleRanges({
-      total: dataLength,
-      viewSize: size,
-      translation: handlerOffset,
-      windowSize,
-      loop,
-    });
-
     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 (
       <GestureHandlerRootView>
         <CTX.Provider value={{ props, common: commonVariables }}>
@@ -223,12 +173,25 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
                 : styles.itemsHorizontal,
             ]}
             testID={testID}
-            onScrollBegin={scrollViewGestureOnScrollBegin}
+            onScrollStart={scrollViewGestureOnScrollStart}
             onScrollEnd={scrollViewGestureOnScrollEnd}
             onTouchBegin={scrollViewGestureOnTouchBegin}
             onTouchEnd={scrollViewGestureOnTouchEnd}
           >
-            {data.map(renderLayout)}
+            <ItemRenderer
+              data={data}
+              dataLength={dataLength}
+              rawDataLength={rawDataLength}
+              loop={loop}
+              size={size}
+              windowSize={windowSize}
+              autoFillData={autoFillData}
+              offsetX={offsetX}
+              handlerOffset={handlerOffset}
+              layoutConfig={layoutConfig}
+              renderItem={renderItem}
+              customAnimation={customAnimation}
+            />
           </ScrollViewGesture>
         </CTX.Provider>
       </GestureHandlerRootView>

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/ScrollViewGesture.tsx

@@ -25,7 +25,7 @@ interface Props {
   infinite?: boolean
   testID?: string
   style?: StyleProp<ViewStyle>
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   onScrollEnd?: () => void
   onTouchBegin?: () => void
   onTouchEnd?: () => void
@@ -55,7 +55,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     translation,
     testID,
     style = {},
-    onScrollBegin,
+    onScrollStart,
     onScrollEnd,
     onTouchBegin,
     onTouchEnd,
@@ -259,12 +259,12 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     return translation;
   }
 
-  const onGestureBegin = useCallback((_: PanGestureHandlerEventPayload) => {
+  const onGestureStart = useCallback((_: PanGestureHandlerEventPayload) => {
     "worklet";
 
     touching.value = true;
     validStart.value = true;
-    onScrollBegin && runOnJS(onScrollBegin)();
+    onScrollStart && runOnJS(onScrollStart)();
 
     max.value = (maxPage - 1) * size;
     if (!loop && !overscrollEnabled)
@@ -282,7 +282,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     translation,
     overscrollEnabled,
     getLimit,
-    onScrollBegin,
+    onScrollStart,
   ]);
 
   const onGestureUpdate = useCallback((e: PanGestureHandlerEventPayload) => {
@@ -380,7 +380,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
 
   const gesture = usePanGestureProxy({
     onConfigurePanGesture,
-    onGestureBegin,
+    onGestureStart,
     onGestureUpdate,
     onGestureEnd,
     options: { enabled },

package/src/hooks/useCarouselController.tsx

@@ -27,7 +27,7 @@ interface IOpts {
   fixedDirection?: TCarouselProps["fixedDirection"]
   duration?: number
   defaultIndex?: number
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   onScrollEnd?: () => void
 }
 
@@ -138,8 +138,8 @@ export function useCarouselController(options: IOpts): ICarouselController {
     options.onScrollEnd?.();
   }, [options]);
 
-  const onScrollBegin = React.useCallback(() => {
-    options.onScrollBegin?.();
+  const onScrollStart = React.useCallback(() => {
+    options.onScrollStart?.();
   }, [options]);
 
   const scrollWithTiming = React.useCallback(
@@ -173,7 +173,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       if (!canSliding() || (!loop && index.value >= dataInfo.length - 1))
         return;
 
-      onScrollBegin?.();
+      onScrollStart?.();
 
       const nextPage = currentFixedPage() + count;
       index.value = nextPage;
@@ -194,7 +194,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       loop,
       index,
       dataInfo,
-      onScrollBegin,
+      onScrollStart,
       handlerOffset,
       size,
       scrollWithTiming,
@@ -207,7 +207,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       const { count = 1, animated = true, onFinished } = opts;
       if (!canSliding() || (!loop && index.value <= 0)) return;
 
-      onScrollBegin?.();
+      onScrollStart?.();
 
       const prevPage = currentFixedPage() - count;
       index.value = prevPage;
@@ -227,7 +227,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       canSliding,
       loop,
       index,
-      onScrollBegin,
+      onScrollStart,
       handlerOffset,
       size,
       scrollWithTiming,
@@ -241,7 +241,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       if (i === index.value) return;
       if (!canSliding()) return;
 
-      onScrollBegin?.();
+      onScrollStart?.();
       // direction -> 1 | -1
       const direction = handlerOffsetDirection(handlerOffset, fixedDirection);
 
@@ -283,7 +283,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
       handlerOffset,
       dataInfo.length,
       canSliding,
-      onScrollBegin,
+      onScrollStart,
       scrollWithTiming,
     ],
   );

package/src/hooks/useOffsetX.test.ts

@@ -12,7 +12,7 @@ describe("useSharedValue", () => {
       const range = useSharedValue({
         negativeRange: [7, 9],
         positiveRange: [0, 3],
-      });
+      }) as IVisibleRanges;
       const inputs: Array<{
         config: IOpts
         range: IVisibleRanges

package/src/hooks/usePanGestureProxy.test.tsx

@@ -46,14 +46,13 @@ describe("Using RNGH v2 gesture API", () => {
       onConfigurePanGesture: (gesture: PanGesture) => {
         // This is user's customizations
         gesture
-          .onStart(treatStartAsUpdate ? handlers.active : handlers.start)
           .onBegin(handlersFromUser.begin)
           .onUpdate(handlersFromUser.active)
           .onEnd(handlersFromUser.end)
           .onFinalize(handlers.finish)
           .withTestId("pan");
       },
-      onGestureBegin: handlers.begin,
+      onGestureStart: treatStartAsUpdate ? handlers.active : handlers.start,
       onGestureUpdate: handlers.active,
       onGestureEnd: handlers.end,
       options: { enabled: true },
@@ -82,10 +81,11 @@ describe("Using RNGH v2 gesture API", () => {
     const pan = usePanGestureProxy({
       onConfigurePanGesture: (_: PanGesture) => {
         _
+          .onBegin(panHandlers.begin)
           .onFinalize(panHandlers.finish)
           .withTestId("pan");
       },
-      onGestureBegin: panHandlers.begin,
+      onGestureStart: panHandlers.start,
       onGestureUpdate: panHandlers.active,
       onGestureEnd: panHandlers.end,
       options: { enabled: true },
@@ -153,14 +153,13 @@ describe("Event list validation", () => {
     const pan = usePanGestureProxy({
       onConfigurePanGesture: (_: PanGesture) => {
         _
-          .onStart(treatStartAsUpdate ? handlers.active : handlers.start)
           .onBegin(handlersFromUser.begin)
           .onUpdate(handlersFromUser.active)
           .onEnd(handlersFromUser.end)
           .onFinalize(handlers.finish)
           .withTestId("pan");
       },
-      onGestureBegin: handlers.begin,
+      onGestureStart: treatStartAsUpdate ? handlers.active : handlers.start,
       onGestureUpdate: handlers.active,
       onGestureEnd: handlers.end,
       options: { enabled: true },
@@ -233,11 +232,11 @@ describe("Filling event list with defaults", () => {
     const pan = usePanGestureProxy({
       onConfigurePanGesture: (_: PanGesture) => {
         _
-          .onStart(treatStartAsUpdate ? handlers.active : handlers.start)
+          .onBegin(handlers.begin)
           .onFinalize(handlers.finish)
           .withTestId("pan");
       },
-      onGestureBegin: handlers.begin,
+      onGestureStart: treatStartAsUpdate ? handlers.active : handlers.start,
       onGestureUpdate: handlers.active,
       onGestureEnd: handlers.end,
       options: { enabled: true },

package/src/hooks/usePanGestureProxy.ts

@@ -8,7 +8,7 @@ import { useUpdateGestureConfig } from "./useUpdateGestureConfig";
 export const usePanGestureProxy = (
   customization: {
     onConfigurePanGesture?: (gesture: PanGesture) => void
-    onGestureBegin: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void
+    onGestureStart: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void
     onGestureUpdate: (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void
     onGestureEnd: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>, success: boolean) => void
     options?: GestureConfig
@@ -16,7 +16,7 @@ export const usePanGestureProxy = (
 ) => {
   const {
     onConfigurePanGesture,
-    onGestureBegin,
+    onGestureStart,
     onGestureUpdate,
     onGestureEnd,
     options = {},
@@ -27,25 +27,25 @@ export const usePanGestureProxy = (
 
     // Save the original gesture callbacks
     const originalGestures = {
-      onBegin: gesture.onBegin,
+      onStart: gesture.onStart,
       onUpdate: gesture.onUpdate,
       onEnd: gesture.onEnd,
     };
 
     // Save the user defined gesture callbacks
     const userDefinedConflictGestures: {
-      onBegin?: Parameters<(typeof gesture)["onBegin"]>[0]
+      onStart?: Parameters<(typeof gesture)["onStart"]>[0]
       onUpdate?: Parameters<(typeof gesture)["onUpdate"]>[0]
       onEnd?: Parameters<(typeof gesture)["onEnd"]>[0]
     } = {
-      onBegin: undefined,
+      onStart: undefined,
       onUpdate: undefined,
       onEnd: undefined,
     };
 
-    const fakeOnBegin: typeof gesture.onBegin = (cb) => {
-      // Using fakeOnBegin to save the user defined callback
-      userDefinedConflictGestures.onBegin = cb;
+    const fakeOnStart: typeof gesture.onStart = (cb) => {
+      // Using fakeOnStart to save the user defined callback
+      userDefinedConflictGestures.onStart = cb;
       return gesture;
     };
 
@@ -62,7 +62,7 @@ export const usePanGestureProxy = (
     };
 
     // Setup the fake callbacks
-    gesture.onBegin = fakeOnBegin;
+    gesture.onStart = fakeOnStart;
     gesture.onUpdate = fakeOnUpdate;
     gesture.onEnd = fakeOnEnd;
 
@@ -71,17 +71,17 @@ export const usePanGestureProxy = (
       onConfigurePanGesture(gesture);
 
     // Restore the original callbacks
-    gesture.onBegin = originalGestures.onBegin;
+    gesture.onStart = originalGestures.onStart;
     gesture.onUpdate = originalGestures.onUpdate;
     gesture.onEnd = originalGestures.onEnd;
 
     // Setup the original callbacks with the user defined callbacks
     gesture
-      .onBegin((e) => {
-        onGestureBegin(e);
+      .onStart((e) => {
+        onGestureStart(e);
 
-        if (userDefinedConflictGestures.onBegin)
-          userDefinedConflictGestures.onBegin(e);
+        if (userDefinedConflictGestures.onStart)
+          userDefinedConflictGestures.onStart(e);
       })
       .onUpdate((e) => {
         onGestureUpdate(e);
@@ -98,7 +98,7 @@ export const usePanGestureProxy = (
 
     return gesture;
   }, [
-    onGestureBegin,
+    onGestureStart,
     onGestureUpdate,
     onGestureEnd,
     onConfigurePanGesture,

package/src/hooks/useVisibleRanges.tsx

@@ -1,10 +1,15 @@
+import { useRef } from "react";
 import type Animated from "react-native-reanimated";
 import { useDerivedValue } from "react-native-reanimated";
 
-export type IVisibleRanges = Animated.SharedValue<{
-  negativeRange: number[]
-  positiveRange: number[]
-}>;
+type Range = [number, number];
+
+export interface VisibleRanges {
+  negativeRange: Range
+  positiveRange: Range
+}
+
+export type IVisibleRanges = Animated.SharedValue<VisibleRanges>;
 
 export function useVisibleRanges(options: {
   total: number
@@ -22,6 +27,7 @@ export function useVisibleRanges(options: {
   } = options;
 
   const windowSize = _windowSize ?? total;
+  const cachedRanges = useRef<VisibleRanges>(null!);
 
   const ranges = useDerivedValue(() => {
     const positiveCount = Math.round(windowSize / 2);
@@ -30,36 +36,62 @@ export function useVisibleRanges(options: {
     let currentIndex = Math.round(-translation.value / viewSize);
     currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
 
+    let newRanges: VisibleRanges;
+
     if (!loop) {
       // Adjusting negative range if the carousel is not loopable.
       // So, It will be only displayed the positive items.
-      return {
+      newRanges = {
         negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],
         positiveRange: [0 + currentIndex, currentIndex + (windowSize - 1)],
       };
     }
+    else {
+      const negativeRange: Range = [
+        (currentIndex - negativeCount + total) % total,
+        (currentIndex - 1 + total) % total,
+      ];
 
-    const negativeRange = [
-      (currentIndex - negativeCount + total) % total,
-      (currentIndex - 1 + total) % total,
-    ];
+      const positiveRange: Range = [
+        (currentIndex + total) % total,
+        (currentIndex + positiveCount + total) % total,
+      ];
 
-    const positiveRange = [
-      (currentIndex + total) % total,
-      (currentIndex + positiveCount + total) % total,
-    ];
+      if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
+      if (positiveRange[0] > positiveRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
 
-    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
-    }
-    if (positiveRange[0] > positiveRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
+      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
+      newRanges = { negativeRange, positiveRange };
     }
-    // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
-    return { negativeRange, positiveRange };
+
+    if (
+      isArraysEqual(
+        cachedRanges.current?.negativeRange ?? [],
+        newRanges.negativeRange,
+      )
+      && isArraysEqual(
+        cachedRanges.current?.positiveRange ?? [],
+        newRanges.positiveRange,
+      )
+    )
+      return cachedRanges.current;
+
+    cachedRanges.current = newRanges;
+    return cachedRanges.current;
   }, [loop, total, windowSize, translation]);
 
   return ranges;
 }
+
+function isArraysEqual(a: number[], b: number[]): boolean {
+  "worklet";
+  if (a.length !== b.length) return false;
+
+  return a.every((value, index) => value === b[index]);
+}

package/src/index.tsx

@@ -1,10 +1,12 @@
 import Carousel from "./components/Carousel";
+
 export type {
   TCarouselProps,
   ICarouselInstance,
   IComputedDirectionTypes,
   CarouselRenderItem,
 } from "./types";
+export type { TAnimationStyle } from "./components/BaseLayout";
 export type { ILayoutConfig } from "./layouts/stack";
 
 export default Carousel;

package/src/types.ts

@@ -180,9 +180,9 @@ export type TCarouselProps<T = any> = {
       */
   onSnapToItem?: (index: number) => void
   /**
-      * On scroll begin
+      * On scroll start
       */
-  onScrollBegin?: () => void
+  onScrollStart?: () => void
   /**
       * On scroll end
       */