react-native-reanimated-carousel 2.2.3 → 2.2.5-beta.2

package/src/hooks/useCarouselController.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
 import { Easing } from '../constants';
-import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
-import type { TCarouselActionOptions } from '../types';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+import type {
+    TCarouselActionOptions,
+    TCarouselProps,
+    WithAnimation,
+} from '../types';
+import { dealWithAnimation } from '@/utils/dealWithAnimation';
 
 interface IOpts {
     loop: boolean;
     size: number;
     handlerOffsetX: Animated.SharedValue<number>;
+    withAnimation?: TCarouselProps['withAnimation'];
     disable?: boolean;
     duration?: number;
     originalLength: number;
@@ -36,6 +42,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
         size,
         loop,
         handlerOffsetX,
+        withAnimation,
         disable = false,
         originalLength,
         length,
@@ -116,22 +123,31 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
     const scrollWithTiming = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
-            return withTiming(
-                toValue,
-                { duration, easing: Easing.easeOutQuart },
-                (isFinished: boolean) => {
-                    if (isFinished) {
-                        runOnJS(onScrollEnd)();
-                        onFinished && runOnJS(onFinished)();
-                    }
+            'worklet';
+            const callback = (isFinished: boolean) => {
+                'worklet';
+                if (isFinished) {
+                    runOnJS(onScrollEnd)();
+                    onFinished && runOnJS(onFinished)();
                 }
+            };
+
+            const defaultWithAnimation: WithAnimation = {
+                type: 'timing',
+                config: { duration, easing: Easing.easeOutQuart },
+            };
+
+            return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
+                toValue,
+                callback
             );
         },
-        [onScrollEnd, duration]
+        [duration, withAnimation, onScrollEnd]
     );
 
     const next = React.useCallback(
         (opts: TCarouselActionOptions = {}) => {
+            'worklet';
             const { count = 1, animated = true, onFinished } = opts;
             if (!canSliding() || (!loop && index.value >= length - 1)) return;
 
@@ -144,7 +160,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
                 handlerOffsetX.value = scrollWithTiming(
                     -nextPage * size,
                     onFinished
-                );
+                ) as any;
             } else {
                 handlerOffsetX.value = -nextPage * size;
                 onFinished?.();

package/src/layouts/BaseLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ViewStyle } from 'react-native';
 import Animated, {
+    AnimatedStyleProp,
     runOnJS,
     useAnimatedReaction,
     useAnimatedStyle,
@@ -12,9 +13,7 @@ import { LazyView } from '../LazyView';
 import { CTX } from '../store';
 import type { ILayoutConfig } from './stack';
 
-export type TAnimationStyle = (
-    value: number
-) => Animated.AnimatedStyleProp<ViewStyle>;
+export type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;
 
 export const BaseLayout: React.FC<{
     index: number;
@@ -69,6 +68,7 @@ export const BaseLayout: React.FC<{
     const x = useOffsetX(offsetXConfig, visibleRanges);
     const animationValue = useDerivedValue(() => x.value / size, [x, size]);
     const animatedStyle = useAnimatedStyle(
+        // @ts-ignore
         () => animationStyle(x.value / size),
         [animationStyle]
     );

package/src/layouts/stack.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Dimensions, TransformsStyle, ViewStyle } from 'react-native';
 import { Extrapolate, interpolate } from 'react-native-reanimated';
-import type { ComputedDirectionTypes, CustomConfig } from 'src/types';
+import type { ComputedDirectionTypes, CustomConfig } from '../types';
 
 const screen = Dimensions.get('window');
 

package/src/types.ts

@@ -1,5 +1,10 @@
 import type { ViewStyle } from 'react-native';
 import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
+import type {
+    AnimatedStyleProp,
+    WithSpringConfig,
+    WithTimingConfig,
+} from 'react-native-reanimated';
 import type Animated from 'react-native-reanimated';
 import type { TParallaxModeProps } from './layouts/parallax';
 import type { TStackModeProps } from './layouts/stack';
@@ -41,6 +46,16 @@ export type CustomConfig = {
     viewCount?: number;
 };
 
+export type WithAnimation =
+    | {
+          type: 'spring';
+          config: WithSpringConfig;
+      }
+    | {
+          type: 'timing';
+          config: WithTimingConfig;
+      };
+
 export type TCarouselProps<T = any> = {
     ref?: React.Ref<ICarouselInstance>;
     /**
@@ -83,9 +98,8 @@ export type TCarouselProps<T = any> = {
     /**
      * PanGestureHandler props
      */
-    panGestureHandlerProps?: Omit<
-        Partial<PanGestureHandlerProps>,
-        'onHandlerStateChange'
+    panGestureHandlerProps?: Partial<
+        Omit<PanGestureHandlerProps, 'onHandlerStateChange'>
     >;
     /**
      * Determines the maximum number of items will respond to pan gesture events,
@@ -105,6 +119,10 @@ export type TCarouselProps<T = any> = {
      * @default true
      */
     enableSnap?: boolean;
+    /**
+     * Specifies the scrolling animation effect.
+     */
+    withAnimation?: WithAnimation;
     /**
      * Custom carousel config.
      */
@@ -113,7 +131,7 @@ export type TCarouselProps<T = any> = {
      * Custom animations.
      * Must use `worklet`, Details: https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
      */
-    customAnimation?: (value: number) => Animated.AnimatedStyleProp<ViewStyle>;
+    customAnimation?: (value: number) => AnimatedStyleProp<ViewStyle>;
     /**
      * Render carousel item.
      */

package/src/utils/dealWithAnimation.ts

@@ -0,0 +1,22 @@
+import type { WithAnimation } from '../types';
+import { withSpring, withTiming } from 'react-native-reanimated';
+
+export function dealWithAnimation(
+    withAnimation: WithAnimation
+): (value: number, cb: (isFinished: boolean) => void) => number {
+    'worklet';
+    switch (withAnimation.type) {
+        case 'spring':
+            return (value, cb) => {
+                return withSpring(value, withAnimation.config, (isFinished) =>
+                    cb(isFinished as boolean)
+                );
+            };
+        case 'timing':
+            return (value, cb) => {
+                return withTiming(value, withAnimation.config, (isFinished) =>
+                    cb(isFinished as boolean)
+                );
+            };
+    }
+}