@hoddy-ui/core 1.1.1 → 1.1.2

package/README.md

@@ -87,30 +87,43 @@ export default function Root() {
 ```tsx
 import React from "react";
 import { View } from "react-native";
-import { Typography, Button, TextField, useColors } from "@hoddy-ui/core";
+import {
+  Typography,
+  Button,
+  TextField,
+  Animator,
+  useColors,
+  useFadeAnimation,
+} from "@hoddy-ui/core";
 
 export default function HomeScreen() {
   const colors = useColors();
 
   return (
     <View style={{ padding: 20, backgroundColor: colors.white[1] }}>
-      <Typography variant="h4" color="primary" gutterBottom={20}>
-        Welcome to Hoddy UI!
-      </Typography>
-
-      <TextField
-        label="Email Address"
-        variant="outlined"
-        keyboardType="email-address"
-        gutterBottom={16}
-      />
-
-      <Button
-        title="Get Started"
-        variant="contained"
-        color="primary"
-        onPress={() => console.log("Button pressed!")}
-      />
+      <Animator type="fade" duration={1000}>
+        <Typography variant="h4" color="primary" gutterBottom={20}>
+          Welcome to Hoddy UI!
+        </Typography>
+      </Animator>
+
+      <Animator type="slide" direction="up" delay={200}>
+        <TextField
+          label="Email Address"
+          variant="outlined"
+          keyboardType="email-address"
+          gutterBottom={16}
+        />
+      </Animator>
+
+      <Animator type="grow" delay={400}>
+        <Button
+          title="Get Started"
+          variant="contained"
+          color="primary"
+          onPress={() => console.log("Button pressed!")}
+        />
+      </Animator>
     </View>
   );
 }
@@ -700,24 +713,139 @@ A loading indicator component with customizable appearance.
 
 ### Animator
 
-A component for adding layout animations and transitions.
+A unified component that provides a single interface for all animation types with generic props.
 
-**Props:**
+**Features:**
 
-| Prop            | Type                                                                        | Default           | Description               |
-| --------------- | --------------------------------------------------------------------------- | ----------------- | ------------------------- |
-| `children`      | `ReactNode`                                                                 | -                 | Content to animate        |
-| `type`          | `"fade" \| "slideInLeft" \| "slideInRight" \| "slideInUp" \| "slideInDown"` | `"fade"`          | Animation type            |
-| `duration`      | `number`                                                                    | `500`             | Animation duration (ms)   |
-| `delay`         | `number`                                                                    | `100`             | Animation delay (ms)      |
-| `animationType` | `"easeInEaseOut" \| "linear" \| "spring"`                                   | `"easeInEaseOut"` | Animation timing function |
-| `style`         | `ViewStyle`                                                                 | `{}`              | Container style overrides |
+- **Single Component**: One component handles all animation types
+- **Generic Props**: Consistent prop naming across all animations (e.g., `closeAfter` instead of animation-specific names)
+- **Modular Hooks**: Animation logic is separated into individual custom hooks
+- **Type Safety**: Full TypeScript support with proper typing
+- **Performance**: Only the specified animation runs, others are not loaded
 
-**Example:**
+**Generic Props:**
+
+All animation types support these generic props:
+
+| Prop         | Type                                                                        | Default | Description                                                   |
+| ------------ | --------------------------------------------------------------------------- | ------- | ------------------------------------------------------------- |
+| `type`       | `"fade" \| "grow" \| "slide" \| "blink" \| "float" \| "roll" \| "thrownup"` | -       | Animation type                                                |
+| `duration`   | `number`                                                                    | `500`   | Animation duration in milliseconds                            |
+| `delay`      | `number`                                                                    | `0`     | Delay before animation starts                                 |
+| `closeAfter` | `number \| null`                                                            | `null`  | Time after which the exit animation starts (null for no exit) |
+| `style`      | `ViewStyle`                                                                 | `{}`    | Additional styles for the animated view                       |
+
+**Animation-Specific Props:**
+
+**Slide Animation:**
+
+- `direction`: `"up" \| "down" \| "left" \| "right"`
+- `initialValue`: Custom initial position value
+
+**Grow Animation:**
+
+- `initialScale`: Starting scale (default: 0)
+
+**Blink Animation:**
+
+- `blinkDuration`: Duration of one blink cycle
+- `minOpacity`: Minimum opacity value
+- `maxOpacity`: Maximum opacity value
+
+**Float Animation:**
+
+- `closeDuration`: Duration of exit animation
+- `floatDistance`: Distance to float up/down
+- `floatDuration`: Duration of one float cycle
+
+**Roll Animation:**
+
+- `initialTranslateY`: Initial vertical position
+- `initialRotate`: Initial rotation value
+
+**Examples:**
+
+```tsx
+// Fade animation
+<Animator type="fade" duration={1000} closeAfter={3000}>
+  <Text>This will fade in and out</Text>
+</Animator>
+
+// Slide animation
+<Animator type="slide" direction="up" duration={800} closeAfter={2000}>
+  <View>This will slide up from bottom</View>
+</Animator>
+
+// Grow animation
+<Animator type="grow" initialScale={0.5} duration={600}>
+  <Button>This will grow from 50% scale</Button>
+</Animator>
+
+// Blink animation (continuous)
+<Animator type="blink" blinkDuration={1000} minOpacity={0.3}>
+  <Icon>This will blink continuously</Icon>
+</Animator>
+
+// Float animation
+<Animator type="float" floatDistance={20} floatDuration={2000} closeAfter={5000}>
+  <View>This will float up and down</View>
+</Animator>
+
+// Roll animation
+<Animator type="roll" initialRotate="45deg" duration={800}>
+  <Image>This will roll and rotate</Image>
+</Animator>
+
+// Thrown up animation
+<Animator type="thrownup" delay={500} closeAfter={4000}>
+  <Notification>This will spring up from bottom</Notification>
+</Animator>
+```
+
+**Available Animation Types:**
+
+1. **fade**: Simple fade in/out
+2. **grow**: Scale-based growth animation
+3. **slide**: Directional slide animations
+4. **blink**: Continuous opacity blinking
+5. **float**: Floating up/down motion with fade
+6. **roll**: Combined rotation and translation
+7. **thrownup**: Spring-based upward animation
+
+**Using Animation Hooks Directly:**
+
+You can also use the animation hooks directly for custom implementations:
+
+```tsx
+import { useFadeAnimation, useSlideAnimation } from "@hoddy-ui/core";
+
+const MyComponent = () => {
+  const { animatedStyle } = useFadeAnimation({
+    duration: 800,
+    closeAfter: 2000,
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Text>Custom animated content</Text>
+    </Animated.View>
+  );
+};
+```
+
+**Migration from Old Components:**
+
+Replace old individual animation components:
 
 ```tsx
-<Animator type="slideInUp" duration={600} delay={200} animationType="spring">
-  <Typography>This content will slide up</Typography>
+// Old way
+<AnimatedFade fadeOutAfter={2000}>
+  <Text>Content</Text>
+</AnimatedFade>
+
+// New way
+<Animator type="fade" closeAfter={2000}>
+  <Text>Content</Text>
 </Animator>
 ```
 
@@ -803,6 +931,77 @@ function MyScreen() {
 }
 ```
 
+### Animation Hooks
+
+Access animation logic directly for custom implementations:
+
+#### useFadeAnimation
+
+```tsx
+import { useFadeAnimation } from "@hoddy-ui/core";
+
+function FadeComponent() {
+  const { animatedStyle } = useFadeAnimation({
+    duration: 800,
+    closeAfter: 2000,
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Text>This will fade in and out</Text>
+    </Animated.View>
+  );
+}
+```
+
+#### useSlideAnimation
+
+```tsx
+import { useSlideAnimation } from "@hoddy-ui/core";
+
+function SlideComponent() {
+  const { animatedStyle } = useSlideAnimation({
+    direction: "up",
+    duration: 600,
+    initialValue: 100,
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Text>This will slide up</Text>
+    </Animated.View>
+  );
+}
+```
+
+#### useGrowAnimation
+
+```tsx
+import { useGrowAnimation } from "@hoddy-ui/core";
+
+function GrowComponent() {
+  const { animatedStyle } = useGrowAnimation({
+    duration: 500,
+    initialScale: 0.5,
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Text>This will grow from 50% scale</Text>
+    </Animated.View>
+  );
+}
+```
+
+#### Other Animation Hooks
+
+- `useBlinkAnimation` - For continuous blinking effects
+- `useFloatAnimation` - For floating up/down motion
+- `useRollAnimation` - For rotation and translation effects
+- `useThrownUpAnimation` - For spring-based upward animations
+
+All animation hooks accept similar configuration objects with properties like `duration`, `delay`, and animation-specific options.
+
 ## 🎯 Advanced Usage
 
 ### Custom Theme Provider

package/index.ts

@@ -8,20 +8,24 @@ export { default as Avatar } from "./src/Components/Avatar";
 export * from "./src/Components/Button";
 export { default as Button } from "./src/Components/Button";
 export * from "./src/Components/Checkbox";
+export * from "./src/Components/Divider";
 export * from "./src/Components/FlashMessage";
 export * from "./src/Components/FormWrapper";
-export * from "./src/Components/StarRating";
 export * from "./src/Components/Grid";
 export * from "./src/Components/Locator";
+export * from "./src/Components/OTPInput";
 export * from "./src/Components/Popup";
 export * from "./src/Components/SafeAreaView";
-export * from "./src/Components/Divider";
 export { default as SelectMenu } from "./src/Components/SelectMenu";
 export { default as Spinner } from "./src/Components/Spinner";
+export * from "./src/Components/StarRating";
 export * from "./src/Components/TextField";
 export { default as TextField } from "./src/Components/TextField";
 export { default as Typography } from "./src/Components/Typography";
-export * from "./src/Components/OTPInput";
+
+// Animation hooks
+export * from "./src/Components/Animators/hooks";
+
 // Others
 // export * from "./src/config";
 export * from "./src/hooks";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Animators/Animator.tsx

@@ -0,0 +1,117 @@
+import React, { FC } from "react";
+import { Animated } from "react-native";
+import { AnimatorProps } from "../../types";
+import { useBlinkAnimation } from "./hooks/useBlinkAnimation";
+import { useFadeAnimation } from "./hooks/useFadeAnimation";
+import { useFloatAnimation } from "./hooks/useFloatAnimation";
+import { useGrowAnimation } from "./hooks/useGrowAnimation";
+import { useRollAnimation } from "./hooks/useRollAnimation";
+import { useSlideAnimation } from "./hooks/useSlideAnimation";
+import { useThrownUpAnimation } from "./hooks/useThrownUpAnimation";
+
+/**
+ * Unified Animator component that handles multiple animation types with type-safe props.
+ *
+ * Each animation type only accepts its relevant props, ensuring type safety and better developer experience.
+ *
+ * @example
+ * // Fade animation - only accepts base props
+ * <Animator type="fade" duration={1000} closeAfter={3000}>
+ *   <Text>This will fade in and out</Text>
+ * </Animator>
+ *
+ * @example
+ * // Slide animation - only accepts direction and initialValue props
+ * <Animator type="slide" direction="up" duration={800} closeAfter={2000}>
+ *   <View>This will slide up from bottom</View>
+ * </Animator>
+ *
+ * @example
+ * // Grow animation - only accepts initialScale prop
+ * <Animator type="grow" initialScale={0.5} duration={600}>
+ *   <Button>This will grow from 50% scale</Button>
+ * </Animator>
+ *
+ * @example
+ * // Blink animation - only accepts blink-specific props
+ * <Animator type="blink" blinkDuration={1000} minOpacity={0.3}>
+ *   <Icon>This will blink continuously</Icon>
+ * </Animator>
+ *
+ * @example
+ * // TypeScript will show errors for invalid prop combinations:
+ * // ❌ This will cause a TypeScript error:
+ * // <Animator type="fade" direction="up"> // direction is not valid for fade
+ * //
+ * // ✅ This is correct:
+ * // <Animator type="slide" direction="up">
+ */
+const Animator: FC<AnimatorProps> = (props) => {
+  const { children, type, duration, delay, closeAfter, style = {} } = props;
+
+  // Get animation style based on type
+  const getAnimationStyle = () => {
+    switch (type) {
+      case "fade":
+        return useFadeAnimation({ duration, delay, closeAfter });
+
+      case "grow":
+        return useGrowAnimation({
+          duration,
+          delay,
+          closeAfter,
+          initialScale: props.initialScale,
+        });
+
+      case "slide":
+        return useSlideAnimation({
+          duration,
+          delay,
+          direction: props.direction,
+          closeAfter,
+          initialValue: props.initialValue,
+        });
+
+      case "blink":
+        return useBlinkAnimation({
+          delay,
+          blinkDuration: props.blinkDuration,
+          minOpacity: props.minOpacity,
+          maxOpacity: props.maxOpacity,
+        });
+
+      case "float":
+        return useFloatAnimation({
+          duration,
+          delay,
+          closeAfter,
+          closeDuration: props.closeDuration,
+          floatDistance: props.floatDistance,
+          floatDuration: props.floatDuration,
+        });
+
+      case "roll":
+        return useRollAnimation({
+          duration,
+          delay,
+          closeAfter,
+          initialTranslateY: props.initialTranslateY,
+          initialRotate: props.initialRotate,
+        });
+
+      case "thrownup":
+        return useThrownUpAnimation({ delay, closeAfter });
+
+      default:
+        return { animatedStyle: {} };
+    }
+  };
+
+  const { animatedStyle } = getAnimationStyle();
+
+  return (
+    <Animated.View style={[style, animatedStyle]}>{children}</Animated.View>
+  );
+};
+
+export default Animator;

package/src/Components/Animators/README.md

@@ -0,0 +1,137 @@
+# Unified Animator Component
+
+The `Animator` component provides a single interface for all animation types with generic props.
+
+## Features
+
+- **Single Component**: One component handles all animation types
+- **Generic Props**: Consistent prop naming across all animations (e.g., `closeAfter` instead of animation-specific names)
+- **Modular Hooks**: Animation logic is separated into individual custom hooks
+- **Type Safety**: Full TypeScript support with proper typing
+- **Performance**: Only the specified animation runs, others are not loaded
+
+## Basic Usage
+
+```tsx
+import { Animator } from 'hoddy-ui';
+
+// Fade animation
+<Animator type="fade" duration={1000} closeAfter={3000}>
+  <Text>This will fade in and out</Text>
+</Animator>
+
+// Slide animation
+<Animator type="slide" direction="up" duration={800} closeAfter={2000}>
+  <View>This will slide up from bottom</View>
+</Animator>
+
+// Grow animation
+<Animator type="grow" initialScale={0.5} duration={600}>
+  <Button>This will grow from 50% scale</Button>
+</Animator>
+
+// Blink animation (continuous)
+<Animator type="blink" blinkDuration={1000} minOpacity={0.3}>
+  <Icon>This will blink continuously</Icon>
+</Animator>
+
+// Float animation
+<Animator type="float" floatDistance={20} floatDuration={2000} closeAfter={5000}>
+  <View>This will float up and down</View>
+</Animator>
+
+// Roll animation
+<Animator type="roll" initialRotate="45deg" duration={800}>
+  <Image>This will roll and rotate</Image>
+</Animator>
+
+// Thrown up animation
+<Animator type="thrownup" delay={500} closeAfter={4000}>
+  <Notification>This will spring up from bottom</Notification>
+</Animator>
+```
+
+## Generic Props
+
+All animation types support these generic props:
+
+- `type`: Animation type ("fade" | "grow" | "slide" | "blink" | "float" | "roll" | "thrownup")
+- `duration`: Animation duration in milliseconds
+- `delay`: Delay before animation starts
+- `closeAfter`: Time after which the exit animation starts (null for no exit)
+- `style`: Additional styles for the animated view
+
+## Animation-Specific Props
+
+### Slide Animation
+
+- `direction`: "up" | "down" | "left" | "right"
+- `initialValue`: Custom initial position value
+
+### Grow Animation
+
+- `initialScale`: Starting scale (default: 0)
+
+### Blink Animation
+
+- `blinkDuration`: Duration of one blink cycle
+- `minOpacity`: Minimum opacity value
+- `maxOpacity`: Maximum opacity value
+
+### Float Animation
+
+- `closeDuration`: Duration of exit animation
+- `floatDistance`: Distance to float up/down
+- `floatDuration`: Duration of one float cycle
+
+### Roll Animation
+
+- `initialTranslateY`: Initial vertical position
+- `initialRotate`: Initial rotation value
+
+## Custom Hooks
+
+You can also use the animation hooks directly:
+
+```tsx
+import { useFadeAnimation, useSlideAnimation } from "hoddy-ui";
+
+const MyComponent = () => {
+  const { animatedStyle } = useFadeAnimation({
+    duration: 800,
+    closeAfter: 2000,
+  });
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Text>Custom animated content</Text>
+    </Animated.View>
+  );
+};
+```
+
+## Migration from Old Components
+
+Replace old individual animation components:
+
+```tsx
+// Old way
+<AnimatedFade fadeOutAfter={2000}>
+  <Text>Content</Text>
+</AnimatedFade>
+
+// New way
+<Animator type="fade" closeAfter={2000}>
+  <Text>Content</Text>
+</Animator>
+```
+
+## Available Animation Types
+
+1. **fade**: Simple fade in/out
+2. **grow**: Scale-based growth animation
+3. **slide**: Directional slide animations
+4. **blink**: Continuous opacity blinking
+5. **float**: Floating up/down motion with fade
+6. **roll**: Combined rotation and translation
+7. **thrownup**: Spring-based upward animation

package/src/Components/Animators/hooks/index.ts

@@ -0,0 +1,8 @@
+export { default as useAppState } from "./useAppState";
+export { useBlinkAnimation } from "./useBlinkAnimation";
+export { useFadeAnimation } from "./useFadeAnimation";
+export { useFloatAnimation } from "./useFloatAnimation";
+export { useGrowAnimation } from "./useGrowAnimation";
+export { useRollAnimation } from "./useRollAnimation";
+export { useSlideAnimation } from "./useSlideAnimation";
+export { useThrownUpAnimation } from "./useThrownUpAnimation";

package/src/Components/Animators/hooks/useAppState.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { AppState, Platform } from "react-native";
+
+const useAppState = () => {
+  const [isActive, setIsActive] = useState(true);
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: string) => {
+      setIsActive(nextAppState === "active");
+    };
+
+    let subscription: any;
+    let blurSub: any;
+    let focusSub: any;
+
+    if (Platform.OS === "android") {
+      blurSub = AppState.addEventListener("blur", () =>
+        handleAppStateChange("inactive")
+      );
+      focusSub = AppState.addEventListener("focus", () =>
+        handleAppStateChange("active")
+      );
+    } else {
+      subscription = AppState.addEventListener("change", handleAppStateChange);
+    }
+
+    return () => {
+      subscription?.remove();
+      blurSub?.remove();
+      focusSub?.remove();
+    };
+  }, []);
+
+  return { isActive };
+};
+
+export default useAppState;

package/src/Components/Animators/hooks/useBlinkAnimation.ts

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseBlinkAnimationProps {
+  delay?: number;
+  blinkDuration?: number;
+  minOpacity?: number;
+  maxOpacity?: number;
+}
+
+export const useBlinkAnimation = ({
+  delay = 0,
+  blinkDuration = 2000,
+  minOpacity = 0.5,
+  maxOpacity = 1,
+}: UseBlinkAnimationProps = {}) => {
+  const opacity = useRef(new Animated.Value(maxOpacity)).current;
+  const { isActive } = useAppState();
+  const blinkAnim = useRef<Animated.CompositeAnimation | null>(null);
+
+  const startBlinking = () => {
+    blinkAnim.current = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: minOpacity,
+          duration: blinkDuration / 2,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: maxOpacity,
+          duration: blinkDuration / 2,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    blinkAnim.current.start();
+  };
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      opacity.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    if (delay > 0) {
+      const timer = setTimeout(() => {
+        startBlinking();
+      }, delay);
+      return () => {
+        clearTimeout(timer);
+        opacity.stopAnimation();
+        blinkAnim.current?.stop();
+      };
+    } else {
+      startBlinking();
+    }
+
+    return () => {
+      opacity.stopAnimation();
+      blinkAnim.current?.stop();
+    };
+  }, [delay, blinkDuration, minOpacity, maxOpacity]);
+
+  return {
+    animatedStyle: { opacity },
+  };
+};

package/src/Components/Animators/hooks/useFadeAnimation.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from "react";
+import { Animated, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseFadeAnimationProps {
+  duration?: number;
+  delay?: number;
+  closeAfter?: number | null;
+}
+
+export const useFadeAnimation = ({
+  duration = 1000,
+  delay = 0,
+  closeAfter = 2000,
+}: UseFadeAnimationProps = {}) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      opacity.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // Fade-in animation
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      delay,
+      useNativeDriver: true,
+    }).start(() => {
+      if (closeAfter) {
+        setTimeout(() => {
+          Animated.timing(opacity, {
+            toValue: 0,
+            duration,
+            useNativeDriver: true,
+          }).start();
+        }, closeAfter);
+      }
+    });
+
+    return () => opacity.stopAnimation();
+  }, [opacity, duration, delay, closeAfter]);
+
+  return {
+    animatedStyle: { opacity },
+  };
+};

package/src/Components/Animators/hooks/useFloatAnimation.ts

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseFloatAnimationProps {
+  duration?: number;
+  delay?: number;
+  closeAfter?: number | null;
+  closeDuration?: number;
+  floatDistance?: number;
+  floatDuration?: number;
+}
+
+export const useFloatAnimation = ({
+  duration = 800,
+  delay = 0,
+  closeAfter = 2000,
+  closeDuration = 600,
+  floatDistance = 10,
+  floatDuration = 1200,
+}: UseFloatAnimationProps = {}) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const { isActive } = useAppState();
+  const floatAnim = useRef<Animated.CompositeAnimation | null>(null);
+
+  const startFloating = () => {
+    floatAnim.current = Animated.loop(
+      Animated.sequence([
+        Animated.timing(translateY, {
+          toValue: -floatDistance,
+          duration: floatDuration / 2,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: floatDistance,
+          duration: floatDuration,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: floatDuration / 2,
+          easing: Easing.inOut(Easing.quad),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    floatAnim.current.start();
+  };
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      opacity.stopAnimation();
+      translateY.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // Fade-in
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration,
+      delay,
+      useNativeDriver: true,
+    }).start(() => {
+      startFloating();
+
+      if (closeAfter) {
+        setTimeout(() => {
+          floatAnim.current?.stop();
+
+          Animated.timing(opacity, {
+            toValue: 0,
+            duration: closeDuration,
+            useNativeDriver: true,
+          }).start();
+        }, closeAfter);
+      }
+    });
+
+    return () => {
+      opacity.stopAnimation();
+      translateY.stopAnimation();
+      floatAnim.current?.stop();
+    };
+  }, [
+    duration,
+    delay,
+    closeAfter,
+    closeDuration,
+    floatDistance,
+    floatDuration,
+  ]);
+
+  return {
+    animatedStyle: {
+      opacity,
+      transform: [{ translateY }],
+    },
+  };
+};

package/src/Components/Animators/hooks/useGrowAnimation.ts

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseGrowAnimationProps {
+  duration?: number;
+  delay?: number;
+  closeAfter?: number | null;
+  initialScale?: number;
+}
+
+export const useGrowAnimation = ({
+  duration = 500,
+  delay = 0,
+  closeAfter = 2000,
+  initialScale = 0,
+}: UseGrowAnimationProps = {}) => {
+  const scale = useRef(new Animated.Value(initialScale)).current;
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      scale.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // Start grow-in animation with easing
+    Animated.timing(scale, {
+      toValue: 1,
+      duration,
+      delay,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start(() => {
+      if (closeAfter) {
+        setTimeout(() => {
+          Animated.timing(scale, {
+            toValue: initialScale,
+            duration,
+            easing: Easing.out(Easing.ease),
+            useNativeDriver: true,
+          }).start();
+        }, closeAfter);
+      }
+    });
+
+    return () => scale.stopAnimation();
+  }, [scale, duration, delay, closeAfter, initialScale]);
+
+  return {
+    animatedStyle: { transform: [{ scale }] },
+  };
+};

package/src/Components/Animators/hooks/useRollAnimation.ts

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseRollAnimationProps {
+  duration?: number;
+  delay?: number;
+  closeAfter?: number | null;
+  initialTranslateY?: number;
+  initialRotate?: string;
+}
+
+export const useRollAnimation = ({
+  duration = 500,
+  delay = 0,
+  closeAfter = 2000,
+  initialTranslateY = 100,
+  initialRotate = "0deg",
+}: UseRollAnimationProps = {}) => {
+  const translateY = useRef(new Animated.Value(initialTranslateY)).current;
+  const rotate = useRef(new Animated.Value(0.5)).current;
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      rotate.stopAnimation();
+      translateY.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // Start roll-in animation with easing
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: 0.5,
+        duration,
+        delay,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }),
+      Animated.timing(rotate, {
+        toValue: 1,
+        duration,
+        delay,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      if (closeAfter) {
+        setTimeout(() => {
+          Animated.parallel([
+            Animated.timing(translateY, {
+              toValue: initialTranslateY,
+              duration,
+              easing: Easing.out(Easing.ease),
+              useNativeDriver: true,
+            }),
+            Animated.timing(rotate, {
+              toValue: 0,
+              duration,
+              easing: Easing.out(Easing.ease),
+              useNativeDriver: true,
+            }),
+          ]).start();
+        }, closeAfter);
+      }
+    });
+
+    return () => {
+      translateY.stopAnimation();
+      rotate.stopAnimation();
+    };
+  }, [translateY, rotate, duration, delay, closeAfter, initialTranslateY]);
+
+  // Interpolate the rotation value to degrees
+  const rotateInterpolation = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: [initialRotate, "360deg"],
+  });
+
+  return {
+    animatedStyle: {
+      transform: [{ translateY }, { rotate: rotateInterpolation }],
+    },
+  };
+};

package/src/Components/Animators/hooks/useSlideAnimation.ts

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from "react";
+import { Animated, Dimensions, Easing, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+const { width, height } = Dimensions.get("window");
+
+interface UseSlideAnimationProps {
+  duration?: number;
+  delay?: number;
+  direction?: "up" | "down" | "left" | "right";
+  closeAfter?: number | null;
+  initialValue?: number;
+}
+
+const getInitialPosition = (direction: string) => {
+  switch (direction) {
+    case "up":
+      return height;
+    case "down":
+      return -height;
+    case "left":
+      return width;
+    case "right":
+      return -width;
+    default:
+      return 0;
+  }
+};
+
+export const useSlideAnimation = ({
+  duration = 1000,
+  delay = 0,
+  direction = "up",
+  closeAfter,
+  initialValue,
+}: UseSlideAnimationProps = {}) => {
+  const translateValue = useRef(new Animated.Value(0)).current;
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      translateValue.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    const initialPosition = initialValue || getInitialPosition(direction);
+    translateValue.setValue(initialPosition);
+
+    // Slide-in animation with ease-out effect
+    Animated.timing(translateValue, {
+      toValue: 0,
+      duration,
+      delay,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+
+    if (closeAfter) {
+      const timer = setTimeout(() => {
+        Animated.timing(translateValue, {
+          toValue: initialPosition,
+          duration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }).start();
+      }, closeAfter + duration + delay);
+
+      return () => {
+        translateValue.stopAnimation();
+        clearTimeout(timer);
+      };
+    }
+
+    return () => {
+      translateValue.stopAnimation();
+    };
+  }, [translateValue, duration, delay, direction, closeAfter]);
+
+  const slideStyle =
+    direction === "up" || direction === "down"
+      ? { transform: [{ translateY: translateValue }] }
+      : { transform: [{ translateX: translateValue }] };
+
+  return {
+    animatedStyle: slideStyle,
+  };
+};

package/src/Components/Animators/hooks/useThrownUpAnimation.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from "react";
+import { Animated, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseThrownUpAnimationProps {
+  delay?: number;
+  closeAfter?: number | null;
+}
+
+export const useThrownUpAnimation = ({
+  delay = 0,
+  closeAfter = 3000,
+}: UseThrownUpAnimationProps = {}) => {
+  const translateY = useRef(new Animated.Value(600)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const isUnmounting = useRef(false);
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      translateY.stopAnimation();
+      opacity.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // Animate up and fade in when component mounts
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        velocity: 1,
+        tension: 0.001,
+        friction: 2,
+        useNativeDriver: true,
+        delay,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+        delay,
+      }),
+    ]).start();
+
+    // Start timer to animate out after duration
+    let timer: NodeJS.Timeout | null = null;
+    if (closeAfter) {
+      timer = setTimeout(() => {
+        if (!isUnmounting.current) {
+          Animated.parallel([
+            Animated.spring(translateY, {
+              toValue: 800,
+              velocity: 1,
+              tension: 10,
+              friction: 7,
+              useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+              toValue: 0,
+              duration: 500,
+              useNativeDriver: true,
+            }),
+          ]).start();
+        }
+      }, closeAfter);
+    }
+
+    return () => {
+      if (timer) clearTimeout(timer);
+      translateY.stopAnimation();
+      opacity.stopAnimation();
+      isUnmounting.current = true;
+    };
+  }, [translateY, opacity, delay, closeAfter]);
+
+  return {
+    animatedStyle: {
+      transform: [{ translateY }],
+      opacity,
+    },
+  };
+};

package/src/types.ts

@@ -2,7 +2,6 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  Text,
   TextInputProps,
   TextProps,
   TextStyle,
@@ -79,14 +78,7 @@ export interface AvatarProps {
   size?: number;
   style?: ViewStyle;
 }
-export interface AnimatorProps {
-  style?: ViewStyle;
-  duration?: number;
-  children: ReactNode;
-  delay?: number;
-  animationType?: "easeInEaseOut" | "linear" | "spring";
-  type?: "fade" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
-}
+
 export interface ButtonProps {
   color?: colorTypes;
   variant?: "text" | "outlined" | "contained";
@@ -325,3 +317,58 @@ export interface DividerProps {
   style?: ViewStyle;
   height?: number;
 }
+
+export type AnimationType =
+  | "fade"
+  | "grow"
+  | "slide"
+  | "blink"
+  | "float"
+  | "roll"
+  | "thrownup";
+
+// Base props that are common to all animations
+interface BaseAnimatorProps {
+  children: ReactNode;
+  duration?: number;
+  delay?: number;
+  closeAfter?: number | null;
+  style?: ViewStyle;
+}
+
+// Type-specific animation props using discriminated unions
+export type AnimatorProps =
+  | (BaseAnimatorProps & {
+      type: "fade";
+      // No additional props for fade animation
+    })
+  | (BaseAnimatorProps & {
+      type: "grow";
+      initialScale?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "slide";
+      direction?: "up" | "down" | "left" | "right";
+      initialValue?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "blink";
+      blinkDuration?: number;
+      minOpacity?: number;
+      maxOpacity?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "float";
+      closeDuration?: number;
+      floatDistance?: number;
+      floatDuration?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "roll";
+      initialTranslateY?: number;
+      initialRotate?: string;
+    })
+  | (BaseAnimatorProps & {
+      type: "thrownup";
+      // No additional props for thrownup animation
+    });

package/src/Components/Animator.tsx

@@ -1,43 +0,0 @@
-import { useFocusEffect } from "@react-navigation/native";
-import React, { FC, useCallback, useState } from "react";
-import { LayoutAnimation, View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
-import { AnimatorProps } from "../types";
-
-export const Animator: FC<AnimatorProps> = ({
-  style = {},
-  duration = 500,
-  children,
-  delay = 100,
-  animationType = "easeInEaseOut",
-  type = "fade",
-}) => {
-  const [play, setPlay] = useState(false);
-  const toggleAnimation = () => {
-    setPlay(false);
-
-    setTimeout(() => {
-      LayoutAnimation.configureNext({
-        ...LayoutAnimation.Presets[animationType],
-        duration,
-      });
-      setPlay(true);
-    }, delay);
-  };
-  const styles = ScaledSheet.create({
-    root: {
-      opacity: play ? 1 : 0,
-      left: type === "slideInLeft" ? (!play ? -200 : 0) : undefined,
-      right: type === "slideInRight" ? (!play ? -200 : 0) : undefined,
-      bottom: type === "slideInUp" ? (!play ? -100 : 0) : undefined,
-      top: type === "slideInDown" ? (!play ? -100 : 0) : undefined,
-      ...style,
-    },
-  });
-  useFocusEffect(
-    useCallback(() => {
-      toggleAnimation();
-    }, [])
-  );
-  return <View style={styles.root}>{play && children}</View>;
-};