react-native-reanimated-carousel 2.2.4 → 2.2.5-beta.3

package/package.json

@@ -1,11 +1,9 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "2.2.4",
+    "version": "2.2.5-beta.3",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
-    "module": "lib/module/index",
     "types": "lib/typescript/index.d.ts",
-    "react-native": "src/index",
     "source": "src/index",
     "files": [
         "src",
@@ -26,8 +24,10 @@
         "test": "jest",
         "typescript": "tsc --noEmit",
         "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+        "dev": "yarn watch 'yarn prepare' ./src",
         "prepare": "bob build",
         "release": "release-it --no-git.requireUpstream",
+        "preRelease": "release-it --no-git.requireUpstream --preRelease=beta",
         "ios": "yarn --cwd example ios",
         "ios:pretty": "yarn --cwd example ios:pretty",
         "web": "yarn --cwd example web",
@@ -54,12 +54,15 @@
         "registry": "https://registry.npmjs.org/"
     },
     "devDependencies": {
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@commitlint/config-conventional": "^11.0.0",
         "@react-native-community/eslint-config": "^2.0.0",
         "@release-it/conventional-changelog": "^2.0.0",
         "@types/jest": "^26.0.0",
         "@types/react": "^16.9.19",
         "@types/react-native": "0.62.13",
+        "babel-plugin-inline-dotenv": "^1.6.0",
+        "babel-plugin-module-resolver": "^4.1.0",
         "commitlint": "^11.0.0",
         "cz-conventional-changelog": "^3.3.0",
         "eslint": "^7.2.0",
@@ -137,7 +140,12 @@
         "source": "src",
         "output": "lib",
         "targets": [
-            "commonjs",
+            [
+                "commonjs",
+                {
+                    "configFile": "./babel.config.js"
+                }
+            ],
             "module",
             [
                 "typescript",

package/src/Carousel.tsx

@@ -35,6 +35,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
             autoPlayReverse,
             autoPlayInterval,
             scrollAnimationDuration,
+            withAnimation,
             renderItem,
             onScrollEnd,
             onSnapToItem,
@@ -65,6 +66,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
             handlerOffsetX,
             length: data.length,
             disable: !data.length,
+            withAnimation,
             originalLength: data.length,
             onScrollEnd: () => runOnJS(_onScrollEnd)(),
             onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),

package/src/ScrollViewGesture.tsx

@@ -12,10 +12,11 @@ import Animated, {
     useDerivedValue,
     useSharedValue,
     withDecay,
-    withTiming,
 } from 'react-native-reanimated';
 import { Easing } from './constants';
 import { CTX } from './store';
+import type { WithAnimation } from './types';
+import { dealWithAnimation } from './utils/dealWithAnimation';
 
 type GestureContext = {
     panOffset: number;
@@ -44,6 +45,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             panGestureHandlerProps,
             loop: infinite,
             scrollAnimationDuration,
+            withAnimation,
         },
     } = React.useContext(CTX);
 
@@ -65,20 +67,27 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     const _withSpring = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
             'worklet';
-            return withTiming(
-                toValue,
-                {
+            const callback = (isFinished: boolean) => {
+                'worklet';
+                if (isFinished) {
+                    onFinished && runOnJS(onFinished)();
+                }
+            };
+
+            const defaultWithAnimation: WithAnimation = {
+                type: 'timing',
+                config: {
                     duration: scrollAnimationDuration,
                     easing: Easing.easeOutQuart,
                 },
-                (isFinished) => {
-                    if (isFinished) {
-                        onFinished?.();
-                    }
-                }
+            };
+
+            return dealWithAnimation(withAnimation ?? defaultWithAnimation)(
+                toValue,
+                callback
             );
         },
-        [scrollAnimationDuration]
+        [scrollAnimationDuration, withAnimation]
     );
 
     const endWithSpring = React.useCallback(
@@ -141,7 +150,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         touching.value = true;
         translation.value = withDecay(
             { velocity: scrollEndVelocity.value },
-            onFinish
+            (isFinished) => onFinish(isFinished as boolean)
         );
     }, [onFinish, scrollEndVelocity.value, touching, translation]);
 
@@ -234,7 +243,8 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                     ? translationX
                     : translationY;
 
-                endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());
+                // endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());
+                endWithSpring(onScrollEnd);
 
                 if (!infinite) {
                     touching.value = false;

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