@hoddy-ui/core 2.0.0 → 2.0.36

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,8 +19,9 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
+    "@react-native-async-storage/async-storage": ">=1.18.1",
     "@types/react": ">=18.2.6",
-    "@types/react-native": "^0.72.0",
+    "@types/react-native": ">=0.72.0",
     "expo-haptics": ">=12.4.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
@@ -28,6 +29,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"
   },
@@ -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": "2.0.0",
+  "version": "2.0.36",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -13,6 +13,7 @@
   "private": false,
   "peerDependencies": {
     "@expo/vector-icons": ">=13.0.0",
+    "@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",
@@ -34,7 +35,6 @@
     "kinghoddy"
   ],
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.18.1",
     "react-native-size-matters": "^0.4.2"
   },
   "publishConfig": {

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/hooks/useFadeAnimation.ts

@@ -40,9 +40,7 @@ export const useFadeAnimation = ({
       withTiming(1, { duration }, () => {
         if (closeAfter) {
           // Schedule fade-out after closeAfter duration
-          setTimeout(() => {
-            opacity.value = withTiming(0, { duration });
-          }, closeAfter);
+          opacity.value = withDelay(closeAfter, withTiming(0, { duration }));
         }
       })
     );

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

@@ -64,11 +64,6 @@ export const useFloatAnimation = ({
     }
   };
 
-  const stopFloating = () => {
-    isFloating.current = false;
-    translateY.value = withTiming(0, { duration: 200 });
-  };
-
   useEffect(() => {
     if (!isActive && Platform.OS === "ios") {
       opacity.value = 0;
@@ -84,10 +79,15 @@ export const useFloatAnimation = ({
         startFloating();
 
         if (closeAfter) {
-          setTimeout(() => {
-            stopFloating();
-            opacity.value = withTiming(0, { duration: closeDuration });
-          }, closeAfter);
+          opacity.value = withDelay(
+            closeAfter,
+            withTiming(0, { duration: closeDuration })
+          );
+          translateY.value = withDelay(
+            closeAfter,
+            withTiming(0, { duration: closeDuration })
+          );
+          isFloating.current = false;
         }
       })
     );

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

@@ -48,12 +48,13 @@ export const useGrowAnimation = ({
         },
         () => {
           if (closeAfter) {
-            setTimeout(() => {
-              scale.value = withTiming(initialScale, {
+            scale.value = withDelay(
+              closeAfter,
+              withTiming(initialScale, {
                 duration,
                 easing: Easing.out(Easing.ease),
-              });
-            }, closeAfter);
+              })
+            );
           }
         }
       )

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

@@ -71,16 +71,20 @@ export const useRollAnimation = ({
         },
         () => {
           if (closeAfter) {
-            setTimeout(() => {
-              translateY.value = withTiming(initialTranslateY, {
+            translateY.value = withDelay(
+              closeAfter,
+              withTiming(initialTranslateY, {
                 duration,
                 easing: Easing.out(Easing.ease),
-              });
-              rotate.value = withTiming(0, {
+              })
+            );
+            rotate.value = withDelay(
+              closeAfter,
+              withTiming(0, {
                 duration,
                 easing: Easing.out(Easing.ease),
-              });
-            }, closeAfter);
+              })
+            );
           }
         }
       )

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

@@ -73,16 +73,13 @@ export const useSlideAnimation = ({
     );
 
     if (closeAfter) {
-      const timer = setTimeout(() => {
-        translateValue.value = withTiming(initialPosition, {
+      translateValue.value = withDelay(
+        closeAfter + duration + delay,
+        withTiming(initialPosition, {
           duration,
           easing: Easing.out(Easing.ease),
-        });
-      }, closeAfter + duration + delay);
-
-      return () => {
-        clearTimeout(timer);
-      };
+        })
+      );
     }
   }, [
     translateValue,

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

@@ -50,22 +50,19 @@ export const useThrownUpAnimation = ({
     opacity.value = withDelay(delay, withTiming(1, { duration: 500 }));
 
     // Start timer to animate out after duration
-    let timer: NodeJS.Timeout | null = null;
     if (closeAfter) {
-      timer = setTimeout(() => {
-        if (!isUnmounting.current) {
-          translateY.value = withSpring(800, {
-            velocity: 1,
-            stiffness: 200,
-            damping: 20,
-          });
-          opacity.value = withTiming(0, { duration: 500 });
-        }
-      }, closeAfter);
+      translateY.value = withDelay(
+        closeAfter,
+        withSpring(800, {
+          velocity: 1,
+          stiffness: 200,
+          damping: 20,
+        })
+      );
+      opacity.value = withDelay(closeAfter, withTiming(0, { duration: 500 }));
     }
 
     return () => {
-      if (timer) clearTimeout(timer);
       translateY.value = 600;
       opacity.value = 0;
       isUnmounting.current = true;

package/src/Components/Avatar.tsx

@@ -1,7 +1,7 @@
 import { AntDesign } from "@expo/vector-icons";
-import React from "react";
+import React, { useState } from "react";
 import { Image, View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { AvatarProps } from "../types";
 import Typography from "./Typography";
@@ -15,11 +15,12 @@ const Avatar: React.FC<AvatarProps> = ({
   style = {},
 }) => {
   const colors = useColors();
+  const [imageError, setImageError] = useState(false);
   const styles: any = ScaledSheet.create({
     root: {
       borderRadius: 150,
-      height: size + "@ms",
-      width: size + "@ms",
+      height: ms(size),
+      width: ms(size),
       alignItems: "center",
       justifyContent: "center",
       overflow: "hidden",
@@ -27,7 +28,7 @@ const Avatar: React.FC<AvatarProps> = ({
       borderColor: variant === "outlined" ? "#fff" : "#0000",
       backgroundColor:
         variant === "outlined"
-          ? null
+          ? undefined
           : label
           ? colors[color].main
           : colors.white[4],
@@ -41,8 +42,13 @@ const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <View style={styles.root}>
-      {source ? (
-        <Image resizeMode="cover" style={styles.image} source={source} />
+      {source && !imageError ? (
+        <Image
+          resizeMode="cover"
+          style={styles.image}
+          source={source}
+          onError={() => setImageError(true)}
+        />
       ) : label ? (
         <Typography style={{ color: colors[color].text }}>
           {label[0]}

package/src/Components/Button.tsx

@@ -1,17 +1,18 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import React, { forwardRef } from "react";
 import { ActivityIndicator, Text, TouchableOpacity } from "react-native";
-import { ScaledSheet, moderateScale } from "react-native-size-matters";
+import { ScaledSheet, moderateScale, ms } from "react-native-size-matters";
 import { getConfig } from "../config/KeyManager";
 import { useColors, useTheme } from "../hooks";
 import { ButtonProps, IconButtonProps, LinkButtonProps } from "../types";
+import { getFontFamily } from "../utility";
 
 export const LinkButton: React.FC<LinkButtonProps> = ({
   title,
   style = {},
   color = "blue",
   fontSize = 12,
-  fontWeight = "400",
+  fontWeight = 400,
   disabled,
   onPress = () => {},
 }) => {
@@ -20,8 +21,8 @@ export const LinkButton: React.FC<LinkButtonProps> = ({
   const styles: any = ScaledSheet.create({
     text: {
       fontSize: moderateScale(fontSize),
-      fontWeight: fontWeight,
-      fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+      fontWeight: fontWeight.toString() as any,
+      fontFamily: getFontFamily(fontWeight),
       color: disabled ? "#777" : colors[color].main,
     },
   });
@@ -51,7 +52,7 @@ export const IconButton: React.FC<IconButtonProps> = ({
     container: {
       alignSelf: "flex-start",
       flexGrow: 0,
-      backgroundColor: bg ? bgColor : elevation! > 0 ? bgColor : null,
+      backgroundColor: bg ? bgColor : elevation! > 0 ? bgColor : undefined,
       padding: "5@ms",
       shadowColor: "#000",
       shadowOpacity: 0.1,
@@ -59,8 +60,8 @@ export const IconButton: React.FC<IconButtonProps> = ({
         height: 1,
         width: 0,
       },
-      height: bg ? size + 20 + "@ms" : undefined,
-      width: bg ? size + 20 + "@ms" : undefined,
+      height: bg ? ms(size + 20) : undefined,
+      width: bg ? ms(size + 20) : undefined,
       alignItems: "center",
       justifyContent: "center",
       shadowRadius: elevation,
@@ -118,7 +119,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
         justifyContent: "center",
         backgroundColor:
           variant === "text" || variant === "outlined"
-            ? null
+            ? undefined
             : translucent
             ? translucent === "dark"
               ? colors.white[3] + "22"
@@ -131,7 +132,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
         borderRadius: rounded ? 30 : 10,
         elevation: variant === "text" ? 0 : elevation,
         paddingVertical:
-          size === "small" ? 8 : size === "large" ? "15@ms" : "13@ms",
+          size === "small" ? 8 : size === "large" ? "15@mvs" : "13@mvs",
         paddingHorizontal: size === "small" ? "10@ms" : "18@ms",
         borderColor: colors[color].main,
         borderWidth: variant === "outlined" ? 1 : 0,
@@ -143,7 +144,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
           width: 0,
         },
         shadowOpacity: variant === "text" ? 0 : 0.3,
-        width: fullWidth ? "100%" : null,
+        width: fullWidth ? "100%" : undefined,
         ...style,
       },
       text: {
@@ -155,8 +156,8 @@ const Button: React.FC<ButtonProps> = forwardRef(
               variant === "text" || variant === "outlined" ? "main" : "text"
             ],
         fontWeight: variant === "outlined" ? "700" : "500",
-        fontSize: size === "small" ? "12@ms" : "16@ms",
-        fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
+        fontSize: size === "small" ? "12@ms" : "13@ms",
+        fontFamily: getFontFamily(variant === "outlined" ? 700 : 500),
       },
     });
 

package/src/Components/FlashMessage.tsx

@@ -1,47 +1,111 @@
-import React, { useEffect, useState } from "react";
-import {
-  LayoutAnimation,
-  Touchable,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
-import { MaterialIcons } from "@expo/vector-icons";
 import { FlashMessageProps } from "../types";
 import Typography from "./Typography";
 
-export let showFlashMessage: (msg: FlashMessageProps) => void = () => {};
+// Event-based API to decouple the trigger from the component instance
+type FlashListener = (msg: FlashMessageProps) => void;
+const flashListeners = new Set<FlashListener>();
+
+export const showFlashMessage = (msg: FlashMessageProps) => {
+  flashListeners.forEach((listener) => listener(msg));
+};
+
+const subscribeToFlashMessages = (listener: FlashListener) => {
+  flashListeners.add(listener);
+  return () => {
+    flashListeners.delete(listener);
+  };
+};
 
 const FlashMessage: React.FC = () => {
   const { top } = useSafeAreaInsets();
   const [message, setMessage] = useState<null | FlashMessageProps>(null);
-  const [show, setShow] = useState(false);
   const colors = useColors();
   const type = message?.type || "success";
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Animated values
+  const translateY = useSharedValue(-200);
+  const opacity = useSharedValue(0);
+
+  const hideMessage = () => {
+    setMessage(null);
+  };
+
+  const closeMessage = () => {
+    // Clear existing timeout if any
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
 
-  showFlashMessage = (msg: FlashMessageProps) => {
-    setMessage(msg);
-    setTimeout(() => {
-      setShow(true);
-    }, 50);
-
-    setTimeout(() => {
-      setShow(false);
-      setTimeout(() => {
-        setMessage(null);
-      }, 500);
-    }, msg.duration || 3000);
+    // Animate out immediately
+    translateY.value = withTiming(-200, { duration: 300 });
+    opacity.value = withTiming(0, { duration: 300 }, () => {
+      runOnJS(hideMessage)();
+    });
   };
+
   useEffect(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }, [show]);
+    const listener: FlashListener = (msg) => {
+      // Clear existing timeout if any
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      // Reset position immediately before starting new animation
+      translateY.value = -200;
+      opacity.value = 0;
+
+      setMessage(msg);
+
+      // Animate in
+      translateY.value = withTiming(0, { duration: 300 });
+      opacity.value = withTiming(1, { duration: 300 });
+
+      // Animate out after duration
+      const duration = msg.duration || 3000;
+      timeoutRef.current = setTimeout(() => {
+        translateY.value = withTiming(-200, { duration: 300 });
+        opacity.value = withTiming(0, { duration: 300 }, () => {
+          runOnJS(hideMessage)();
+        });
+        timeoutRef.current = null;
+      }, duration);
+    };
+
+    const unsubscribe = subscribeToFlashMessages(listener);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      unsubscribe();
+    };
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value,
+    };
+  });
 
   const styles = ScaledSheet.create({
     root: {
       position: "absolute",
-      top: show ? 0 : -200,
+      top: 0,
       zIndex: 1000,
       left: 0,
       paddingTop: top + 10,
@@ -64,33 +128,46 @@ const FlashMessage: React.FC = () => {
     },
   });
 
+  if (!message) return null;
+
   return (
-    <View style={styles.root}>
-      <View style={{ flexDirection: "row" }}>
-        <View style={{ flex: 1, marginRight: 10 }}>
-          {message?.title && (
-            <Typography
-              variant="h6"
-              fontWeight={600}
-              gutterBottom={3}
-              style={{ color: "#fff" }}
-            >
-              {message?.title}
+    <Animated.View style={[styles.root, animatedStyle]}>
+      <TouchableOpacity onPress={closeMessage} activeOpacity={0.9}>
+        <View style={{ flexDirection: "row" }}>
+          <View style={{ flex: 1, marginRight: 10 }}>
+            {message?.title && (
+              <Typography
+                variant="h6"
+                fontWeight={600}
+                gutterBottom={3}
+                style={{ color: "#fff" }}
+              >
+                {message?.title}
+              </Typography>
+            )}
+            <Typography style={{ color: "#fff" }}>
+              {message?.message}
             </Typography>
-          )}
-          <Typography style={{ color: "#fff" }}>{message?.message}</Typography>
+          </View>
+          {/* <MaterialIcons color="#fff" size={36} name="error-outline" /> */}
         </View>
-        {/* <MaterialIcons color="#fff" size={36} name="error-outline" /> */}
-      </View>
+      </TouchableOpacity>
 
       {message?.actions?.map((cur, i) => (
-        <TouchableOpacity key={i} style={styles.action} onPress={cur.onPress}>
+        <TouchableOpacity
+          key={i}
+          style={styles.action}
+          onPress={() => {
+            cur.onPress?.();
+            closeMessage();
+          }}
+        >
           <Typography fontWeight={700} style={{ color: "#fff" }}>
             {cur.title}
           </Typography>
         </TouchableOpacity>
       ))}
-    </View>
+    </Animated.View>
   );
 };
 

package/src/Components/FormWrapper.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { ScaledSheet } from "react-native-size-matters";
 import { FormWrapperProps } from "../types";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 export const FormWrapper: React.FC<FormWrapperProps> = ({
   children,
   behavior = Platform.OS === "ios" ? "padding" : "height",
@@ -17,6 +18,9 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
   style = {},
   onScroll,
 }) => {
+  const { bottom } = useSafeAreaInsets();
+
+  const defaultOffset = Platform.OS === "ios" ? -bottom : -bottom * 2;
   const styles = ScaledSheet.create({
     root: {
       width: "100%",
@@ -24,13 +28,14 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
       ...style,
     },
   });
+
   return mode === "static" ? (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
       <KeyboardAvoidingView
         style={styles.root}
         behavior={behavior}
         contentContainerStyle={styles.root}
-        keyboardVerticalOffset={keyboardVerticalOffset}
+        keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
       >
         {children}
       </KeyboardAvoidingView>
@@ -39,7 +44,7 @@ export const FormWrapper: React.FC<FormWrapperProps> = ({
     <KeyboardAvoidingView
       behavior={behavior}
       style={styles.root}
-      keyboardVerticalOffset={keyboardVerticalOffset}
+      keyboardVerticalOffset={keyboardVerticalOffset || defaultOffset}
     >
       <ScrollView
         onScroll={onScroll}

package/src/Components/Grid.tsx

@@ -1,6 +1,6 @@
-import { View, Text } from "react-native";
 import React from "react";
-import { ScaledSheet } from "react-native-size-matters";
+import { View } from "react-native";
+import { ms, ScaledSheet } from "react-native-size-matters";
 import { GridItemProps, GridProps } from "../types";
 
 export const GridItem: React.FC<GridItemProps> = ({
@@ -12,8 +12,8 @@ export const GridItem: React.FC<GridItemProps> = ({
 }) => {
   const styles = ScaledSheet.create({
     gridItem: {
-      width: 100 / col + "%",
-      padding: spacing * 10 + "@ms",
+      width: `${100 / col}%`,
+      padding: ms(spacing * 10),
       alignItems: alignItems,
     },
   });
@@ -27,7 +27,7 @@ export const Grid: React.FC<GridProps> = ({
   const styles = ScaledSheet.create({
     grid: {
       flexWrap: "wrap",
-      margin: -spacing * 10 + "@ms",
+      margin: `${-spacing * 10}@ms`,
       flexDirection: "row",
     },
   });