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

package/src/ScrollViewGesture.tsx

@@ -15,7 +15,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { Easing } from './constants';
 import { CTX } from './store';
-import type { WithAnimation } from './types';
+import type { WithTimingAnimation } from './types';
 import { dealWithAnimation } from './utils/dealWithAnimation';
 
 type GestureContext = {
@@ -41,11 +41,12 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             style,
             data,
             pagingEnabled,
-            enableSnap,
+            snapEnabled,
             panGestureHandlerProps,
             loop: infinite,
             scrollAnimationDuration,
             withAnimation,
+            enabled,
         },
     } = React.useContext(CTX);
 
@@ -74,7 +75,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             };
 
-            const defaultWithAnimation: WithAnimation = {
+            const defaultWithAnimation: WithTimingAnimation = {
                 type: 'timing',
                 config: {
                     duration: scrollAnimationDuration,
@@ -96,7 +97,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             const origin = translation.value;
             const velocity = scrollEndVelocity.value;
             if (!pagingEnabled) {
-                if (enableSnap) {
+                if (snapEnabled) {
                     const nextPage =
                         Math.round((origin + velocity * 0.4) / size) * size;
                     translation.value = _withSpring(nextPage, onFinished);
@@ -130,7 +131,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             size,
             maxPage,
             pagingEnabled,
-            enableSnap,
+            snapEnabled,
         ]
     );
 
@@ -243,7 +244,6 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                     ? translationX
                     : translationY;
 
-                // endWithSpring(() => onScrollEnd && runOnJS(onScrollEnd)());
                 endWithSpring(onScrollEnd);
 
                 if (!infinite) {
@@ -257,7 +257,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             infinite,
             maxPage,
             size,
-            enableSnap,
+            snapEnabled,
             onScrollBegin,
             onScrollEnd,
         ]
@@ -275,6 +275,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
         >
             <PanGestureHandler
                 {...panGestureHandlerProps}
+                enabled={enabled}
                 onGestureEvent={panGestureEventHandler}
             >
                 {props.children}

package/src/constants/index.ts

@@ -1,4 +1,4 @@
-import { Easing as _Easing } from 'react-native-reanimated';
+import Animated, { Easing as _Easing } from 'react-native-reanimated';
 
 export enum DATA_LENGTH {
     SINGLE_ITEM = 1,
@@ -6,5 +6,10 @@ export enum DATA_LENGTH {
 }
 
 export const Easing = {
-    easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1),
+    easeOutQuart: _Easing.bezier(
+        0.25,
+        1,
+        0.5,
+        1
+    ) as unknown as Animated.EasingFunction,
 };

package/src/hooks/useCarouselController.tsx

@@ -5,7 +5,7 @@ import { runOnJS, useSharedValue } from 'react-native-reanimated';
 import type {
     TCarouselActionOptions,
     TCarouselProps,
-    WithAnimation,
+    WithTimingAnimation,
 } from '../types';
 import { dealWithAnimation } from '@/utils/dealWithAnimation';
 
@@ -132,7 +132,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
                 }
             };
 
-            const defaultWithAnimation: WithAnimation = {
+            const defaultWithAnimation: WithTimingAnimation = {
                 type: 'timing',
                 config: { duration, easing: Easing.easeOutQuart },
             };

package/src/hooks/useCheckMounted.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export function useCheckMounted() {
+    const mounted = React.useRef(false);
+
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+
+    return mounted;
+}

package/src/hooks/useInitProps.ts

@@ -27,12 +27,13 @@ export function useInitProps<T>(
         defaultIndex = 0,
         data: rawData = [],
         loop = true,
+        enabled = true,
         autoPlayInterval: _autoPlayInterval = 1000,
         scrollAnimationDuration = 500,
         style = {},
         panGestureHandlerProps = {},
         pagingEnabled = true,
-        enableSnap = true,
+        snapEnabled = props.enableSnap ?? true,
         width: _width,
         height: _height,
     } = props;
@@ -68,12 +69,13 @@ export function useInitProps<T>(
         data,
         rawData,
         loop,
+        enabled,
         autoPlayInterval,
         scrollAnimationDuration,
         style,
         panGestureHandlerProps,
         pagingEnabled,
-        enableSnap,
+        snapEnabled,
         width,
         height,
     };

package/src/layouts/BaseLayout.tsx

@@ -7,6 +7,7 @@ import Animated, {
     useAnimatedStyle,
     useDerivedValue,
 } from 'react-native-reanimated';
+import { useCheckMounted } from 'src/hooks/useCheckMounted';
 import { IOpts, useOffsetX } from '../hooks/useOffsetX';
 import type { IVisibleRanges } from '../hooks/useVisibleRanges';
 import { LazyView } from '../LazyView';
@@ -24,6 +25,7 @@ export const BaseLayout: React.FC<{
         animationValue: Animated.SharedValue<number>;
     }) => React.ReactElement;
 }> = (props) => {
+    const mounted = useCheckMounted();
     const { handlerOffsetX, index, children, visibleRanges, animationStyle } =
         props;
 
@@ -75,12 +77,13 @@ export const BaseLayout: React.FC<{
 
     const updateView = React.useCallback(
         (negativeRange: number[], positiveRange: number[]) => {
-            setShouldUpdate(
-                (index >= negativeRange[0] && index <= negativeRange[1]) ||
-                    (index >= positiveRange[0] && index <= positiveRange[1])
-            );
+            mounted.current &&
+                setShouldUpdate(
+                    (index >= negativeRange[0] && index <= negativeRange[1]) ||
+                        (index >= positiveRange[0] && index <= positiveRange[1])
+                );
         },
-        [index]
+        [index, mounted]
     );
 
     useAnimatedReaction(

package/src/layouts/ParallaxLayout.tsx

@@ -10,22 +10,24 @@ import type { ComputedDirectionTypes } from 'src/types';
 import { useOffsetX } from '../hooks/useOffsetX';
 import type { IVisibleRanges } from '../hooks/useVisibleRanges';
 import { LazyView } from '../LazyView';
+import type { ILayoutConfig } from './parallax';
 
 export const ParallaxLayout: React.FC<
-    ComputedDirectionTypes<{
-        loop?: boolean;
-        parallaxScrollingOffset?: number;
-        parallaxScrollingScale?: number;
-        handlerOffsetX: Animated.SharedValue<number>;
-        index: number;
-        data: unknown[];
-        visibleRanges: IVisibleRanges;
-    }>
+    ComputedDirectionTypes<
+        {
+            loop?: boolean;
+            handlerOffsetX: Animated.SharedValue<number>;
+            index: number;
+            data: unknown[];
+            visibleRanges: IVisibleRanges;
+        } & ILayoutConfig
+    >
 > = (props) => {
     const {
         handlerOffsetX,
         parallaxScrollingOffset = 100,
         parallaxScrollingScale = 0.8,
+        parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
         index,
         width,
         height,
@@ -76,9 +78,9 @@ export const ParallaxLayout: React.FC<
             value,
             [-1, 0, 1],
             [
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
                 parallaxScrollingScale,
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
             ],
             Extrapolate.CLAMP
         );

package/src/layouts/parallax.ts

@@ -6,17 +6,22 @@ type TBaseConfig = {
     vertical: boolean;
 };
 
-interface ILayoutConfig {
+export interface ILayoutConfig {
     /**
-     * When use default Layout props,this prop can be control prev/next item offset.
+     * control prev/next item offset.
      * @default 100
      */
     parallaxScrollingOffset?: number;
     /**
-     * When use default Layout props,this prop can be control prev/next item offset.
+     * control prev/current/next item offset.
      * @default 0.8
      */
     parallaxScrollingScale?: number;
+    /**
+     * control prev/next item offset.
+     * @default Math.pow(parallaxScrollingScale, 2)
+     */
+    parallaxAdjacentItemScale?: number;
 }
 
 export type TParallaxModeProps = ComputedDirectionTypes<{
@@ -32,8 +37,11 @@ export function parallaxLayout(
     modeConfig: ILayoutConfig = {}
 ) {
     const { size, vertical } = baseConfig;
-    const { parallaxScrollingOffset = 100, parallaxScrollingScale = 0.8 } =
-        modeConfig;
+    const {
+        parallaxScrollingOffset = 100,
+        parallaxScrollingScale = 0.8,
+        parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
+    } = modeConfig;
 
     return (value: number) => {
         'worklet';
@@ -54,9 +62,9 @@ export function parallaxLayout(
             value,
             [-1, 0, 1],
             [
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
                 parallaxScrollingScale,
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
             ],
             Extrapolate.CLAMP
         );

package/src/types.ts

@@ -46,15 +46,17 @@ export type CustomConfig = {
     viewCount?: number;
 };
 
-export type WithAnimation =
-    | {
-          type: 'spring';
-          config: WithSpringConfig;
-      }
-    | {
-          type: 'timing';
-          config: WithTimingConfig;
-      };
+export type WithSpringAnimation = {
+    type: 'spring';
+    config: WithSpringConfig;
+};
+
+export type WithTimingAnimation = {
+    type: 'timing';
+    config: WithTimingConfig;
+};
+
+export type WithAnimation = WithSpringAnimation | WithTimingAnimation;
 
 export type TCarouselProps<T = any> = {
     ref?: React.Ref<ICarouselInstance>;
@@ -99,7 +101,7 @@ export type TCarouselProps<T = any> = {
      * PanGestureHandler props
      */
     panGestureHandlerProps?: Partial<
-        Omit<PanGestureHandlerProps, 'onHandlerStateChange'>
+        Omit<PanGestureHandlerProps, 'onHandlerStateChange' | 'enabled'>
     >;
     /**
      * Determines the maximum number of items will respond to pan gesture events,
@@ -116,9 +118,20 @@ export type TCarouselProps<T = any> = {
     /**
      * If enabled, releasing the touch will scroll to the nearest item.
      * valid when pagingEnabled=false
-     * @default true
+     * @deprecated please use snapEnabled instead
      */
     enableSnap?: boolean;
+    /**
+     * If enabled, releasing the touch will scroll to the nearest item.
+     * valid when pagingEnabled=false
+     * @default true
+     */
+    snapEnabled?: boolean;
+    /**
+     * If false, Carousel will not respond to any gestures.
+     * @default true
+     */
+    enabled?: boolean;
     /**
      * Specifies the scrolling animation effect.
      */