react-native-puff-pop 1.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 liveforownhappiness
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+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

@@ -0,0 +1,192 @@
+# react-native-puff-pop 🎉
+
+A React Native animation library for revealing children components with beautiful puff and pop effects.
+
+Works with both **React Native CLI** and **Expo** projects - no native dependencies required!
+
+![npm](https://img.shields.io/npm/v/react-native-puff-pop)
+![license](https://img.shields.io/npm/l/react-native-puff-pop)
+
+## Demo
+
+<p align="center">
+  <img src="./assets/demo.gif" alt="React Native PuffPop Demo" width="320" />
+</p>
+
+## Features
+
+- 🎬 **11 Animation Effects**: scale, rotate, fade, slideUp, slideDown, slideLeft, slideRight, bounce, flip, zoom, rotateScale
+- 🦴 **Skeleton Mode**: Reserve space before animation or expand from zero height
+- ⚡ **Native Driver Support**: Smooth 60fps animations
+- 🎯 **Easy to Use**: Just wrap your components with `<PuffPop>`
+- 📱 **Cross Platform**: Works on iOS, Android, and Web
+- 🔧 **TypeScript**: Full TypeScript support with type definitions
+
+## Installation
+
+```bash
+# Using npm
+npm install react-native-puff-pop
+
+# Using yarn
+yarn add react-native-puff-pop
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { PuffPop } from 'react-native-puff-pop';
+
+function App() {
+  return (
+    <PuffPop>
+      <View style={styles.card}>
+        <Text>Hello, PuffPop!</Text>
+      </View>
+    </PuffPop>
+  );
+}
+```
+
+### With Different Effects
+
+```tsx
+// Scale from center (default)
+<PuffPop effect="scale">
+  <YourComponent />
+</PuffPop>
+
+// Rotate while appearing
+<PuffPop effect="rotate">
+  <YourComponent />
+</PuffPop>
+
+// Rotate + Scale combined
+<PuffPop effect="rotateScale" easing="spring">
+  <YourComponent />
+</PuffPop>
+
+// Bounce effect
+<PuffPop effect="bounce" duration={600}>
+  <YourComponent />
+</PuffPop>
+
+// Slide from bottom
+<PuffPop effect="slideUp">
+  <YourComponent />
+</PuffPop>
+
+// 3D Flip effect
+<PuffPop effect="flip">
+  <YourComponent />
+</PuffPop>
+```
+
+### Skeleton Mode
+
+By default, `skeleton={true}` reserves space for the component before animation:
+
+```tsx
+// Reserves space (default)
+<PuffPop skeleton={true}>
+  <YourComponent />
+</PuffPop>
+
+// Expands from zero height, pushing content below
+<PuffPop skeleton={false}>
+  <YourComponent />
+</PuffPop>
+```
+
+### Staggered Animations
+
+```tsx
+<View>
+  <PuffPop delay={0}>
+    <Card title="First" />
+  </PuffPop>
+  <PuffPop delay={100}>
+    <Card title="Second" />
+  </PuffPop>
+  <PuffPop delay={200}>
+    <Card title="Third" />
+  </PuffPop>
+</View>
+```
+
+### Controlled Visibility
+
+```tsx
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button title="Toggle" onPress={() => setVisible(!visible)} />
+      <PuffPop visible={visible} animateOnMount={false}>
+        <YourComponent />
+      </PuffPop>
+    </>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Children to animate |
+| `effect` | `PuffPopEffect` | `'scale'` | Animation effect type |
+| `duration` | `number` | `400` | Animation duration in ms |
+| `delay` | `number` | `0` | Delay before animation starts in ms |
+| `easing` | `PuffPopEasing` | `'easeOut'` | Easing function |
+| `skeleton` | `boolean` | `true` | Reserve space before animation |
+| `visible` | `boolean` | `true` | Control visibility |
+| `animateOnMount` | `boolean` | `true` | Animate when component mounts |
+| `onAnimationComplete` | `() => void` | - | Callback when animation completes |
+| `style` | `ViewStyle` | - | Custom container style |
+
+### Animation Effects (`PuffPopEffect`)
+
+| Effect | Description |
+|--------|-------------|
+| `scale` | Scale from center point |
+| `rotate` | Full rotation (360°) while appearing |
+| `fade` | Simple fade in |
+| `slideUp` | Slide from bottom |
+| `slideDown` | Slide from top |
+| `slideLeft` | Slide from right |
+| `slideRight` | Slide from left |
+| `bounce` | Bounce effect with overshoot |
+| `flip` | 3D flip effect |
+| `zoom` | Zoom with slight overshoot |
+| `rotateScale` | Rotate + Scale combined |
+
+### Easing Types (`PuffPopEasing`)
+
+| Easing | Description |
+|--------|-------------|
+| `linear` | Linear animation |
+| `easeIn` | Slow start |
+| `easeOut` | Slow end |
+| `easeInOut` | Slow start and end |
+| `spring` | Spring-like effect |
+| `bounce` | Bouncing effect |
+
+## Skeleton Mode Explained
+
+### `skeleton={true}` (default)
+The component reserves its full space immediately, and only the visual appearance animates. This is useful when you don't want layout shifts.
+
+### `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.
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/lib/module/index.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback, } from 'react';
+import { View, Animated, StyleSheet, Easing, } from 'react-native';
+/**
+ * Get easing function based on type
+ */
+function getEasing(type) {
+    switch (type) {
+        case 'linear':
+            return Easing.linear;
+        case 'easeIn':
+            return Easing.in(Easing.ease);
+        case 'easeOut':
+            return Easing.out(Easing.ease);
+        case 'easeInOut':
+            return Easing.inOut(Easing.ease);
+        case 'spring':
+            return Easing.out(Easing.back(1.5));
+        case 'bounce':
+            return Easing.bounce;
+        default:
+            return Easing.out(Easing.ease);
+    }
+}
+/**
+ * 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, }) {
+    // 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;
+    // For non-skeleton mode
+    const [measuredHeight, setMeasuredHeight] = useState(null);
+    const animatedHeight = useRef(new Animated.Value(0)).current;
+    const hasAnimated = useRef(false);
+    // Handle layout measurement for non-skeleton mode
+    const onLayout = useCallback((event) => {
+        if (!skeleton && measuredHeight === null) {
+            const { height } = event.nativeEvent.layout;
+            setMeasuredHeight(height);
+        }
+    }, [skeleton, measuredHeight]);
+    // Animate function
+    const animate = useCallback((toVisible) => {
+        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,
+            easing: easingFn,
+            useNativeDriver: useNative,
+        };
+        const animations = [];
+        // Opacity animation
+        animations.push(Animated.timing(opacity, {
+            toValue: toVisible ? 1 : 0,
+            ...config,
+        }));
+        // Scale animation
+        if (['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect)) {
+            const targetScale = toVisible ? 1 : getInitialScale(effect);
+            animations.push(Animated.timing(scale, {
+                toValue: targetScale,
+                ...config,
+                easing: effect === 'bounce' ? Easing.bounce : easingFn,
+            }));
+        }
+        // Rotate animation
+        if (['rotate', 'rotateScale', 'flip'].includes(effect)) {
+            const targetRotate = toVisible ? 0 : getInitialRotate(effect);
+            animations.push(Animated.timing(rotate, {
+                toValue: targetRotate,
+                ...config,
+            }));
+        }
+        // TranslateX animation
+        if (['slideLeft', 'slideRight'].includes(effect)) {
+            const targetX = toVisible ? 0 : getInitialTranslateX(effect);
+            animations.push(Animated.timing(translateX, {
+                toValue: targetX,
+                ...config,
+            }));
+        }
+        // TranslateY animation
+        if (['slideUp', 'slideDown', 'bounce'].includes(effect)) {
+            const targetY = toVisible ? 0 : getInitialTranslateY(effect);
+            animations.push(Animated.timing(translateY, {
+                toValue: targetY,
+                ...config,
+            }));
+        }
+        // Height animation for non-skeleton mode
+        if (!skeleton && measuredHeight !== null) {
+            const targetHeight = toVisible ? measuredHeight : 0;
+            animations.push(Animated.timing(animatedHeight, {
+                toValue: targetHeight,
+                duration,
+                easing: easingFn,
+                useNativeDriver: false,
+            }));
+        }
+        // Run animations with delay
+        const parallelAnimation = Animated.parallel(animations);
+        if (delay > 0) {
+            Animated.sequence([
+                Animated.delay(delay),
+                parallelAnimation,
+            ]).start(() => {
+                if (toVisible && onAnimationComplete) {
+                    onAnimationComplete();
+                }
+            });
+        }
+        else {
+            parallelAnimation.start(() => {
+                if (toVisible && onAnimationComplete) {
+                    onAnimationComplete();
+                }
+            });
+        }
+    }, [
+        delay,
+        duration,
+        easing,
+        effect,
+        measuredHeight,
+        onAnimationComplete,
+        opacity,
+        rotate,
+        scale,
+        skeleton,
+        translateX,
+        translateY,
+        animatedHeight,
+    ]);
+    // Handle initial mount animation
+    useEffect(() => {
+        if (animateOnMount && !hasAnimated.current && visible) {
+            hasAnimated.current = true;
+            animate(true);
+        }
+    }, [animate, animateOnMount, visible]);
+    // Handle visibility changes after mount
+    useEffect(() => {
+        if (hasAnimated.current) {
+            animate(visible);
+        }
+    }, [visible, animate]);
+    // 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);
+        const transforms = [];
+        if (hasScale) {
+            transforms.push({ scale });
+        }
+        if (hasRotate) {
+            transforms.push({
+                rotate: rotate.interpolate({
+                    inputRange: [-360, 0, 360],
+                    outputRange: ['-360deg', '0deg', '360deg'],
+                }),
+            });
+        }
+        if (hasFlip) {
+            transforms.push({
+                rotateY: rotate.interpolate({
+                    inputRange: [-180, 0],
+                    outputRange: ['-180deg', '0deg'],
+                }),
+            });
+        }
+        if (hasTranslateX) {
+            transforms.push({ translateX });
+        }
+        if (hasTranslateY) {
+            transforms.push({ translateY });
+        }
+        return transforms.length > 0 ? transforms : undefined;
+    };
+    const animatedStyle = {
+        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 }) }));
+}
+/**
+ * Get initial scale value based on effect
+ */
+function getInitialScale(effect) {
+    switch (effect) {
+        case 'scale':
+        case 'rotateScale':
+            return 0;
+        case 'bounce':
+            return 0.3;
+        case 'zoom':
+            return 0.5;
+        case 'flip':
+            return 0.8;
+        default:
+            return 1;
+    }
+}
+/**
+ * Get initial rotate value based on effect
+ */
+function getInitialRotate(effect) {
+    switch (effect) {
+        case 'rotate':
+            return -360;
+        case 'rotateScale':
+            return -180;
+        case 'flip':
+            return -180;
+        default:
+            return 0;
+    }
+}
+/**
+ * Get initial translateX value based on effect
+ */
+function getInitialTranslateX(effect) {
+    switch (effect) {
+        case 'slideLeft':
+            return 100;
+        case 'slideRight':
+            return -100;
+        default:
+            return 0;
+    }
+}
+/**
+ * Get initial translateY value based on effect
+ */
+function getInitialTranslateY(effect) {
+    switch (effect) {
+        case 'slideUp':
+            return 50;
+        case 'slideDown':
+            return -50;
+        case 'bounce':
+            return 30;
+        default:
+            return 0;
+    }
+}
+const styles = StyleSheet.create({
+    container: {},
+    measureContainer: {
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+    },
+    hidden: {
+        opacity: 0,
+    },
+});
+export default PuffPop;

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

@@ -0,0 +1,65 @@
+import { type ReactNode, type ReactElement } from 'react';
+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';
+/**
+ * Easing function types
+ */
+export type PuffPopEasing = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'spring' | 'bounce';
+export interface PuffPopProps {
+    /**
+     * Children to animate
+     */
+    children: ReactNode;
+    /**
+     * Animation effect type
+     * @default 'scale'
+     */
+    effect?: PuffPopEffect;
+    /**
+     * Animation duration in milliseconds
+     * @default 400
+     */
+    duration?: number;
+    /**
+     * Delay before animation starts in milliseconds
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Easing function for animation
+     * @default 'easeOut'
+     */
+    easing?: PuffPopEasing;
+    /**
+     * If true, reserves space for children before animation (skeleton mode)
+     * If false, children height starts at 0 and expands, pushing content below
+     * @default true
+     */
+    skeleton?: boolean;
+    /**
+     * Whether to trigger animation (set to true to animate)
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Callback when animation completes
+     */
+    onAnimationComplete?: () => void;
+    /**
+     * Custom style for the container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Whether to animate on mount
+     * @default true
+     */
+    animateOnMount?: boolean;
+}
+/**
+ * PuffPop - Animate children with beautiful entrance effects
+ */
+export declare function PuffPop({ children, effect, duration, delay, easing, skeleton, visible, onAnimationComplete, style, animateOnMount, }: PuffPopProps): ReactElement;
+export default PuffPop;

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "react-native-puff-pop",
+  "version": "1.0.1",
+  "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",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-puff-pop-example",
+    "ios": "yarn workspace react-native-puff-pop-example ios",
+    "android": "yarn workspace react-native-puff-pop-example android",
+    "web": "yarn workspace react-native-puff-pop-example web",
+    "clean": "del-cli lib",
+    "prepare": "yarn clean && tsc -p tsconfig.build.json",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "expo",
+    "animation",
+    "puff",
+    "pop",
+    "reveal",
+    "transition",
+    "entrance",
+    "effects",
+    "skeleton",
+    "react-native-puff-pop"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liveforownhappiness/react-native-puff-pop.git"
+  },
+  "author": "liveforownhappiness <liveforownhappiness@gmail.com> (https://github.com/liveforownhappiness)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liveforownhappiness/react-native-puff-pop/issues"
+  },
+  "homepage": "https://github.com/liveforownhappiness/react-native-puff-pop#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "del-cli": "^6.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "version": "0.56.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,446 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  type ReactNode,
+  type ReactElement,
+} from 'react';
+import {
+  View,
+  Animated,
+  StyleSheet,
+  Easing,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+/**
+ * Animation effect types for PuffPop
+ */
+export type PuffPopEffect =
+  | 'scale' // Scale from center (점에서 커지면서 나타남)
+  | 'rotate' // Rotate while appearing (회전하면서 나타남)
+  | 'fade' // Simple fade in
+  | 'slideUp' // Slide from bottom
+  | 'slideDown' // Slide from top
+  | 'slideLeft' // Slide from right
+  | 'slideRight' // Slide from left
+  | 'bounce' // Bounce effect with overshoot
+  | 'flip' // 3D flip effect
+  | 'zoom' // Zoom with slight overshoot
+  | 'rotateScale'; // Rotate + Scale combined
+
+/**
+ * Easing function types
+ */
+export type PuffPopEasing =
+  | 'linear'
+  | 'easeIn'
+  | 'easeOut'
+  | 'easeInOut'
+  | 'spring'
+  | 'bounce';
+
+export interface PuffPopProps {
+  /**
+   * Children to animate
+   */
+  children: ReactNode;
+
+  /**
+   * Animation effect type
+   * @default 'scale'
+   */
+  effect?: PuffPopEffect;
+
+  /**
+   * Animation duration in milliseconds
+   * @default 400
+   */
+  duration?: number;
+
+  /**
+   * Delay before animation starts in milliseconds
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * Easing function for animation
+   * @default 'easeOut'
+   */
+  easing?: PuffPopEasing;
+
+  /**
+   * If true, reserves space for children before animation (skeleton mode)
+   * If false, children height starts at 0 and expands, pushing content below
+   * @default true
+   */
+  skeleton?: boolean;
+
+  /**
+   * Whether to trigger animation (set to true to animate)
+   * @default true
+   */
+  visible?: boolean;
+
+  /**
+   * Callback when animation completes
+   */
+  onAnimationComplete?: () => void;
+
+  /**
+   * Custom style for the container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether to animate on mount
+   * @default true
+   */
+  animateOnMount?: boolean;
+}
+
+/**
+ * Get easing function based on type
+ */
+function getEasing(type: PuffPopEasing): (value: number) => number {
+  switch (type) {
+    case 'linear':
+      return Easing.linear;
+    case 'easeIn':
+      return Easing.in(Easing.ease);
+    case 'easeOut':
+      return Easing.out(Easing.ease);
+    case 'easeInOut':
+      return Easing.inOut(Easing.ease);
+    case 'spring':
+      return Easing.out(Easing.back(1.5));
+    case 'bounce':
+      return Easing.bounce;
+    default:
+      return Easing.out(Easing.ease);
+  }
+}
+
+/**
+ * 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,
+}: PuffPopProps): ReactElement {
+  // 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;
+  
+  // For non-skeleton mode
+  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const hasAnimated = useRef(false);
+
+  // Handle layout measurement for non-skeleton mode
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!skeleton && measuredHeight === null) {
+        const { height } = event.nativeEvent.layout;
+        setMeasuredHeight(height);
+      }
+    },
+    [skeleton, measuredHeight]
+  );
+
+  // Animate function
+  const animate = useCallback(
+    (toVisible: boolean) => {
+      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,
+        easing: easingFn,
+        useNativeDriver: useNative,
+      };
+
+      const animations: Animated.CompositeAnimation[] = [];
+
+      // Opacity animation
+      animations.push(
+        Animated.timing(opacity, {
+          toValue: toVisible ? 1 : 0,
+          ...config,
+        })
+      );
+
+      // Scale animation
+      if (['scale', 'bounce', 'zoom', 'rotateScale', 'flip'].includes(effect)) {
+        const targetScale = toVisible ? 1 : getInitialScale(effect);
+        animations.push(
+          Animated.timing(scale, {
+            toValue: targetScale,
+            ...config,
+            easing: effect === 'bounce' ? Easing.bounce : easingFn,
+          })
+        );
+      }
+
+      // Rotate animation
+      if (['rotate', 'rotateScale', 'flip'].includes(effect)) {
+        const targetRotate = toVisible ? 0 : getInitialRotate(effect);
+        animations.push(
+          Animated.timing(rotate, {
+            toValue: targetRotate,
+            ...config,
+          })
+        );
+      }
+
+      // TranslateX animation
+      if (['slideLeft', 'slideRight'].includes(effect)) {
+        const targetX = toVisible ? 0 : getInitialTranslateX(effect);
+        animations.push(
+          Animated.timing(translateX, {
+            toValue: targetX,
+            ...config,
+          })
+        );
+      }
+
+      // TranslateY animation
+      if (['slideUp', 'slideDown', 'bounce'].includes(effect)) {
+        const targetY = toVisible ? 0 : getInitialTranslateY(effect);
+        animations.push(
+          Animated.timing(translateY, {
+            toValue: targetY,
+            ...config,
+          })
+        );
+      }
+
+      // Height animation for non-skeleton mode
+      if (!skeleton && measuredHeight !== null) {
+        const targetHeight = toVisible ? measuredHeight : 0;
+        animations.push(
+          Animated.timing(animatedHeight, {
+            toValue: targetHeight,
+            duration,
+            easing: easingFn,
+            useNativeDriver: false,
+          })
+        );
+      }
+
+      // Run animations with delay
+      const parallelAnimation = Animated.parallel(animations);
+      
+      if (delay > 0) {
+        Animated.sequence([
+          Animated.delay(delay),
+          parallelAnimation,
+        ]).start(() => {
+          if (toVisible && onAnimationComplete) {
+            onAnimationComplete();
+          }
+        });
+      } else {
+        parallelAnimation.start(() => {
+          if (toVisible && onAnimationComplete) {
+            onAnimationComplete();
+          }
+        });
+      }
+    },
+    [
+      delay,
+      duration,
+      easing,
+      effect,
+      measuredHeight,
+      onAnimationComplete,
+      opacity,
+      rotate,
+      scale,
+      skeleton,
+      translateX,
+      translateY,
+      animatedHeight,
+    ]
+  );
+
+  // Handle initial mount animation
+  useEffect(() => {
+    if (animateOnMount && !hasAnimated.current && visible) {
+      hasAnimated.current = true;
+      animate(true);
+    }
+  }, [animate, animateOnMount, visible]);
+
+  // Handle visibility changes after mount
+  useEffect(() => {
+    if (hasAnimated.current) {
+      animate(visible);
+    }
+  }, [visible, animate]);
+
+  // 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);
+
+    const transforms = [];
+
+    if (hasScale) {
+      transforms.push({ scale });
+    }
+
+    if (hasRotate) {
+      transforms.push({
+        rotate: rotate.interpolate({
+          inputRange: [-360, 0, 360],
+          outputRange: ['-360deg', '0deg', '360deg'],
+        }),
+      });
+    }
+
+    if (hasFlip) {
+      transforms.push({
+        rotateY: rotate.interpolate({
+          inputRange: [-180, 0],
+          outputRange: ['-180deg', '0deg'],
+        }),
+      });
+    }
+
+    if (hasTranslateX) {
+      transforms.push({ translateX });
+    }
+
+    if (hasTranslateY) {
+      transforms.push({ translateY });
+    }
+
+    return transforms.length > 0 ? transforms : undefined;
+  };
+
+  const animatedStyle = {
+    opacity,
+    transform: getTransform(),
+  };
+
+  // Container style for non-skeleton mode
+  const containerAnimatedStyle = !skeleton && measuredHeight !== null
+    ? { height: animatedHeight, overflow: 'hidden' as const }
+    : {};
+
+  return (
+    <Animated.View style={[styles.container, style, containerAnimatedStyle]}>
+      <Animated.View style={animatedStyle}>{children}</Animated.View>
+    </Animated.View>
+  );
+}
+
+/**
+ * Get initial scale value based on effect
+ */
+function getInitialScale(effect: PuffPopEffect): number {
+  switch (effect) {
+    case 'scale':
+    case 'rotateScale':
+      return 0;
+    case 'bounce':
+      return 0.3;
+    case 'zoom':
+      return 0.5;
+    case 'flip':
+      return 0.8;
+    default:
+      return 1;
+  }
+}
+
+/**
+ * Get initial rotate value based on effect
+ */
+function getInitialRotate(effect: PuffPopEffect): number {
+  switch (effect) {
+    case 'rotate':
+      return -360;
+    case 'rotateScale':
+      return -180;
+    case 'flip':
+      return -180;
+    default:
+      return 0;
+  }
+}
+
+/**
+ * Get initial translateX value based on effect
+ */
+function getInitialTranslateX(effect: PuffPopEffect): number {
+  switch (effect) {
+    case 'slideLeft':
+      return 100;
+    case 'slideRight':
+      return -100;
+    default:
+      return 0;
+  }
+}
+
+/**
+ * Get initial translateY value based on effect
+ */
+function getInitialTranslateY(effect: PuffPopEffect): number {
+  switch (effect) {
+    case 'slideUp':
+      return 50;
+    case 'slideDown':
+      return -50;
+    case 'bounce':
+      return 30;
+    default:
+      return 0;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  measureContainer: {
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  hidden: {
+    opacity: 0,
+  },
+});
+
+export default PuffPop;
+