react-native-puff-pop 1.0.6 → 1.0.8

package/lib/module/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useCallback, useMemo, Children, } from 'react';
+import { useEffect, useRef, useState, useCallback, useMemo, memo, Children, } from 'react';
 import { View, Animated, StyleSheet, Easing, AccessibilityInfo, } from 'react-native';
 /**
  * Get easing function based on type
@@ -22,16 +22,160 @@ function getEasing(type) {
             return Easing.out(Easing.ease);
     }
 }
+/**
+ * Get effect flags for any effect type
+ * Returns flags indicating which transforms are needed for the effect
+ */
+function getEffectFlags(eff) {
+    return {
+        hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip', 'pulse', 'elastic'].includes(eff),
+        hasRotate: ['rotate', 'rotateScale', 'swing', 'wobble'].includes(eff),
+        hasFlip: eff === 'flip',
+        hasTranslateX: ['slideLeft', 'slideRight', 'shake', 'wobble'].includes(eff),
+        hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(eff),
+        hasRotateEffect: ['rotate', 'rotateScale', 'flip', 'swing', 'wobble'].includes(eff),
+        // Special effects that need sequence animation
+        isShake: eff === 'shake',
+        isPulse: eff === 'pulse',
+        isSwing: eff === 'swing',
+        isWobble: eff === 'wobble',
+        isElastic: eff === 'elastic',
+    };
+}
+/**
+ * Get anchor point offset multipliers
+ * Returns { x: -1 to 1, y: -1 to 1 } where 0 is center
+ */
+function getAnchorPointOffset(anchorPoint) {
+    switch (anchorPoint) {
+        case 'top':
+            return { x: 0, y: -0.5 };
+        case 'bottom':
+            return { x: 0, y: 0.5 };
+        case 'left':
+            return { x: -0.5, y: 0 };
+        case 'right':
+            return { x: 0.5, y: 0 };
+        case 'topLeft':
+            return { x: -0.5, y: -0.5 };
+        case 'topRight':
+            return { x: 0.5, y: -0.5 };
+        case 'bottomLeft':
+            return { x: -0.5, y: 0.5 };
+        case 'bottomRight':
+            return { x: 0.5, y: 0.5 };
+        case 'center':
+        default:
+            return { x: 0, y: 0 };
+    }
+}
+/**
+ * Props comparison function for PuffPop memoization
+ * Performs shallow comparison of props to prevent unnecessary re-renders
+ */
+function arePuffPopPropsEqual(prevProps, nextProps) {
+    // Compare primitive props
+    if (prevProps.effect !== nextProps.effect ||
+        prevProps.duration !== nextProps.duration ||
+        prevProps.delay !== nextProps.delay ||
+        prevProps.easing !== nextProps.easing ||
+        prevProps.skeleton !== nextProps.skeleton ||
+        prevProps.visible !== nextProps.visible ||
+        prevProps.animateOnMount !== nextProps.animateOnMount ||
+        prevProps.loop !== nextProps.loop ||
+        prevProps.loopDelay !== nextProps.loopDelay ||
+        prevProps.respectReduceMotion !== nextProps.respectReduceMotion ||
+        prevProps.testID !== nextProps.testID ||
+        prevProps.reverse !== nextProps.reverse ||
+        prevProps.intensity !== nextProps.intensity ||
+        prevProps.anchorPoint !== nextProps.anchorPoint ||
+        prevProps.useSpring !== nextProps.useSpring ||
+        prevProps.exitEffect !== nextProps.exitEffect ||
+        prevProps.exitDuration !== nextProps.exitDuration ||
+        prevProps.exitEasing !== nextProps.exitEasing ||
+        prevProps.exitDelay !== nextProps.exitDelay ||
+        prevProps.initialOpacity !== nextProps.initialOpacity ||
+        prevProps.initialScale !== nextProps.initialScale ||
+        prevProps.initialRotate !== nextProps.initialRotate ||
+        prevProps.initialTranslateX !== nextProps.initialTranslateX ||
+        prevProps.initialTranslateY !== nextProps.initialTranslateY) {
+        return false;
+    }
+    // Compare springConfig object (shallow)
+    if (prevProps.springConfig !== nextProps.springConfig) {
+        if (!prevProps.springConfig ||
+            !nextProps.springConfig ||
+            prevProps.springConfig.tension !== nextProps.springConfig.tension ||
+            prevProps.springConfig.friction !== nextProps.springConfig.friction ||
+            prevProps.springConfig.speed !== nextProps.springConfig.speed ||
+            prevProps.springConfig.bounciness !== nextProps.springConfig.bounciness) {
+            return false;
+        }
+    }
+    // Compare callbacks (reference equality - if changed, should re-render)
+    if (prevProps.onAnimationStart !== nextProps.onAnimationStart ||
+        prevProps.onAnimationComplete !== nextProps.onAnimationComplete) {
+        return false;
+    }
+    // Style comparison - if style prop changes, re-render
+    // Note: Deep comparison of style is expensive, so we use reference equality
+    if (prevProps.style !== nextProps.style) {
+        return false;
+    }
+    // Children comparison - if children change, re-render
+    if (prevProps.children !== nextProps.children) {
+        return false;
+    }
+    return true;
+}
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0, easing = 'easeOut', skeleton = true, visible = true, onAnimationComplete, onAnimationStart, style, animateOnMount = true, loop = false, loopDelay = 0, respectReduceMotion = true, testID, }) {
+function PuffPopComponent({ children, effect = 'scale', duration = 400, delay = 0, easing = 'easeOut', skeleton = true, visible = true, onAnimationComplete, onAnimationStart, style, animateOnMount = true, loop = false, loopDelay = 0, respectReduceMotion = true, testID, 
+// Exit animation settings
+exitEffect, exitDuration, exitEasing, exitDelay = 0, 
+// Custom initial values
+initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, 
+// Reverse mode
+reverse = false, 
+// Animation intensity
+intensity = 1, 
+// Anchor point
+anchorPoint = 'center', 
+// Spring animation
+useSpring = false, springConfig, }) {
+    // Clamp intensity between 0 and 1
+    const clampedIntensity = Math.max(0, Math.min(1, intensity));
+    // Helper to get initial value with custom override, reverse, and intensity support
+    const getInitialOpacityValue = () => initialOpacity ?? 0;
+    const getInitialScaleValue = (eff) => {
+        if (initialScale !== undefined)
+            return initialScale;
+        const baseScale = getInitialScale(eff, reverse);
+        // Scale goes from baseScale to 1, so we interpolate: 1 - (1 - baseScale) * intensity
+        return 1 - (1 - baseScale) * clampedIntensity;
+    };
+    const getInitialRotateValue = (eff) => {
+        if (initialRotate !== undefined)
+            return initialRotate;
+        return getInitialRotate(eff, reverse) * clampedIntensity;
+    };
+    const getInitialTranslateXValue = (eff) => {
+        if (initialTranslateX !== undefined)
+            return initialTranslateX;
+        return getInitialTranslateX(eff, reverse) * clampedIntensity;
+    };
+    const getInitialTranslateYValue = (eff) => {
+        if (initialTranslateY !== undefined)
+            return initialTranslateY;
+        return getInitialTranslateY(eff, reverse) * clampedIntensity;
+    };
     // Animation values
-    const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
-    const scale = useRef(new Animated.Value(animateOnMount ? getInitialScale(effect) : 1)).current;
-    const rotate = useRef(new Animated.Value(animateOnMount ? getInitialRotate(effect) : 0)).current;
-    const translateX = useRef(new Animated.Value(animateOnMount ? getInitialTranslateX(effect) : 0)).current;
-    const translateY = useRef(new Animated.Value(animateOnMount ? getInitialTranslateY(effect) : 0)).current;
+    const opacity = useRef(new Animated.Value(animateOnMount ? getInitialOpacityValue() : 1)).current;
+    const scale = useRef(new Animated.Value(animateOnMount ? getInitialScaleValue(effect) : 1)).current;
+    const rotate = useRef(new Animated.Value(animateOnMount ? getInitialRotateValue(effect) : 0)).current;
+    const translateX = useRef(new Animated.Value(animateOnMount ? getInitialTranslateXValue(effect) : 0)).current;
+    const translateY = useRef(new Animated.Value(animateOnMount ? getInitialTranslateYValue(effect) : 0)).current;
     // For non-skeleton mode
     const [measuredHeight, setMeasuredHeight] = useState(null);
     const animatedHeight = useRef(new Animated.Value(0)).current;
@@ -55,15 +199,11 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     }, [respectReduceMotion]);
     // Effective duration (0 if reduce motion is enabled)
     const effectiveDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : duration;
+    const effectiveExitDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : (exitDuration ?? duration);
     // Memoize effect type checks to avoid repeated includes() calls
-    const effectFlags = useMemo(() => ({
-        hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect),
-        hasRotate: ['rotate', 'rotateScale'].includes(effect),
-        hasFlip: effect === 'flip',
-        hasTranslateX: ['slideLeft', 'slideRight'].includes(effect),
-        hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(effect),
-        hasRotateEffect: ['rotate', 'rotateScale', 'flip'].includes(effect),
-    }), [effect]);
+    const effectFlags = useMemo(() => getEffectFlags(effect), [effect]);
+    // Exit effect flags (use exitEffect if specified, otherwise same as enter effect)
+    const exitEffectFlags = useMemo(() => exitEffect ? getEffectFlags(exitEffect) : effectFlags, [exitEffect, effectFlags]);
     // Memoize interpolations to avoid recreating on every render
     const rotateInterpolation = useMemo(() => rotate.interpolate({
         inputRange: [-360, 0, 360],
@@ -86,60 +226,102 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         if (toVisible && onAnimationStart) {
             onAnimationStart();
         }
-        const easingFn = getEasing(easing);
+        // Determine which effect settings to use based on direction
+        const currentEffect = toVisible ? effect : (exitEffect ?? effect);
+        const currentDuration = toVisible ? effectiveDuration : effectiveExitDuration;
+        const currentEasing = toVisible ? easing : (exitEasing ?? easing);
+        const currentDelay = toVisible ? delay : exitDelay;
+        const currentFlags = toVisible ? effectFlags : exitEffectFlags;
+        const easingFn = getEasing(currentEasing);
         // When skeleton is false, we animate height which doesn't support native driver
         // So we must use JS driver for all animations in that case
         const useNative = skeleton;
-        const config = {
-            duration: effectiveDuration,
+        // Spring configuration
+        const springConf = {
+            tension: springConfig?.tension ?? 100,
+            friction: springConfig?.friction ?? 10,
+            speed: springConfig?.speed,
+            bounciness: springConfig?.bounciness,
+            useNativeDriver: useNative,
+        };
+        const timingConfig = {
+            duration: currentDuration,
             easing: easingFn,
             useNativeDriver: useNative,
         };
+        // Helper to create animation (spring or timing)
+        const createAnimation = (value, toValue, customEasing) => {
+            if (useSpring) {
+                return Animated.spring(value, {
+                    toValue,
+                    ...springConf,
+                });
+            }
+            return Animated.timing(value, {
+                toValue,
+                ...timingConfig,
+                ...(customEasing ? { easing: customEasing } : {}),
+            });
+        };
         const animations = [];
-        // Opacity animation
+        // Opacity animation (always use timing for opacity for smoother fade)
         animations.push(Animated.timing(opacity, {
             toValue: toVisible ? 1 : 0,
-            ...config,
+            ...timingConfig,
         }));
         // Scale animation
-        if (effectFlags.hasScale) {
-            const targetScale = toVisible ? 1 : getInitialScale(effect);
-            animations.push(Animated.timing(scale, {
-                toValue: targetScale,
-                ...config,
-                easing: effect === 'bounce' ? Easing.bounce : easingFn,
-            }));
+        if (currentFlags.hasScale) {
+            const targetScale = toVisible ? 1 : getInitialScaleValue(currentEffect);
+            // Special easing for different effects
+            let scaleEasing = easingFn;
+            if (currentEffect === 'bounce') {
+                scaleEasing = Easing.bounce;
+            }
+            else if (currentEffect === 'elastic') {
+                scaleEasing = Easing.elastic(1.5);
+            }
+            else if (currentEffect === 'pulse') {
+                scaleEasing = Easing.out(Easing.back(3));
+            }
+            animations.push(createAnimation(scale, targetScale, scaleEasing));
         }
         // Rotate animation
-        if (effectFlags.hasRotate || effectFlags.hasFlip) {
-            const targetRotate = toVisible ? 0 : getInitialRotate(effect);
-            animations.push(Animated.timing(rotate, {
-                toValue: targetRotate,
-                ...config,
-            }));
+        if (currentFlags.hasRotate || currentFlags.hasFlip) {
+            const targetRotate = toVisible ? 0 : getInitialRotateValue(currentEffect);
+            // Special easing for swing and wobble
+            let rotateEasing = easingFn;
+            if (currentEffect === 'swing') {
+                rotateEasing = Easing.elastic(1.2);
+            }
+            else if (currentEffect === 'wobble') {
+                rotateEasing = Easing.elastic(1.5);
+            }
+            animations.push(createAnimation(rotate, targetRotate, rotateEasing));
         }
         // TranslateX animation
-        if (effectFlags.hasTranslateX) {
-            const targetX = toVisible ? 0 : getInitialTranslateX(effect);
-            animations.push(Animated.timing(translateX, {
-                toValue: targetX,
-                ...config,
-            }));
+        if (currentFlags.hasTranslateX) {
+            const targetX = toVisible ? 0 : getInitialTranslateXValue(currentEffect);
+            // Special easing for shake and wobble
+            let translateXEasing = easingFn;
+            if (currentEffect === 'shake') {
+                translateXEasing = Easing.elastic(3);
+            }
+            else if (currentEffect === 'wobble') {
+                translateXEasing = Easing.elastic(1.5);
+            }
+            animations.push(createAnimation(translateX, targetX, translateXEasing));
         }
         // TranslateY animation
-        if (effectFlags.hasTranslateY) {
-            const targetY = toVisible ? 0 : getInitialTranslateY(effect);
-            animations.push(Animated.timing(translateY, {
-                toValue: targetY,
-                ...config,
-            }));
+        if (currentFlags.hasTranslateY) {
+            const targetY = toVisible ? 0 : getInitialTranslateYValue(currentEffect);
+            animations.push(createAnimation(translateY, targetY));
         }
-        // Height animation for non-skeleton mode
+        // Height animation for non-skeleton mode (always use timing)
         if (!skeleton && measuredHeight !== null) {
             const targetHeight = toVisible ? measuredHeight : 0;
             animations.push(Animated.timing(animatedHeight, {
                 toValue: targetHeight,
-                duration: effectiveDuration,
+                duration: currentDuration,
                 easing: easingFn,
                 useNativeDriver: false,
             }));
@@ -148,20 +330,20 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         const parallelAnimation = Animated.parallel(animations);
         // Reset values function for looping
         const resetValues = () => {
-            opacity.setValue(0);
-            scale.setValue(getInitialScale(effect));
-            rotate.setValue(getInitialRotate(effect));
-            translateX.setValue(getInitialTranslateX(effect));
-            translateY.setValue(getInitialTranslateY(effect));
+            opacity.setValue(getInitialOpacityValue());
+            scale.setValue(getInitialScaleValue(effect));
+            rotate.setValue(getInitialRotateValue(effect));
+            translateX.setValue(getInitialTranslateXValue(effect));
+            translateY.setValue(getInitialTranslateYValue(effect));
             if (!skeleton && measuredHeight !== null) {
                 animatedHeight.setValue(0);
             }
         };
         // Build the animation sequence
         let animation;
-        if (delay > 0) {
+        if (currentDelay > 0) {
             animation = Animated.sequence([
-                Animated.delay(delay),
+                Animated.delay(currentDelay),
                 parallelAnimation,
             ]);
         }
@@ -230,9 +412,14 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     }, [
         delay,
         effectiveDuration,
+        effectiveExitDuration,
         easing,
         effect,
         effectFlags,
+        exitEffect,
+        exitEffectFlags,
+        exitEasing,
+        exitDelay,
         measuredHeight,
         onAnimationComplete,
         onAnimationStart,
@@ -245,6 +432,8 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         animatedHeight,
         loop,
         loopDelay,
+        useSpring,
+        springConfig,
     ]);
     // Handle initial mount animation
     useEffect(() => {
@@ -270,11 +459,33 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             }
         };
     }, []);
+    // Calculate anchor point offset (using 100px as base size for skeleton mode)
+    const anchorOffset = useMemo(() => {
+        const offset = getAnchorPointOffset(anchorPoint);
+        // Use measured height if available, otherwise use 100px as base
+        const baseSize = measuredHeight ?? 100;
+        return {
+            x: offset.x * baseSize,
+            y: offset.y * baseSize,
+        };
+    }, [anchorPoint, measuredHeight]);
     // Memoize transform array to avoid recreating on every render
     // IMPORTANT: All hooks must be called before any conditional returns
     const transform = useMemo(() => {
         const { hasScale, hasRotate, hasFlip, hasTranslateX, hasTranslateY } = effectFlags;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const transforms = [];
+        const needsAnchorOffset = anchorPoint !== 'center' && (hasScale || hasRotate || hasFlip);
+        // Step 1: Move to anchor point (negative offset)
+        if (needsAnchorOffset) {
+            if (anchorOffset.x !== 0) {
+                transforms.push({ translateX: -anchorOffset.x });
+            }
+            if (anchorOffset.y !== 0) {
+                transforms.push({ translateY: -anchorOffset.y });
+            }
+        }
+        // Step 2: Apply scale/rotate transforms
         if (hasScale) {
             transforms.push({ scale });
         }
@@ -284,6 +495,16 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         if (hasFlip) {
             transforms.push({ rotateY: flipInterpolation });
         }
+        // Step 3: Move back from anchor point (positive offset)
+        if (needsAnchorOffset) {
+            if (anchorOffset.x !== 0) {
+                transforms.push({ translateX: anchorOffset.x });
+            }
+            if (anchorOffset.y !== 0) {
+                transforms.push({ translateY: anchorOffset.y });
+            }
+        }
+        // Step 4: Apply other translate transforms
         if (hasTranslateX) {
             transforms.push({ translateX });
         }
@@ -291,7 +512,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             transforms.push({ translateY });
         }
         return transforms.length > 0 ? transforms : undefined;
-    }, [effectFlags, scale, rotateInterpolation, flipInterpolation, translateX, translateY]);
+    }, [effectFlags, scale, rotateInterpolation, flipInterpolation, translateX, translateY, anchorPoint, anchorOffset]);
     // Memoize animated style
     const animatedStyle = useMemo(() => ({
         opacity,
@@ -313,13 +534,17 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     }
     return (_jsx(Animated.View, { style: [styles.container, style, containerAnimatedStyle], testID: testID, children: _jsx(Animated.View, { style: animatedStyle, children: children }) }));
 }
+// Memoize PuffPop to prevent unnecessary re-renders
+export const PuffPop = memo(PuffPopComponent, arePuffPopPropsEqual);
 /**
  * Get initial scale value based on effect
  */
-function getInitialScale(effect) {
+function getInitialScale(effect, _reverse = false) {
+    // Scale doesn't change with reverse (parameter kept for consistent API)
     switch (effect) {
         case 'scale':
         case 'rotateScale':
+        case 'elastic':
             return 0;
         case 'bounce':
             return 0.3;
@@ -327,6 +552,8 @@ function getInitialScale(effect) {
             return 0.5;
         case 'flip':
             return 0.8;
+        case 'pulse':
+            return 0.6;
         default:
             return 1;
     }
@@ -334,14 +561,19 @@ function getInitialScale(effect) {
 /**
  * Get initial rotate value based on effect
  */
-function getInitialRotate(effect) {
+function getInitialRotate(effect, reverse = false) {
+    const multiplier = reverse ? -1 : 1;
     switch (effect) {
         case 'rotate':
-            return -360;
+            return -360 * multiplier;
         case 'rotateScale':
-            return -180;
+            return -180 * multiplier;
         case 'flip':
-            return -180;
+            return -180 * multiplier;
+        case 'swing':
+            return -15 * multiplier;
+        case 'wobble':
+            return -5 * multiplier;
         default:
             return 0;
     }
@@ -349,12 +581,17 @@ function getInitialRotate(effect) {
 /**
  * Get initial translateX value based on effect
  */
-function getInitialTranslateX(effect) {
+function getInitialTranslateX(effect, reverse = false) {
+    const multiplier = reverse ? -1 : 1;
     switch (effect) {
         case 'slideLeft':
-            return 100;
+            return 100 * multiplier;
         case 'slideRight':
-            return -100;
+            return -100 * multiplier;
+        case 'shake':
+            return -10 * multiplier;
+        case 'wobble':
+            return -25 * multiplier;
         default:
             return 0;
     }
@@ -362,14 +599,15 @@ function getInitialTranslateX(effect) {
 /**
  * Get initial translateY value based on effect
  */
-function getInitialTranslateY(effect) {
+function getInitialTranslateY(effect, reverse = false) {
+    const multiplier = reverse ? -1 : 1;
     switch (effect) {
         case 'slideUp':
-            return 50;
+            return 50 * multiplier;
         case 'slideDown':
-            return -50;
+            return -50 * multiplier;
         case 'bounce':
-            return 30;
+            return 30 * multiplier;
         default:
             return 0;
     }
@@ -386,6 +624,68 @@ const styles = StyleSheet.create({
     },
     groupContainer: {},
 });
+/**
+ * Props comparison function for PuffPopGroup memoization
+ * Performs shallow comparison of props to prevent unnecessary re-renders
+ */
+function arePuffPopGroupPropsEqual(prevProps, nextProps) {
+    // Compare primitive props
+    if (prevProps.effect !== nextProps.effect ||
+        prevProps.duration !== nextProps.duration ||
+        prevProps.staggerDelay !== nextProps.staggerDelay ||
+        prevProps.initialDelay !== nextProps.initialDelay ||
+        prevProps.easing !== nextProps.easing ||
+        prevProps.skeleton !== nextProps.skeleton ||
+        prevProps.visible !== nextProps.visible ||
+        prevProps.animateOnMount !== nextProps.animateOnMount ||
+        prevProps.respectReduceMotion !== nextProps.respectReduceMotion ||
+        prevProps.testID !== nextProps.testID ||
+        prevProps.staggerDirection !== nextProps.staggerDirection ||
+        prevProps.horizontal !== nextProps.horizontal ||
+        prevProps.gap !== nextProps.gap ||
+        prevProps.reverse !== nextProps.reverse ||
+        prevProps.intensity !== nextProps.intensity ||
+        prevProps.anchorPoint !== nextProps.anchorPoint ||
+        prevProps.useSpring !== nextProps.useSpring ||
+        prevProps.exitEffect !== nextProps.exitEffect ||
+        prevProps.exitDuration !== nextProps.exitDuration ||
+        prevProps.exitEasing !== nextProps.exitEasing ||
+        prevProps.exitDelay !== nextProps.exitDelay ||
+        prevProps.exitStaggerDelay !== nextProps.exitStaggerDelay ||
+        prevProps.exitStaggerDirection !== nextProps.exitStaggerDirection ||
+        prevProps.initialOpacity !== nextProps.initialOpacity ||
+        prevProps.initialScale !== nextProps.initialScale ||
+        prevProps.initialRotate !== nextProps.initialRotate ||
+        prevProps.initialTranslateX !== nextProps.initialTranslateX ||
+        prevProps.initialTranslateY !== nextProps.initialTranslateY) {
+        return false;
+    }
+    // Compare springConfig object (shallow)
+    if (prevProps.springConfig !== nextProps.springConfig) {
+        if (!prevProps.springConfig ||
+            !nextProps.springConfig ||
+            prevProps.springConfig.tension !== nextProps.springConfig.tension ||
+            prevProps.springConfig.friction !== nextProps.springConfig.friction ||
+            prevProps.springConfig.speed !== nextProps.springConfig.speed ||
+            prevProps.springConfig.bounciness !== nextProps.springConfig.bounciness) {
+            return false;
+        }
+    }
+    // Compare callbacks
+    if (prevProps.onAnimationStart !== nextProps.onAnimationStart ||
+        prevProps.onAnimationComplete !== nextProps.onAnimationComplete) {
+        return false;
+    }
+    // Style comparison
+    if (prevProps.style !== nextProps.style) {
+        return false;
+    }
+    // Children comparison - if children change, re-render
+    if (prevProps.children !== nextProps.children) {
+        return false;
+    }
+    return true;
+}
 /**
  * PuffPopGroup - Animate multiple children with staggered entrance effects
  *
@@ -398,7 +698,19 @@ const styles = StyleSheet.create({
  * </PuffPopGroup>
  * ```
  */
-export function PuffPopGroup({ children, effect = 'scale', duration = 400, staggerDelay = 100, initialDelay = 0, easing = 'easeOut', skeleton = true, visible = true, animateOnMount = true, onAnimationComplete, onAnimationStart, style, respectReduceMotion = true, testID, staggerDirection = 'forward', horizontal = false, gap, }) {
+function PuffPopGroupComponent({ children, effect = 'scale', duration = 400, staggerDelay = 100, initialDelay = 0, easing = 'easeOut', skeleton = true, visible = true, animateOnMount = true, onAnimationComplete, onAnimationStart, style, respectReduceMotion = true, testID, staggerDirection = 'forward', horizontal = false, gap, 
+// Custom initial values
+initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, 
+// Reverse mode
+reverse, 
+// Animation intensity
+intensity, 
+// Anchor point
+anchorPoint, 
+// Spring animation
+useSpring, springConfig, 
+// Exit animation settings
+exitEffect, exitDuration, exitEasing, exitDelay, exitStaggerDelay = 0, exitStaggerDirection = 'reverse', }) {
     const childArray = Children.toArray(children);
     const childCount = childArray.length;
     const completedCount = useRef(0);
@@ -427,6 +739,34 @@ export function PuffPopGroup({ children, effect = 'scale', duration = 400, stagg
         }
         return initialDelay + delayIndex * staggerDelay;
     }, [childCount, initialDelay, staggerDelay, staggerDirection]);
+    // Calculate exit delay for each child based on exit stagger direction
+    const getChildExitDelay = useCallback((index) => {
+        if (exitStaggerDelay === 0) {
+            return exitDelay ?? 0;
+        }
+        let delayIndex;
+        switch (exitStaggerDirection) {
+            case 'forward':
+                delayIndex = index;
+                break;
+            case 'center': {
+                const center = (childCount - 1) / 2;
+                delayIndex = Math.abs(index - center);
+                break;
+            }
+            case 'edges': {
+                const center = (childCount - 1) / 2;
+                delayIndex = center - Math.abs(index - center);
+                break;
+            }
+            case 'reverse':
+            default:
+                // Reverse is default for exit (last in, first out)
+                delayIndex = childCount - 1 - index;
+                break;
+        }
+        return (exitDelay ?? 0) + delayIndex * exitStaggerDelay;
+    }, [childCount, exitDelay, exitStaggerDelay, exitStaggerDirection]);
     // Handle individual child animation complete
     const handleChildComplete = useCallback(() => {
         completedCount.current += 1;
@@ -457,6 +797,8 @@ export function PuffPopGroup({ children, effect = 'scale', duration = 400, stagg
         }
         return baseStyle;
     }, [horizontal, gap]);
-    return (_jsx(View, { style: [styles.groupContainer, containerStyle, style], testID: testID, children: childArray.map((child, index) => (_jsx(PuffPop, { effect: effect, duration: duration, delay: getChildDelay(index), easing: easing, skeleton: skeleton, visible: visible, animateOnMount: animateOnMount, onAnimationComplete: handleChildComplete, onAnimationStart: index === 0 ? handleChildStart : undefined, respectReduceMotion: respectReduceMotion, children: child }, index))) }));
+    return (_jsx(View, { style: [styles.groupContainer, containerStyle, style], testID: testID, children: childArray.map((child, index) => (_jsx(PuffPop, { effect: effect, duration: duration, delay: getChildDelay(index), easing: easing, skeleton: skeleton, visible: visible, animateOnMount: animateOnMount, onAnimationComplete: handleChildComplete, onAnimationStart: index === 0 ? handleChildStart : undefined, respectReduceMotion: respectReduceMotion, initialOpacity: initialOpacity, initialScale: initialScale, initialRotate: initialRotate, initialTranslateX: initialTranslateX, initialTranslateY: initialTranslateY, reverse: reverse, intensity: intensity, anchorPoint: anchorPoint, useSpring: useSpring, springConfig: springConfig, exitEffect: exitEffect, exitDuration: exitDuration, exitEasing: exitEasing, exitDelay: getChildExitDelay(index), children: child }, index))) }));
 }
+// Memoize PuffPopGroup to prevent unnecessary re-renders
+export const PuffPopGroup = memo(PuffPopGroupComponent, arePuffPopGroupPropsEqual);
 export default PuffPop;