cdslibrary 1.2.101 → 1.2.102

package/components/CDSSnackBar.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Text, TouchableOpacity,  } from "react-native";
+import { StyleSheet, Text, TouchableOpacity, } from "react-native";
 import Animated, {
     useSharedValue,
     useAnimatedStyle,
     withSpring,
     withTiming,
-    runOnJS
+    runOnJS, 
+    interpolate
 } from "react-native-reanimated";
 import { GestureDetector, Gesture, } from "react-native-gesture-handler";
 import { useTheme } from "../context/CDSThemeContext";
@@ -13,61 +14,59 @@ import { useTheme } from "../context/CDSThemeContext";
 
 export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
     const { theme } = useTheme();
-    const translateY = useSharedValue(100); // Empezamos fuera de pantalla
+    const translateY = useSharedValue(150); // Empezamos ocultos abajo
 
-    // Sincronizar visibilidad con animación
+    // 1. UN SOLO useEffect para controlar la entrada y salida
     useEffect(() => {
-        if (visible) {
-            translateY.value = withSpring(0, { damping: 15 });
-        } else {
-            translateY.value = withTiming(150);
-        }
+        translateY.value = withTiming(visible ? 0 : 150, { 
+            duration: 300 
+        });
     }, [visible]);
 
-    // Lógica de auto-ocultado
+    // 2. Timer de auto-ocultado (solo si es visible)
     useEffect(() => {
-        let timer;
-        if (visible) {
-            timer = setTimeout(() => {
-                if (onDismiss) onDismiss();
-            }, 4000);
-        }
+        if (!visible) return;
+        
+        const timer = setTimeout(() => {
+            if (onDismiss) onDismiss();
+        }, 4000);
+        
         return () => clearTimeout(timer);
     }, [visible, onDismiss]);
 
-    // Configuración del Gesto (Pan Gesture)
     const gesture = Gesture.Pan()
         .onUpdate((event) => {
-            // Solo permitimos arrastrar hacia abajo (valores positivos de Y)
-            if (event.translationY > 0) {
-                translateY.value = event.translationY;
-            }
+            if (event.translationY > 0) translateY.value = event.translationY;
         })
         .onEnd((event) => {
-            // Si se arrastró más de 50px o la velocidad es alta, cerramos
             if (event.translationY > 50 || event.velocityY > 500) {
                 translateY.value = withTiming(150, {}, () => {
                     if (onDismiss) runOnJS(onDismiss)();
                 });
             } else {
-                // Si no, regresa a su posición original
                 translateY.value = withSpring(0);
             }
         });
 
-    const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        { translateY: translateY.value }
-      ],
-    };
-  });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+        // OPCIONAL: Añadimos opacidad para que no se vea el "fantasma" si se queda trabado
+        opacity: interpolate(translateY.value, [0, 100], [1, 0]),
+    }));
 
-  useEffect(() => {
-    translateY.value = withTiming(visible ? 0 : 150, { duration: 400 });
-  }, [visible]);
+    // IMPORTANTE: Eliminamos el "if (!visible) return null" manual para dejar 
+    // que Reanimated maneje la salida. Si quieres optimizar, usa un estado local:
+    const [shouldRender, setShouldRender] = React.useState(visible);
 
-    if (!visible && translateY.value >= 100) return null;
+    useEffect(() => {
+        if (visible) setShouldRender(true);
+        else {
+            const timer = setTimeout(() => setShouldRender(false), 400);
+            return () => clearTimeout(timer);
+        }
+    }, [visible]);
+
+    if (!shouldRender) return null;
 
     return (
         <GestureDetector gesture={gesture}>
@@ -83,18 +82,12 @@ export const CDSSnackBar = ({ message, visible, onDismiss, action }) => {
                     }
                 ]}
             >
-                <Text style={[
-                    theme.typography.regular.sm,
-                    { color: theme.text.neutral.contrast, flex: 1 }
-                ]}>
+                <Text style={[theme.typography.regular.sm, { color: theme.text.neutral.contrast, flex: 1 }]}>
                     {message}
                 </Text>
-
                 {action && (
                     <TouchableOpacity onPress={onDismiss} style={styles.actionButton}>
-                        <Text style={[theme.typography.label, {
-                            color: theme.text.neutral.contrast,
-                        }]}>
+                        <Text style={[theme.typography.label, { color: theme.text.neutral.contrast }]}>
                             {action}
                         </Text>
                     </TouchableOpacity>
@@ -113,8 +106,8 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        bottom: 40, 
-        zIndex: 9999, 
+        bottom: 40,
+        zIndex: 9999,
         elevation: 10,
     },
     actionButton: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdslibrary",
   "license": "0BSD",
-  "version": "1.2.101",
+  "version": "1.2.102",
   "main": "index.js",
   "author": "Nat Viramontes",
   "description": "A library of components for the CDS project",