@hoddy-ui/core 2.5.25 → 2.5.27

package/package.json

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

package/src/Components/FlashMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import Animated, {
   runOnJS,
@@ -12,7 +12,20 @@ import { useColors } from "../hooks";
 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();
@@ -43,33 +56,44 @@ const FlashMessage: React.FC = () => {
     });
   };
 
-  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);
-
-    // Animate in
-    translateY.value = withTiming(0, { duration: 300 });
-    opacity.value = withTiming(1, { duration: 300 });
+  useEffect(() => {
+    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);
+    };
 
-    // 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();
+    };
+  }, [message, opacity, translateY]);
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -104,7 +128,7 @@ const FlashMessage: React.FC = () => {
     },
   });
 
-  if (!message) return null;
+  // if (!message) return null;
 
   return (
     <Animated.View style={[styles.root, animatedStyle]}>

package/src/Components/Popup.tsx

@@ -42,6 +42,7 @@ export const Popup: React.FC<PopupProps> = ({
   const theme = useTheme();
   const colors = useColors();
   const [modalVisible, setModalVisible] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const { bottom } = useSafeAreaInsets();
 
@@ -74,25 +75,31 @@ export const Popup: React.FC<PopupProps> = ({
     };
   }, []);
 
+  const _onModalShow = () => {
+    setModalVisible(true);
+    onModalShow?.();
+  };
+  const _onModalHide = () => {
+    onModalHide?.();
+    setModalOpen(false);
+  };
+
   // Trigger animations when open prop changes
   useEffect(() => {
     if (open) {
-      setModalVisible(true);
+      setModalOpen(true);
       // Opening animation
       backdropOpacity.value = withTiming(1, { duration: 300 });
       contentTranslateY.value = withTiming(0, { duration: 300 }, () => {
-        if (onModalShow) {
-          runOnJS(onModalShow)();
-        }
+        runOnJS(_onModalShow)();
       });
     } else {
       // Closing animation
+      setModalVisible(false);
+
       backdropOpacity.value = withTiming(0, { duration: 200 });
       contentTranslateY.value = withTiming(1000, { duration: 200 }, () => {
-        runOnJS(setModalVisible)(false);
-        if (onModalHide) {
-          runOnJS(onModalHide)();
-        }
+        runOnJS(_onModalHide)();
       });
     }
   }, [open]);
@@ -167,7 +174,7 @@ export const Popup: React.FC<PopupProps> = ({
       transparent
       animationType="none"
       statusBarTranslucent
-      visible={modalVisible}
+      visible={modalOpen}
       onRequestClose={closeAction}
     >
       <UIThemeProvider>
@@ -181,7 +188,7 @@ export const Popup: React.FC<PopupProps> = ({
         >
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View style={styles.root}>
-              {open && (
+              {modalOpen && (
                 <Pressable
                   style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
                   onPress={closeAction}
@@ -190,10 +197,14 @@ export const Popup: React.FC<PopupProps> = ({
 
               <Animated.View
                 style={[styles.avoidingView, contentAnimatedStyle]}
-                layout={LinearTransition.springify()
-                  .stiffness(200)
-                  .mass(0.5)
-                  .damping(100)}
+                layout={
+                  modalVisible
+                    ? LinearTransition.springify()
+                        .stiffness(200)
+                        .mass(0.5)
+                        .damping(100)
+                    : undefined
+                }
               >
                 <View style={styles.container}>
                   {!bare && (