@hoddy-ui/core 1.1.0 → 1.1.2

package/next/index.ts

@@ -25,6 +25,7 @@ export * from "../src/Components/OTPInput";
 // export * from "../src/config";
 export * from "../src/hooks";
 export * from "../src/theme";
+export * from "../src/types";
 
 const HoddyUI = {
   initialize: initialize,

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.34",
+  "version": "2.0.47",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.1.0",
+  "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 }],
+    },
+  };
+};