react-native-puff-pop 1.0.2 → 1.0.4

package/README.md

@@ -164,10 +164,13 @@ function App() {
 | `skeleton` | `boolean` | `true` | Reserve space before animation |
 | `visible` | `boolean` | `true` | Control visibility |
 | `animateOnMount` | `boolean` | `true` | Animate when component mounts |
+| `onAnimationStart` | `() => void` | - | Callback when animation starts |
 | `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 |
+| `respectReduceMotion` | `boolean` | `true` | Respect system reduce motion setting |
+| `testID` | `string` | - | Test ID for testing purposes |
 
 ### Animation Effects (`PuffPopEffect`)
 
@@ -204,6 +207,22 @@ The component reserves its full space immediately, and only the visual appearanc
 ### `skeleton={false}`
 The component's height starts at 0 and expands during animation, pushing other content below it. This creates a more dynamic entrance effect.
 
+## Accessibility
+
+PuffPop respects the system's "Reduce Motion" accessibility setting by default. When users have enabled reduce motion in their device settings, animations will be instant (0 duration) to avoid discomfort.
+
+```tsx
+// Respect reduce motion setting (default)
+<PuffPop respectReduceMotion={true}>
+  <YourComponent />
+</PuffPop>
+
+// Ignore reduce motion setting (always animate)
+<PuffPop respectReduceMotion={false}>
+  <YourComponent />
+</PuffPop>
+```
+
 ## License
 
 MIT

package/lib/module/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useCallback, } from 'react';
-import { View, Animated, StyleSheet, Easing, } from 'react-native';
+import { useEffect, useRef, useState, useCallback, useMemo, } from 'react';
+import { View, Animated, StyleSheet, Easing, AccessibilityInfo, } from 'react-native';
 /**
  * Get easing function based on type
  */
@@ -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, loop = false, loopDelay = 0, }) {
+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, }) {
     // Animation values
     const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
     const scale = useRef(new Animated.Value(animateOnMount ? getInitialScale(effect) : 1)).current;
@@ -37,6 +37,42 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     const animatedHeight = useRef(new Animated.Value(0)).current;
     const hasAnimated = useRef(false);
     const loopAnimationRef = useRef(null);
+    const loopTimeoutRef = useRef(null);
+    // Reduce motion accessibility support
+    const [isReduceMotionEnabled, setIsReduceMotionEnabled] = useState(false);
+    useEffect(() => {
+        if (!respectReduceMotion)
+            return;
+        const checkReduceMotion = async () => {
+            const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled();
+            setIsReduceMotionEnabled(reduceMotion);
+        };
+        checkReduceMotion();
+        const subscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setIsReduceMotionEnabled);
+        return () => {
+            subscription.remove();
+        };
+    }, [respectReduceMotion]);
+    // Effective duration (0 if reduce motion is enabled)
+    const effectiveDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : 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]);
+    // Memoize interpolations to avoid recreating on every render
+    const rotateInterpolation = useMemo(() => rotate.interpolate({
+        inputRange: [-360, 0, 360],
+        outputRange: ['-360deg', '0deg', '360deg'],
+    }), [rotate]);
+    const flipInterpolation = useMemo(() => rotate.interpolate({
+        inputRange: [-180, 0],
+        outputRange: ['-180deg', '0deg'],
+    }), [rotate]);
     // Handle layout measurement for non-skeleton mode
     const onLayout = useCallback((event) => {
         if (!skeleton && measuredHeight === null) {
@@ -46,12 +82,16 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
     }, [skeleton, measuredHeight]);
     // Animate function
     const animate = useCallback((toVisible) => {
+        // Call onAnimationStart callback
+        if (toVisible && onAnimationStart) {
+            onAnimationStart();
+        }
         const easingFn = getEasing(easing);
         // 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,
+            duration: effectiveDuration,
             easing: easingFn,
             useNativeDriver: useNative,
         };
@@ -62,7 +102,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             ...config,
         }));
         // Scale animation
-        if (['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect)) {
+        if (effectFlags.hasScale) {
             const targetScale = toVisible ? 1 : getInitialScale(effect);
             animations.push(Animated.timing(scale, {
                 toValue: targetScale,
@@ -71,7 +111,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             }));
         }
         // Rotate animation
-        if (['rotate', 'rotateScale', 'flip'].includes(effect)) {
+        if (effectFlags.hasRotate || effectFlags.hasFlip) {
             const targetRotate = toVisible ? 0 : getInitialRotate(effect);
             animations.push(Animated.timing(rotate, {
                 toValue: targetRotate,
@@ -79,7 +119,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             }));
         }
         // TranslateX animation
-        if (['slideLeft', 'slideRight'].includes(effect)) {
+        if (effectFlags.hasTranslateX) {
             const targetX = toVisible ? 0 : getInitialTranslateX(effect);
             animations.push(Animated.timing(translateX, {
                 toValue: targetX,
@@ -87,7 +127,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             }));
         }
         // TranslateY animation
-        if (['slideUp', 'slideDown', 'bounce'].includes(effect)) {
+        if (effectFlags.hasTranslateY) {
             const targetY = toVisible ? 0 : getInitialTranslateY(effect);
             animations.push(Animated.timing(translateY, {
                 toValue: targetY,
@@ -99,7 +139,7 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             const targetHeight = toVisible ? measuredHeight : 0;
             animations.push(Animated.timing(animatedHeight, {
                 toValue: targetHeight,
-                duration,
+                duration: effectiveDuration,
                 easing: easingFn,
                 useNativeDriver: false,
             }));
@@ -144,7 +184,11 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
                         if (loopCount === -1 || currentIteration < loopCount) {
                             // Add delay between loops if specified
                             if (loopDelay > 0) {
-                                setTimeout(runLoop, loopDelay);
+                                // Clear any existing timeout before setting a new one
+                                if (loopTimeoutRef.current) {
+                                    clearTimeout(loopTimeoutRef.current);
+                                }
+                                loopTimeoutRef.current = setTimeout(runLoop, loopDelay);
                             }
                             else {
                                 runLoop();
@@ -173,11 +217,13 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
         }
     }, [
         delay,
-        duration,
+        effectiveDuration,
         easing,
         effect,
+        effectFlags,
         measuredHeight,
         onAnimationComplete,
+        onAnimationStart,
         opacity,
         rotate,
         scale,
@@ -201,44 +247,30 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             animate(visible);
         }
     }, [visible, animate]);
-    // Cleanup loop animation on unmount
+    // Cleanup loop animation and timeout on unmount
     useEffect(() => {
         return () => {
             if (loopAnimationRef.current) {
                 loopAnimationRef.current.stop();
             }
+            if (loopTimeoutRef.current) {
+                clearTimeout(loopTimeoutRef.current);
+            }
         };
     }, []);
-    // 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 }) }));
-    }
-    // Build transform based on effect
-    const getTransform = () => {
-        const hasScale = ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect);
-        const hasRotate = ['rotate', 'rotateScale'].includes(effect);
-        const hasFlip = effect === 'flip';
-        const hasTranslateX = ['slideLeft', 'slideRight'].includes(effect);
-        const hasTranslateY = ['slideUp', 'slideDown', 'bounce'].includes(effect);
+    // 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;
         const transforms = [];
         if (hasScale) {
             transforms.push({ scale });
         }
         if (hasRotate) {
-            transforms.push({
-                rotate: rotate.interpolate({
-                    inputRange: [-360, 0, 360],
-                    outputRange: ['-360deg', '0deg', '360deg'],
-                }),
-            });
+            transforms.push({ rotate: rotateInterpolation });
         }
         if (hasFlip) {
-            transforms.push({
-                rotateY: rotate.interpolate({
-                    inputRange: [-180, 0],
-                    outputRange: ['-180deg', '0deg'],
-                }),
-            });
+            transforms.push({ rotateY: flipInterpolation });
         }
         if (hasTranslateX) {
             transforms.push({ translateX });
@@ -247,16 +279,27 @@ export function PuffPop({ children, effect = 'scale', duration = 400, delay = 0,
             transforms.push({ translateY });
         }
         return transforms.length > 0 ? transforms : undefined;
-    };
-    const animatedStyle = {
+    }, [effectFlags, scale, rotateInterpolation, flipInterpolation, translateX, translateY]);
+    // Memoize animated style
+    const animatedStyle = useMemo(() => ({
         opacity,
-        transform: getTransform(),
-    };
-    // Container style for non-skeleton mode
-    const containerAnimatedStyle = !skeleton && measuredHeight !== null
-        ? { height: animatedHeight, overflow: 'hidden' }
-        : {};
-    return (_jsx(Animated.View, { style: [styles.container, style, containerAnimatedStyle], children: _jsx(Animated.View, { style: animatedStyle, children: children }) }));
+        transform,
+    }), [opacity, transform]);
+    // Memoize container style for non-skeleton mode
+    const containerAnimatedStyle = useMemo(() => {
+        if (!skeleton && measuredHeight !== null) {
+            return {
+                height: animatedHeight,
+                overflow: effectFlags.hasRotateEffect ? 'visible' : 'hidden'
+            };
+        }
+        return {};
+    }, [skeleton, measuredHeight, animatedHeight, effectFlags.hasRotateEffect]);
+    // For non-skeleton mode, measure first (after all hooks)
+    if (!skeleton && measuredHeight === null) {
+        return (_jsx(View, { style: styles.measureContainer, onLayout: onLayout, children: _jsx(View, { style: styles.hidden, children: children }) }));
+    }
+    return (_jsx(Animated.View, { style: [styles.container, style, containerAnimatedStyle], testID: testID, children: _jsx(Animated.View, { style: animatedStyle, children: children }) }));
 }
 /**
  * Get initial scale value based on effect

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

@@ -69,9 +69,23 @@ export interface PuffPopProps {
      * @default 0
      */
     loopDelay?: number;
+    /**
+     * Callback when animation starts
+     */
+    onAnimationStart?: () => void;
+    /**
+     * Respect system reduce motion accessibility setting
+     * When true and reduce motion is enabled, animations will be instant
+     * @default true
+     */
+    respectReduceMotion?: boolean;
+    /**
+     * Test ID for testing purposes
+     */
+    testID?: string;
 }
 /**
  * PuffPop - Animate children with beautiful entrance effects
  */
-export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, style, animateOnMount, loop, loopDelay, }: PuffPopProps): ReactElement;
+export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, onAnimationStart, style, animateOnMount, loop, loopDelay, respectReduceMotion, testID, }: PuffPopProps): ReactElement;
 export default PuffPop;

package/package.json

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

@@ -3,6 +3,7 @@ import {
   useRef,
   useState,
   useCallback,
+  useMemo,
   type ReactNode,
   type ReactElement,
 } from 'react';
@@ -11,6 +12,7 @@ import {
   Animated,
   StyleSheet,
   Easing,
+  AccessibilityInfo,
   type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
@@ -115,6 +117,23 @@ export interface PuffPopProps {
    * @default 0
    */
   loopDelay?: number;
+
+  /**
+   * Callback when animation starts
+   */
+  onAnimationStart?: () => void;
+
+  /**
+   * Respect system reduce motion accessibility setting
+   * When true and reduce motion is enabled, animations will be instant
+   * @default true
+   */
+  respectReduceMotion?: boolean;
+
+  /**
+   * Test ID for testing purposes
+   */
+  testID?: string;
 }
 
 /**
@@ -151,10 +170,13 @@ export function PuffPop({
   skeleton = true,
   visible = true,
   onAnimationComplete,
+  onAnimationStart,
   style,
   animateOnMount = true,
   loop = false,
   loopDelay = 0,
+  respectReduceMotion = true,
+  testID,
 }: PuffPopProps): ReactElement {
   // Animation values
   const opacity = useRef(new Animated.Value(animateOnMount ? 0 : 1)).current;
@@ -168,6 +190,56 @@ export function PuffPop({
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const hasAnimated = useRef(false);
   const loopAnimationRef = useRef<Animated.CompositeAnimation | null>(null);
+  const loopTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Reduce motion accessibility support
+  const [isReduceMotionEnabled, setIsReduceMotionEnabled] = useState(false);
+
+  useEffect(() => {
+    if (!respectReduceMotion) return;
+
+    const checkReduceMotion = async () => {
+      const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled();
+      setIsReduceMotionEnabled(reduceMotion);
+    };
+
+    checkReduceMotion();
+
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setIsReduceMotionEnabled
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [respectReduceMotion]);
+
+  // Effective duration (0 if reduce motion is enabled)
+  const effectiveDuration = respectReduceMotion && isReduceMotionEnabled ? 0 : 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]);
+
+  // Memoize interpolations to avoid recreating on every render
+  const rotateInterpolation = useMemo(() => 
+    rotate.interpolate({
+      inputRange: [-360, 0, 360],
+      outputRange: ['-360deg', '0deg', '360deg'],
+    }), [rotate]);
+
+  const flipInterpolation = useMemo(() => 
+    rotate.interpolate({
+      inputRange: [-180, 0],
+      outputRange: ['-180deg', '0deg'],
+    }), [rotate]);
 
   // Handle layout measurement for non-skeleton mode
   const onLayout = useCallback(
@@ -183,12 +255,17 @@ export function PuffPop({
   // Animate function
   const animate = useCallback(
     (toVisible: boolean) => {
+      // Call onAnimationStart callback
+      if (toVisible && onAnimationStart) {
+        onAnimationStart();
+      }
+
       const easingFn = getEasing(easing);
       // 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,
+        duration: effectiveDuration,
         easing: easingFn,
         useNativeDriver: useNative,
       };
@@ -204,7 +281,7 @@ export function PuffPop({
       );
 
       // Scale animation
-      if (['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect)) {
+      if (effectFlags.hasScale) {
         const targetScale = toVisible ? 1 : getInitialScale(effect);
         animations.push(
           Animated.timing(scale, {
@@ -216,7 +293,7 @@ export function PuffPop({
       }
 
       // Rotate animation
-      if (['rotate', 'rotateScale', 'flip'].includes(effect)) {
+      if (effectFlags.hasRotate || effectFlags.hasFlip) {
         const targetRotate = toVisible ? 0 : getInitialRotate(effect);
         animations.push(
           Animated.timing(rotate, {
@@ -227,7 +304,7 @@ export function PuffPop({
       }
 
       // TranslateX animation
-      if (['slideLeft', 'slideRight'].includes(effect)) {
+      if (effectFlags.hasTranslateX) {
         const targetX = toVisible ? 0 : getInitialTranslateX(effect);
         animations.push(
           Animated.timing(translateX, {
@@ -238,7 +315,7 @@ export function PuffPop({
       }
 
       // TranslateY animation
-      if (['slideUp', 'slideDown', 'bounce'].includes(effect)) {
+      if (effectFlags.hasTranslateY) {
         const targetY = toVisible ? 0 : getInitialTranslateY(effect);
         animations.push(
           Animated.timing(translateY, {
@@ -254,7 +331,7 @@ export function PuffPop({
         animations.push(
           Animated.timing(animatedHeight, {
             toValue: targetHeight,
-            duration,
+            duration: effectiveDuration,
             easing: easingFn,
             useNativeDriver: false,
           })
@@ -306,7 +383,11 @@ export function PuffPop({
               if (loopCount === -1 || currentIteration < loopCount) {
                 // Add delay between loops if specified
                 if (loopDelay > 0) {
-                  setTimeout(runLoop, loopDelay);
+                  // Clear any existing timeout before setting a new one
+                  if (loopTimeoutRef.current) {
+                    clearTimeout(loopTimeoutRef.current);
+                  }
+                  loopTimeoutRef.current = setTimeout(runLoop, loopDelay);
                 } else {
                   runLoop();
                 }
@@ -335,11 +416,13 @@ export function PuffPop({
     },
     [
       delay,
-      duration,
+      effectiveDuration,
       easing,
       effect,
+      effectFlags,
       measuredHeight,
       onAnimationComplete,
+      onAnimationStart,
       opacity,
       rotate,
       scale,
@@ -367,32 +450,22 @@ export function PuffPop({
     }
   }, [visible, animate]);
 
-  // Cleanup loop animation on unmount
+  // Cleanup loop animation and timeout on unmount
   useEffect(() => {
     return () => {
       if (loopAnimationRef.current) {
         loopAnimationRef.current.stop();
       }
+      if (loopTimeoutRef.current) {
+        clearTimeout(loopTimeoutRef.current);
+      }
     };
   }, []);
 
-  // For non-skeleton mode, measure first
-  if (!skeleton && measuredHeight === null) {
-    return (
-      <View style={styles.measureContainer} onLayout={onLayout}>
-        <View style={styles.hidden}>{children}</View>
-      </View>
-    );
-  }
-
-  // Build transform based on effect
-  const getTransform = () => {
-    const hasScale = ['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect);
-    const hasRotate = ['rotate', 'rotateScale'].includes(effect);
-    const hasFlip = effect === 'flip';
-    const hasTranslateX = ['slideLeft', 'slideRight'].includes(effect);
-    const hasTranslateY = ['slideUp', 'slideDown', 'bounce'].includes(effect);
-
+  // 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;
     const transforms = [];
 
     if (hasScale) {
@@ -400,21 +473,11 @@ export function PuffPop({
     }
 
     if (hasRotate) {
-      transforms.push({
-        rotate: rotate.interpolate({
-          inputRange: [-360, 0, 360],
-          outputRange: ['-360deg', '0deg', '360deg'],
-        }),
-      });
+      transforms.push({ rotate: rotateInterpolation });
     }
 
     if (hasFlip) {
-      transforms.push({
-        rotateY: rotate.interpolate({
-          inputRange: [-180, 0],
-          outputRange: ['-180deg', '0deg'],
-        }),
-      });
+      transforms.push({ rotateY: flipInterpolation });
     }
 
     if (hasTranslateX) {
@@ -426,20 +489,39 @@ export function PuffPop({
     }
 
     return transforms.length > 0 ? transforms : undefined;
-  };
+  }, [effectFlags, scale, rotateInterpolation, flipInterpolation, translateX, translateY]);
 
-  const animatedStyle = {
+  // Memoize animated style
+  const animatedStyle = useMemo(() => ({
     opacity,
-    transform: getTransform(),
-  };
+    transform,
+  }), [opacity, transform]);
+
+  // Memoize container style for non-skeleton mode
+  const containerAnimatedStyle = useMemo(() => {
+    if (!skeleton && measuredHeight !== null) {
+      return { 
+        height: animatedHeight, 
+        overflow: effectFlags.hasRotateEffect ? 'visible' as const : 'hidden' as const 
+      };
+    }
+    return {};
+  }, [skeleton, measuredHeight, animatedHeight, effectFlags.hasRotateEffect]);
 
-  // Container style for non-skeleton mode
-  const containerAnimatedStyle = !skeleton && measuredHeight !== null
-    ? { height: animatedHeight, overflow: 'hidden' as const }
-    : {};
+  // For non-skeleton mode, measure first (after all hooks)
+  if (!skeleton && measuredHeight === null) {
+    return (
+      <View style={styles.measureContainer} onLayout={onLayout}>
+        <View style={styles.hidden}>{children}</View>
+      </View>
+    );
+  }
 
   return (
-    <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
+    <Animated.View 
+      style={[styles.container, style, containerAnimatedStyle]}
+      testID={testID}
+    >
       <Animated.View style={animatedStyle}>{children}</Animated.View>
     </Animated.View>
   );