@hoddy-ui/core 2.5.2 → 2.5.4

package/README.md

@@ -48,9 +48,6 @@ yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-nav
 import { initialize } from "@hoddy-ui/core";
 
 initialize({
-  // Custom font family
-  fontFamily: "Inter-Regular",
-
   // Google Maps API key for Locator component
   googleMapApiKey: "your-google-maps-api-key",
 
@@ -65,6 +62,17 @@ initialize({
       dark: "#4f46e5",
     },
   },
+
+  // Typography settings
+  typography: {
+    fontFamily: "Inter-Regular",
+    fontWeights: {
+      400: "Inter-Regular",
+      500: "Inter-Medium",
+      600: "Inter-SemiBold",
+      700: "Inter-Bold",
+    },
+  },
 });
 ```
 
@@ -141,24 +149,64 @@ Use the `initialize` function to configure the library globally:
 import { initialize } from "@hoddy-ui/core";
 
 initialize({
-  // Font family for all typography components
-  fontFamily?: string;
-
-  // Google Maps API key for Locator component
+  // Google Maps API key for map components
   googleMapApiKey?: string;
 
-  // Edge-to-edge display (skips Android navigation bar styling)
-  edgeToEdge?: boolean;
-
-  // Custom color overrides
+  // Custom color palette overrides
   colors?: {
     primary?: { main: string; light?: string; dark?: string };
     secondary?: { main: string; light?: string; dark?: string };
-    // ... and more
+    // ... and more color options
+  };
+
+  // Enable edge-to-edge display mode
+  edgeToEdge?: boolean;
+
+  // Typography settings
+  typography?: {
+    // Primary font family
+    fontFamily?: string;
+
+    // Font family mappings for each weight (Android support)
+    fontWeights?: {
+      100?: string;
+      200?: string;
+      300?: string;
+      400?: string;
+      500?: string;
+      600?: string;
+      700?: string;
+      800?: string;
+      900?: string;
+    };
   };
 });
 ```
 
+### Configuration Example
+
+```tsx
+initialize({
+  googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
+  edgeToEdge: true,
+  colors: {
+    primary: "#007AFF",
+    secondary: "#34C759",
+  },
+  typography: {
+    fontFamily: "Inter",
+    fontWeights: {
+      400: "Inter-Regular",
+      500: "Inter-Medium",
+      600: "Inter-SemiBold",
+      700: "Inter-Bold",
+    },
+  },
+});
+```
+
+**Note:** The `fontWeights` property is particularly useful for Android devices where different font weights require separate font family files. This allows you to map each weight (100-900) to its corresponding font family name.
+
 ### Theme Configuration
 
 The theme system automatically detects system preferences and can be controlled programmatically:

package/package.json

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

package/src/Components/Button.tsx

@@ -131,7 +131,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,
@@ -155,7 +155,7 @@ const Button: React.FC<ButtonProps> = forwardRef(
               variant === "text" || variant === "outlined" ? "main" : "text"
             ],
         fontWeight: variant === "outlined" ? "700" : "500",
-        fontSize: size === "small" ? "12@ms" : "14@ms",
+        fontSize: size === "small" ? "12@ms" : "13@ms",
         fontFamily: getConfig().DEFAULT_FONT_FAMILY || "System",
       },
     });

package/src/Components/FlashMessage.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from "react";
-import {
-  LayoutAnimation,
-  Touchable,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import React, { 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";
 
@@ -17,31 +17,71 @@ export let showFlashMessage: (msg: FlashMessageProps) => void = () => {};
 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;
+    }
+
+    // Animate out immediately
+    translateY.value = withTiming(-200, { duration: 300 });
+    opacity.value = withTiming(0, { duration: 300 }, () => {
+      runOnJS(hideMessage)();
+    });
+  };
 
   showFlashMessage = (msg: FlashMessageProps) => {
+    // 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);
-    setTimeout(() => {
-      setShow(true);
-    }, 50);
-
-    setTimeout(() => {
-      setShow(false);
-      setTimeout(() => {
-        setMessage(null);
-      }, 500);
-    }, msg.duration || 3000);
+
+    // 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);
   };
-  useEffect(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }, [show]);
+
+  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 +104,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/Popup.tsx

@@ -115,7 +115,7 @@ export const Popup: React.FC<PopupProps> = ({
     backdrop: {
       position: "absolute",
       height: "100%",
-      zIndex: -1,
+      zIndex: 1,
       width: "100%",
       backgroundColor: "#000b",
     },
@@ -133,13 +133,13 @@ export const Popup: React.FC<PopupProps> = ({
       visible={modalVisible}
       onRequestClose={closeAction}
     >
-      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
       <UIThemeProvider>
         <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
           <View style={styles.root}>
+            <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
             {open && (
               <Pressable
-                style={StyleSheet.absoluteFill}
+                style={[StyleSheet.absoluteFill, { zIndex: 2 }]}
                 onPress={closeAction}
               />
             )}

package/src/Components/Typography.tsx

@@ -45,7 +45,11 @@ const Typography: React.FC<TypographyProps> = forwardRef(
         alignItems: "center",
         textAlign: align,
         fontWeight: fontWeight,
-        fontFamily: fontFamily || getConfig().DEFAULT_FONT_FAMILY || undefined, // Use custom font if provided, else default
+        fontFamily:
+          fontFamily ||
+          getConfig().TYPOGRAPHY?.fontWeights?.[fontWeight] ||
+          getConfig().TYPOGRAPHY?.fontFamily ||
+          undefined, // Use custom font if provided, else default
       },
     });
 

package/src/config/KeyManager.ts

@@ -1,6 +1,11 @@
 type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
-  DEFAULT_FONT_FAMILY?: string;
+  TYPOGRAPHY?: {
+    fontFamily?: string;
+    fontWeights?: {
+      [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+    };
+  };
   EDGE_TO_EDGE?: boolean;
 };
 

package/src/config/index.ts

@@ -3,18 +3,53 @@ import { setExtraColors } from "../theme/colors";
 import { extraColorTypes } from "../types";
 import { setConfig } from "./KeyManager";
 
+/**
+ * Configuration options for the Hoddy UI library
+ *
+ * @example
+ * ```typescript
+ * initialize({
+ *   googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
+ *   edgeToEdge: true,
+ *   colors: {
+ *     primary: "#007AFF",
+ *     secondary: "#34C759"
+ *   },
+ *   typography: {
+ *     fontFamily: "Inter",
+ *     fontWeights: {
+ *       400: "Inter-Regular",
+ *       500: "Inter-Medium",
+ *       600: "Inter-SemiBold",
+ *       700: "Inter-Bold"
+ *     }
+ *   }
+ * });
+ * ```
+ */
 type configProps = {
+  /** Google Maps API key for map components */
   googleMapApiKey?: string;
+  /** Custom color palette overrides */
   colors?: extraColorTypes;
-  fontFamily?: string;
+  /** Enable edge-to-edge display mode */
   edgeToEdge?: boolean;
+  /** Typography settings */
+  typography?: {
+    /** Primary font family */
+    fontFamily?: string;
+    /** Font family mappings for each weight (Android support) */
+    fontWeights?: {
+      [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+    };
+  };
 };
 
 export function initialize(config: configProps): void {
   try {
     setConfig({
       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
-      DEFAULT_FONT_FAMILY: config.fontFamily,
+      TYPOGRAPHY: config.typography,
       EDGE_TO_EDGE: config.edgeToEdge ?? false,
     });
     if (config.colors) setExtraColors(config.colors);