react-native-puff-pop 1.0.6 → 1.0.8

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
@@ -83,11 +114,94 @@ export interface PuffPopProps {
      * Test ID for testing purposes
      */
     testID?: string;
+    /**
+     * Animation effect type when hiding (exit animation)
+     * If not specified, uses the reverse of the enter effect
+     */
+    exitEffect?: PuffPopEffect;
+    /**
+     * Animation duration for exit animation in milliseconds
+     * If not specified, uses the same duration as enter animation
+     */
+    exitDuration?: number;
+    /**
+     * Easing function for exit animation
+     * If not specified, uses the same easing as enter animation
+     */
+    exitEasing?: PuffPopEasing;
+    /**
+     * Delay before exit animation starts in milliseconds
+     * @default 0
+     */
+    exitDelay?: number;
+    /**
+     * Custom initial opacity value (0-1)
+     * Overrides the default initial opacity for the effect
+     */
+    initialOpacity?: number;
+    /**
+     * Custom initial scale value
+     * Overrides the default initial scale for effects like 'scale', 'zoom', 'bounce'
+     */
+    initialScale?: number;
+    /**
+     * Custom initial rotation value in degrees
+     * Overrides the default initial rotation for effects like 'rotate', 'rotateScale'
+     */
+    initialRotate?: number;
+    /**
+     * Custom initial translateX value in pixels
+     * Overrides the default initial translateX for effects like 'slideLeft', 'slideRight'
+     */
+    initialTranslateX?: number;
+    /**
+     * Custom initial translateY value in pixels
+     * Overrides the default initial translateY for effects like 'slideUp', 'slideDown'
+     */
+    initialTranslateY?: number;
+    /**
+     * If true, reverses the animation direction
+     * - slideUp becomes slide from top
+     * - slideLeft becomes slide from left
+     * - rotate spins clockwise instead of counter-clockwise
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Animation intensity multiplier (0-1)
+     * Controls how far/much elements move during animation
+     * - 1 = full animation (default)
+     * - 0.5 = half the movement distance
+     * - 0 = no movement (instant appear)
+     * @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, }: 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
  */
@@ -175,6 +289,86 @@ export interface PuffPopGroupProps {
      * Gap between children (uses flexbox gap)
      */
     gap?: number;
+    /**
+     * Custom initial opacity value (0-1) for all children
+     */
+    initialOpacity?: number;
+    /**
+     * Custom initial scale value for all children
+     */
+    initialScale?: number;
+    /**
+     * Custom initial rotation value in degrees for all children
+     */
+    initialRotate?: number;
+    /**
+     * Custom initial translateX value in pixels for all children
+     */
+    initialTranslateX?: number;
+    /**
+     * Custom initial translateY value in pixels for all children
+     */
+    initialTranslateY?: number;
+    /**
+     * If true, reverses the animation direction for all children
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Animation intensity multiplier (0-1) for all children
+     * Controls how far/much elements move during animation
+     * @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
+     */
+    exitEffect?: PuffPopEffect;
+    /**
+     * Animation duration for exit animation in milliseconds for all children
+     * If not specified, uses the same duration as enter animation
+     */
+    exitDuration?: number;
+    /**
+     * Easing function for exit animation for all children
+     * If not specified, uses the same easing as enter animation
+     */
+    exitEasing?: PuffPopEasing;
+    /**
+     * Delay before exit animation starts in milliseconds
+     * @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
@@ -188,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, }: 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.6",
+  "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",