@hoddy-ui/core 1.1.4 → 2.0.35

package/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/next",
-  "version": "2.0.47",
+  "version": "2.0.61",
   "description": "Core rich react native components written in typescript, with support for expo-router",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,17 +19,19 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
-    "@types/react": "^18.2.6",
-    "@types/react-native": "^0.72.0",
+    "@react-native-async-storage/async-storage": ">=1.18.1",
+    "@types/react": ">=18.2.6",
+    "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
     "expo-router": ">=1.0.0",
     "expo-system-ui": ">=2.2.1",
-    "react": "^18.2.0",
+    "react": ">=18.2.0",
     "react-native": ">=0.71.8",
+    "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": ">=4.5.3",
-    "typescript": "^5.0.4"
+    "typescript": ">=5.0.4"
   },
   "keywords": [
     "react-native",
@@ -39,7 +41,6 @@
     "kinghoddy"
   ],
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.18.1",
     "react-native-size-matters": "^0.4.0"
   },
   "devDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.1.4",
+  "version": "2.0.35",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -13,7 +13,8 @@
   "private": false,
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
-    "@react-navigation/native": ">=6.1.7",
+    "@react-native-async-storage/async-storage": ">=1.18.1",
+    "@react-navigation/native": ">=6.1.6",
     "@types/react": ">=18.2.6",
     "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
@@ -22,6 +23,7 @@
     "expo-system-ui": ">=2.2.1",
     "react": ">=18.2.0",
     "react-native": ">=0.71.8",
+    "react-native-reanimated": ">=3.17.4",
     "react-native-safe-area-context": ">=4.5.3",
     "typescript": ">=5.0.4"
   },
@@ -33,10 +35,10 @@
     "kinghoddy"
   ],
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.18.1",
-    "react-native-size-matters": "^0.4.0"
+    "react-native-size-matters": "^0.4.2"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "devDependencies": {}
 }

package/src/Components/AlertX.tsx

@@ -1,7 +1,7 @@
 import { MaterialIcons } from "@expo/vector-icons";
 import React from "react";
 import { View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { AlertXProps } from "../types";
 import Typography from "./Typography";
@@ -16,7 +16,7 @@ const AlertX: React.FC<AlertXProps> = ({
 }) => {
   const colors = useColors();
 
-  const styles: any = ScaledSheet.create({
+  const styles = ScaledSheet.create({
     container: {
       padding: 20,
       paddingTop: 10,
@@ -24,7 +24,7 @@ const AlertX: React.FC<AlertXProps> = ({
       borderRadius: 8,
       alignItems: "center",
       flexDirection: "row",
-      marginBottom: gutterBottom + "@ms",
+      marginBottom: ms(gutterBottom),
       backgroundColor: colors[type].main + (variant === "contained" ? "" : "3"),
     },
     title: {
@@ -35,7 +35,7 @@ const AlertX: React.FC<AlertXProps> = ({
     },
   });
   return (
-    <View style={{ ...styles.container, ...style }}>
+    <View style={[styles.container, style]}>
       <View style={{ width: "80%" }}>
         <Typography style={styles.title} gutterBottom={3} fontWeight={700}>
           {title}

package/src/Components/Animators/Animator.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Animated } from "react-native";
+import Animated from "react-native-reanimated";
 import { AnimatorProps } from "../../types";
 import { useBlinkAnimation } from "./hooks/useBlinkAnimation";
 import { useFadeAnimation } from "./hooks/useFadeAnimation";

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

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { AppState, Platform } from "react-native";
 
 const useAppState = () => {
-  const [isActive, setIsActive] = useState(true);
+  const [isActive, setIsActive] = useState(AppState.currentState === "active");
 
   useEffect(() => {
     const handleAppStateChange = (nextAppState: string) => {
@@ -10,24 +10,17 @@ const useAppState = () => {
     };
 
     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")
-      );
+      // For Android, use the change event which covers both blur and focus
+      subscription = AppState.addEventListener("change", handleAppStateChange);
     } else {
+      // For iOS, use the change event as well
       subscription = AppState.addEventListener("change", handleAppStateChange);
     }
 
     return () => {
       subscription?.remove();
-      blurSub?.remove();
-      focusSub?.remove();
     };
   }, []);
 

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

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

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

@@ -1,5 +1,11 @@
-import { useEffect, useRef } from "react";
-import { Animated, Platform } from "react-native";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseFadeAnimationProps {
@@ -11,40 +17,36 @@ interface UseFadeAnimationProps {
 export const useFadeAnimation = ({
   duration = 1000,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
 }: UseFadeAnimationProps = {}) => {
-  const opacity = useRef(new Animated.Value(0)).current;
+  const opacity = useSharedValue(0);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      opacity.stopAnimation();
+      opacity.value = 0;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Fade-in animation
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
+    opacity.value = withDelay(
       delay,
-      useNativeDriver: true,
-    }).start(() => {
-      if (closeAfter) {
-        setTimeout(() => {
-          Animated.timing(opacity, {
-            toValue: 0,
-            duration,
-            useNativeDriver: true,
-          }).start();
-        }, closeAfter);
-      }
-    });
-
-    return () => opacity.stopAnimation();
-  }, [opacity, duration, delay, closeAfter]);
+      withTiming(1, { duration }, () => {
+        if (closeAfter) {
+          // Schedule fade-out after closeAfter duration
+          opacity.value = withDelay(closeAfter, withTiming(0, { duration }));
+        }
+      })
+    );
+  }, [opacity, duration, delay, closeAfter, isActive]);
 
   return {
-    animatedStyle: { opacity },
+    animatedStyle,
   };
 };

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

@@ -1,5 +1,14 @@
 import { useEffect, useRef } from "react";
-import { Animated, Easing, Platform } from "react-native";
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseFloatAnimationProps {
@@ -14,76 +23,79 @@ interface UseFloatAnimationProps {
 export const useFloatAnimation = ({
   duration = 800,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
   closeDuration = 600,
   floatDistance = 10,
   floatDuration = 1200,
 }: UseFloatAnimationProps = {}) => {
-  const opacity = useRef(new Animated.Value(0)).current;
-  const translateY = useRef(new Animated.Value(0)).current;
+  const opacity = useSharedValue(0);
+  const translateY = useSharedValue(0);
   const { isActive } = useAppState();
-  const floatAnim = useRef<Animated.CompositeAnimation | null>(null);
+  const isFloating = useRef(false);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }],
+    };
+  });
 
   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();
+    if (!isFloating.current) {
+      isFloating.current = true;
+      translateY.value = withRepeat(
+        withSequence(
+          withTiming(-floatDistance, {
+            duration: floatDuration / 2,
+            easing: Easing.inOut(Easing.quad),
+          }),
+          withTiming(floatDistance, {
+            duration: floatDuration,
+            easing: Easing.inOut(Easing.quad),
+          }),
+          withTiming(0, {
+            duration: floatDuration / 2,
+            easing: Easing.inOut(Easing.quad),
+          })
+        ),
+        -1,
+        false
+      );
+    }
   };
 
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      opacity.stopAnimation();
-      translateY.stopAnimation();
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Fade-in
-    Animated.timing(opacity, {
-      toValue: 1,
-      duration,
+    opacity.value = withDelay(
       delay,
-      useNativeDriver: true,
-    }).start(() => {
-      startFloating();
-
-      if (closeAfter) {
-        setTimeout(() => {
-          floatAnim.current?.stop();
+      withTiming(1, { duration }, () => {
+        startFloating();
 
-          Animated.timing(opacity, {
-            toValue: 0,
-            duration: closeDuration,
-            useNativeDriver: true,
-          }).start();
-        }, closeAfter);
-      }
-    });
+        if (closeAfter) {
+          opacity.value = withDelay(
+            closeAfter,
+            withTiming(0, { duration: closeDuration })
+          );
+          translateY.value = withDelay(
+            closeAfter,
+            withTiming(0, { duration: closeDuration })
+          );
+          isFloating.current = false;
+        }
+      })
+    );
 
     return () => {
-      opacity.stopAnimation();
-      translateY.stopAnimation();
-      floatAnim.current?.stop();
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
     };
   }, [
     duration,
@@ -92,12 +104,10 @@ export const useFloatAnimation = ({
     closeDuration,
     floatDistance,
     floatDuration,
+    isActive,
   ]);
 
   return {
-    animatedStyle: {
-      opacity,
-      transform: [{ translateY }],
-    },
+    animatedStyle,
   };
 };

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

@@ -1,5 +1,12 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing, Platform } from "react-native";
+import { useEffect } from "react";
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
 import useAppState from "./useAppState";
 
 interface UseGrowAnimationProps {
@@ -12,43 +19,49 @@ interface UseGrowAnimationProps {
 export const useGrowAnimation = ({
   duration = 500,
   delay = 0,
-  closeAfter = 2000,
+  closeAfter = null,
   initialScale = 0,
 }: UseGrowAnimationProps = {}) => {
-  const scale = useRef(new Animated.Value(initialScale)).current;
+  const scale = useSharedValue(initialScale);
   const { isActive } = useAppState();
 
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+    };
+  });
+
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
-      scale.stopAnimation();
+      scale.value = initialScale;
+      return;
     }
-  }, [isActive]);
 
-  useEffect(() => {
     // Start grow-in animation with easing
-    Animated.timing(scale, {
-      toValue: 1,
-      duration,
+    scale.value = withDelay(
       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]);
+      withTiming(
+        1,
+        {
+          duration,
+          easing: Easing.out(Easing.ease),
+        },
+        () => {
+          if (closeAfter) {
+            scale.value = withDelay(
+              closeAfter,
+              withTiming(initialScale, {
+                duration,
+                easing: Easing.out(Easing.ease),
+              })
+            );
+          }
+        }
+      )
+    );
+  }, [scale, duration, delay, closeAfter, initialScale, isActive]);
 
   return {
-    animatedStyle: { transform: [{ scale }] },
+    animatedStyle,
   };
 };