react-native-puff-pop 1.0.1 → 1.0.2

package/LICENSE

@@ -20,3 +20,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+

package/README.md

@@ -133,6 +133,25 @@ function App() {
 }
 ```
 
+### Loop Animation
+
+```tsx
+// Loop infinitely
+<PuffPop effect="rotate" loop={true}>
+  <LoadingSpinner />
+</PuffPop>
+
+// Loop 3 times
+<PuffPop effect="bounce" loop={3}>
+  <NotificationBadge />
+</PuffPop>
+
+// Loop with delay between iterations
+<PuffPop effect="scale" loop={true} loopDelay={500}>
+  <PulsingDot />
+</PuffPop>
+```
+
 ## Props
 
 | Prop | Type | Default | Description |
@@ -147,6 +166,8 @@ function App() {
 | `animateOnMount` | `boolean` | `true` | Animate when component mounts |
 | `onAnimationComplete` | `() => void` | - | Callback when animation completes |
 | `style` | `ViewStyle` | - | Custom container style |
+| `loop` | `boolean \| number` | `false` | Loop animation (true=infinite, number=times) |
+| `loopDelay` | `number` | `0` | Delay between loop iterations in ms |
 
 ### Animation Effects (`PuffPopEffect`)
 

package/lib/module/index.js

@@ -25,7 +25,7 @@ function getEasing(type) {
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0, easing = 'easeOut', skeleton = true, visible = true, onAnimationComplete, style, animateOnMount = true, }) {
+export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0, easing = 'easeOut', skeleton = true, visible = true, onAnimationComplete, style, animateOnMount = true, loop = false, loopDelay = 0, }) {
     // Animation values
     const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
     const scale = useRef(new Animated.Value(animateOnMount ? getInitialScale(effect) : 1)).current;
@@ -36,6 +36,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     const [measuredHeight, setMeasuredHeight] = useState(null);
     const animatedHeight = useRef(new Animated.Value(0)).current;
     const hasAnimated = useRef(false);
+    const loopAnimationRef = useRef(null);
     // Handle layout measurement for non-skeleton mode
     const onLayout = useCallback((event) => {
         if (!skeleton && measuredHeight === null) {
@@ -105,18 +106,66 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         }
         // Run animations with delay
         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));
+            if (!skeleton && measuredHeight !== null) {
+                animatedHeight.setValue(0);
+            }
+        };
+        // Build the animation sequence
+        let animation;
         if (delay > 0) {
-            Animated.sequence([
+            animation = Animated.sequence([
                 Animated.delay(delay),
                 parallelAnimation,
-            ]).start(() => {
-                if (toVisible && onAnimationComplete) {
-                    onAnimationComplete();
-                }
-            });
+            ]);
         }
         else {
-            parallelAnimation.start(() => {
+            animation = parallelAnimation;
+        }
+        // Handle loop option
+        if (toVisible && loop) {
+            // Stop any existing loop animation
+            if (loopAnimationRef.current) {
+                loopAnimationRef.current.stop();
+            }
+            const loopCount = typeof loop === 'number' ? loop : -1;
+            let currentIteration = 0;
+            const runLoop = () => {
+                resetValues();
+                animation.start(({ finished }) => {
+                    if (finished) {
+                        currentIteration++;
+                        if (loopCount === -1 || currentIteration < loopCount) {
+                            // Add delay between loops if specified
+                            if (loopDelay > 0) {
+                                setTimeout(runLoop, loopDelay);
+                            }
+                            else {
+                                runLoop();
+                            }
+                        }
+                        else if (onAnimationComplete) {
+                            onAnimationComplete();
+                        }
+                    }
+                });
+            };
+            // Store reference and start
+            runLoop();
+        }
+        else {
+            // Stop any existing loop animation
+            if (loopAnimationRef.current) {
+                loopAnimationRef.current.stop();
+                loopAnimationRef.current = null;
+            }
+            animation.start(() => {
                 if (toVisible && onAnimationComplete) {
                     onAnimationComplete();
                 }
@@ -136,6 +185,8 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         translateX,
         translateY,
         animatedHeight,
+        loop,
+        loopDelay,
     ]);
     // Handle initial mount animation
     useEffect(() => {
@@ -150,6 +201,14 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             animate(visible);
         }
     }, [visible, animate]);
+    // Cleanup loop animation on unmount
+    useEffect(() => {
+        return () => {
+            if (loopAnimationRef.current) {
+                loopAnimationRef.current.stop();
+            }
+        };
+    }, []);
     // For non-skeleton mode, measure first
     if (!skeleton && measuredHeight === null) {
         return (_jsx(View, { style: styles.measureContainer, onLayout: onLayout, children: _jsx(View, { style: styles.hidden, children: children }) }));

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

@@ -57,9 +57,21 @@ export interface PuffPopProps {
      * @default true
      */
     animateOnMount?: boolean;
+    /**
+     * Loop the animation
+     * - true: loop infinitely
+     * - number: loop specific number of times
+     * @default false
+     */
+    loop?: boolean | number;
+    /**
+     * Delay between loop iterations in milliseconds
+     * @default 0
+     */
+    loopDelay?: number;
 }
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, style, animateOnMount, }: PuffPopProps): ReactElement;
+export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, style, animateOnMount, loop, loopDelay, }: PuffPopProps): ReactElement;
 export default PuffPop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-puff-pop",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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",

package/src/index.tsx

@@ -101,6 +101,20 @@ export interface PuffPopProps {
    * @default true
    */
   animateOnMount?: boolean;
+
+  /**
+   * Loop the animation
+   * - true: loop infinitely
+   * - number: loop specific number of times
+   * @default false
+   */
+  loop?: boolean | number;
+
+  /**
+   * Delay between loop iterations in milliseconds
+   * @default 0
+   */
+  loopDelay?: number;
 }
 
 /**
@@ -139,6 +153,8 @@ export function PuffPop({
   onAnimationComplete,
   style,
   animateOnMount = true,
+  loop = false,
+  loopDelay = 0,
 }: PuffPopProps): ReactElement {
   // Animation values
   const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
@@ -151,6 +167,7 @@ export function PuffPop({
   const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const hasAnimated = useRef(false);
+  const loopAnimationRef = useRef<Animated.CompositeAnimation | null>(null);
 
   // Handle layout measurement for non-skeleton mode
   const onLayout = useCallback(
@@ -246,18 +263,70 @@ export function PuffPop({
 
       // Run animations with delay
       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));
+        if (!skeleton && measuredHeight !== null) {
+          animatedHeight.setValue(0);
+        }
+      };
+
+      // Build the animation sequence
+      let animation: Animated.CompositeAnimation;
       
       if (delay > 0) {
-        Animated.sequence([
+        animation = Animated.sequence([
           Animated.delay(delay),
           parallelAnimation,
-        ]).start(() => {
-          if (toVisible && onAnimationComplete) {
-            onAnimationComplete();
-          }
-        });
+        ]);
+      } else {
+        animation = parallelAnimation;
+      }
+
+      // Handle loop option
+      if (toVisible && loop) {
+        // Stop any existing loop animation
+        if (loopAnimationRef.current) {
+          loopAnimationRef.current.stop();
+        }
+
+        const loopCount = typeof loop === 'number' ? loop : -1;
+        let currentIteration = 0;
+
+        const runLoop = () => {
+          resetValues();
+          animation.start(({ finished }) => {
+            if (finished) {
+              currentIteration++;
+              if (loopCount === -1 || currentIteration < loopCount) {
+                // Add delay between loops if specified
+                if (loopDelay > 0) {
+                  setTimeout(runLoop, loopDelay);
+                } else {
+                  runLoop();
+                }
+              } else if (onAnimationComplete) {
+                onAnimationComplete();
+              }
+            }
+          });
+        };
+
+        // Store reference and start
+        runLoop();
       } else {
-        parallelAnimation.start(() => {
+        // Stop any existing loop animation
+        if (loopAnimationRef.current) {
+          loopAnimationRef.current.stop();
+          loopAnimationRef.current = null;
+        }
+
+        animation.start(() => {
           if (toVisible && onAnimationComplete) {
             onAnimationComplete();
           }
@@ -278,6 +347,8 @@ export function PuffPop({
       translateX,
       translateY,
       animatedHeight,
+      loop,
+      loopDelay,
     ]
   );
 
@@ -296,6 +367,15 @@ export function PuffPop({
     }
   }, [visible, animate]);
 
+  // Cleanup loop animation on unmount
+  useEffect(() => {
+    return () => {
+      if (loopAnimationRef.current) {
+        loopAnimationRef.current.stop();
+      }
+    };
+  }, []);
+
   // For non-skeleton mode, measure first
   if (!skeleton && measuredHeight === null) {
     return (