ikualo-ui-kit-mobile 2.1.18 → 2.1.19

package/app.json

@@ -3,7 +3,7 @@
     "name": "ikualo-app-2.0",
     "slug": "ikualo-app-20",
     "owner": "ikualo",
-    "version": "2.1.17",
+    "version": "2.1.19",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/dialogs/DialogDown.tsx

@@ -9,6 +9,7 @@ import {
   Animated,
   BackHandler,
   Platform,
+  InteractionManager,
 } from 'react-native';
 import { useEffect, useState, useRef } from 'react';
 import useStore from '../../store';
@@ -74,6 +75,7 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
   const { isVisible, title, children, onDismiss, image, showCloseButton = true, priority = 0, id } = props;
   const slideAnim = useRef(new Animated.Value(0)).current;
   const [currentDialog, setCurrentDialog] = useState<{ id: string; priority: number } | null>(null);
+  const [isAnimationReady, setIsAnimationReady] = useState(false);
   const [dialogId] = useState(() => {
     // Si se proporciona un id, usarlo. Si no, generar uno aleatorio
     return id || Math.random().toString(36).substring(2, 11);
@@ -112,17 +114,32 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
     };
   }, [dialogId]);
 
-  // Animación basada en si este diálogo es el actual
   useEffect(() => {
     const isCurrentDialog = currentDialog?.id === dialogId;
     if (isCurrentDialog) {
-      Animated.timing(slideAnim, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }).start();
+      setIsAnimationReady(false);
+      slideAnim.setValue(0);
+      const handle = InteractionManager.runAfterInteractions(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            if (currentDialog?.id === dialogId) {
+              setIsAnimationReady(true);
+              Animated.timing(slideAnim, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+              }).start();
+            }
+          });
+        });
+      });
+
+      return () => {
+        handle.cancel();
+      };
     } else {
       slideAnim.setValue(0);
+      setIsAnimationReady(false);
     }
   }, [currentDialog, slideAnim, dialogId]);
 
@@ -185,6 +202,7 @@ export const DialogDown = (props: IDialogDown & { priority?: 0 | 1 | 2 | 3 | 4 |
                     }),
                   },
                 ],
+                opacity: isAnimationReady ? 1 : 0,
               },
             ]}
           >