react-native-puff-pop 1.0.7 → 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,10 +22,116 @@ 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
@@ -33,7 +139,11 @@ initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslate
 // Reverse mode
 reverse = false, 
 // Animation intensity
-intensity = 1, }) {
+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
@@ -90,19 +200,10 @@ intensity = 1, }) {
     // Effective duration (0 if reduce motion is enabled)
     const effectiveDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : duration;
     const effectiveExitDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : (exitDuration ?? duration);
-    // Helper to get effect flags for any effect type
-    const getEffectFlags = useCallback((eff) => ({
-        hasScale: ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(eff),
-        hasRotate: ['rotate', 'rotateScale'].includes(eff),
-        hasFlip: eff === 'flip',
-        hasTranslateX: ['slideLeft', 'slideRight'].includes(eff),
-        hasTranslateY: ['slideUp', 'slideDown', 'bounce'].includes(eff),
-        hasRotateEffect: ['rotate', 'rotateScale', 'flip'].includes(eff),
-    }), []);
     // Memoize effect type checks to avoid repeated includes() calls
-    const effectFlags = useMemo(() => getEffectFlags(effect), [effect, getEffectFlags]);
+    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, getEffectFlags, effectFlags]);
+    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],
@@ -135,51 +236,87 @@ intensity = 1, }) {
         // 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 = {
+        // 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 (currentFlags.hasScale) {
             const targetScale = toVisible ? 1 : getInitialScaleValue(currentEffect);
-            animations.push(Animated.timing(scale, {
-                toValue: targetScale,
-                ...config,
-                easing: currentEffect === 'bounce' ? Easing.bounce : easingFn,
-            }));
+            // 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 (currentFlags.hasRotate || currentFlags.hasFlip) {
             const targetRotate = toVisible ? 0 : getInitialRotateValue(currentEffect);
-            animations.push(Animated.timing(rotate, {
-                toValue: targetRotate,
-                ...config,
-            }));
+            // 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 (currentFlags.hasTranslateX) {
             const targetX = toVisible ? 0 : getInitialTranslateXValue(currentEffect);
-            animations.push(Animated.timing(translateX, {
-                toValue: targetX,
-                ...config,
-            }));
+            // 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 (currentFlags.hasTranslateY) {
             const targetY = toVisible ? 0 : getInitialTranslateYValue(currentEffect);
-            animations.push(Animated.timing(translateY, {
-                toValue: targetY,
-                ...config,
-            }));
+            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, {
@@ -295,6 +432,8 @@ intensity = 1, }) {
         animatedHeight,
         loop,
         loopDelay,
+        useSpring,
+        springConfig,
     ]);
     // Handle initial mount animation
     useEffect(() => {
@@ -320,11 +459,33 @@ intensity = 1, }) {
             }
         };
     }, []);
+    // 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 });
         }
@@ -334,6 +495,16 @@ intensity = 1, }) {
         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 });
         }
@@ -341,7 +512,7 @@ intensity = 1, }) {
             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,
@@ -363,6 +534,8 @@ intensity = 1, }) {
     }
     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
  */
@@ -371,6 +544,7 @@ function getInitialScale(effect, _reverse = false) {
     switch (effect) {
         case 'scale':
         case 'rotateScale':
+        case 'elastic':
             return 0;
         case 'bounce':
             return 0.3;
@@ -378,6 +552,8 @@ function getInitialScale(effect, _reverse = false) {
             return 0.5;
         case 'flip':
             return 0.8;
+        case 'pulse':
+            return 0.6;
         default:
             return 1;
     }
@@ -394,6 +570,10 @@ function getInitialRotate(effect, reverse = false) {
             return -180 * multiplier;
         case 'flip':
             return -180 * multiplier;
+        case 'swing':
+            return -15 * multiplier;
+        case 'wobble':
+            return -5 * multiplier;
         default:
             return 0;
     }
@@ -408,6 +588,10 @@ function getInitialTranslateX(effect, reverse = false) {
             return 100 * multiplier;
         case 'slideRight':
             return -100 * multiplier;
+        case 'shake':
+            return -10 * multiplier;
+        case 'wobble':
+            return -25 * multiplier;
         default:
             return 0;
     }
@@ -440,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
  *
@@ -452,15 +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, }) {
+exitEffect, exitDuration, exitEasing, exitDelay, exitStaggerDelay = 0, exitStaggerDirection = 'reverse', }) {
     const childArray = Children.toArray(children);
     const childCount = childArray.length;
     const completedCount = useRef(0);
@@ -489,6 +739,34 @@ exitEffect, exitDuration, exitEasing, exitDelay, }) {
         }
         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;
@@ -519,6 +797,8 @@ exitEffect, exitDuration, exitEasing, exitDelay, }) {
         }
         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, initialOpacity: initialOpacity, initialScale: initialScale, initialRotate: initialRotate, initialTranslateX: initialTranslateX, initialTranslateY: initialTranslateY, reverse: reverse, intensity: intensity, exitEffect: exitEffect, exitDuration: exitDuration, exitEasing: exitEasing, exitDelay: exitDelay, 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;

package/lib/typescript/src/index.d.ts

@@ -3,11 +3,42 @@ import { type StyleProp, type ViewStyle } from 'react-native';
 /**
  * Animation effect types for PuffPop
  */
-export type PuffPopEffect = 'scale' | 'rotate' | 'fade' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'bounce' | 'flip' | 'zoom' | 'rotateScale';
+export type PuffPopEffect = 'scale' | 'rotate' | 'fade' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'bounce' | 'flip' | 'zoom' | 'rotateScale' | 'shake' | 'pulse' | 'swing' | 'wobble' | 'elastic';
 /**
  * Easing function types
  */
 export type PuffPopEasing = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'spring' | 'bounce';
+/**
+ * Anchor point for scale/rotate transformations
+ * Determines the origin point of the transformation
+ */
+export type PuffPopAnchorPoint = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+/**
+ * Spring animation configuration
+ * Used when useSpring is true for physics-based animations
+ */
+export interface PuffPopSpringConfig {
+    /**
+     * Controls the spring stiffness. Higher values = faster, snappier animation
+     * @default 100
+     */
+    tension?: number;
+    /**
+     * Controls the spring damping. Higher values = less oscillation
+     * @default 10
+     */
+    friction?: number;
+    /**
+     * Animation speed multiplier
+     * @default 12
+     */
+    speed?: number;
+    /**
+     * Controls the bounciness. Higher values = more bouncy
+     * @default 8
+     */
+    bounciness?: number;
+}
 export interface PuffPopProps {
     /**
      * Children to animate
@@ -145,11 +176,32 @@ export interface PuffPopProps {
      * @default 1
      */
     intensity?: number;
+    /**
+     * Anchor point for scale/rotate transformations
+     * Determines the origin point of the transformation
+     * - 'center' = default center point
+     * - 'top', 'bottom', 'left', 'right' = edge centers
+     * - 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' = corners
+     * @default 'center'
+     */
+    anchorPoint?: PuffPopAnchorPoint;
+    /**
+     * Use spring physics-based animation instead of timing
+     * Provides more natural, bouncy animations
+     * @default false
+     */
+    useSpring?: boolean;
+    /**
+     * Spring animation configuration
+     * Only used when useSpring is true
+     */
+    springConfig?: PuffPopSpringConfig;
 }
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, onAnimationStart, style, animateOnMount, loop, loopDelay, respectReduceMotion, testID, exitEffect, exitDuration, exitEasing, exitDelay, initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, reverse, intensity, }: PuffPopProps): ReactElement;
+declare function PuffPopComponent({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, onAnimationStart, style, animateOnMount, loop, loopDelay, respectReduceMotion, testID, exitEffect, exitDuration, exitEasing, exitDelay, initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, reverse, intensity, anchorPoint, useSpring, springConfig, }: PuffPopProps): ReactElement;
+export declare const PuffPop: import("react").MemoExoticComponent<typeof PuffPopComponent>;
 /**
  * Props for PuffPopGroup component
  */
@@ -268,6 +320,20 @@ export interface PuffPopGroupProps {
      * @default 1
      */
     intensity?: number;
+    /**
+     * Anchor point for scale/rotate transformations for all children
+     * @default 'center'
+     */
+    anchorPoint?: PuffPopAnchorPoint;
+    /**
+     * Use spring physics-based animation for all children
+     * @default false
+     */
+    useSpring?: boolean;
+    /**
+     * Spring animation configuration for all children
+     */
+    springConfig?: PuffPopSpringConfig;
     /**
      * Animation effect type when hiding (exit animation) for all children
      * If not specified, uses the reverse of the enter effect
@@ -288,6 +354,21 @@ export interface PuffPopGroupProps {
      * @default 0
      */
     exitDelay?: number;
+    /**
+     * Delay between each child's exit animation start in milliseconds
+     * If not specified, all children exit simultaneously
+     * @default 0
+     */
+    exitStaggerDelay?: number;
+    /**
+     * Direction of exit stagger animation
+     * - 'forward': First to last child
+     * - 'reverse': Last to first child (most natural for exit)
+     * - 'center': From center outward
+     * - 'edges': From edges toward center
+     * @default 'reverse'
+     */
+    exitStaggerDirection?: 'forward' | 'reverse' | 'center' | 'edges';
 }
 /**
  * PuffPopGroup - Animate multiple children with staggered entrance effects
@@ -301,5 +382,6 @@ export interface PuffPopGroupProps {
  * </PuffPopGroup>
  * ```
  */
-export declare function PuffPopGroup({ children, effect, duration, staggerDelay, initialDelay, easing, skeleton, visible, animateOnMount, onAnimationComplete, onAnimationStart, style, respectReduceMotion, testID, staggerDirection, horizontal, gap, initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, reverse, intensity, exitEffect, exitDuration, exitEasing, exitDelay, }: PuffPopGroupProps): ReactElement;
+declare function PuffPopGroupComponent({ children, effect, duration, staggerDelay, initialDelay, easing, skeleton, visible, animateOnMount, onAnimationComplete, onAnimationStart, style, respectReduceMotion, testID, staggerDirection, horizontal, gap, initialOpacity, initialScale, initialRotate, initialTranslateX, initialTranslateY, reverse, intensity, anchorPoint, useSpring, springConfig, exitEffect, exitDuration, exitEasing, exitDelay, exitStaggerDelay, exitStaggerDirection, }: PuffPopGroupProps): ReactElement;
+export declare const PuffPopGroup: import("react").MemoExoticComponent<typeof PuffPopGroupComponent>;
 export default PuffPop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-puff-pop",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A React Native animation library for revealing children components with beautiful puff and pop effects",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",