react-native-reanimated-carousel 2.2.2 → 2.2.5-beta.1

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)
+                );
+            };
+    }
+}