cdslibrary 1.2.18 → 1.2.20

package/components/CDSBottomSheet.jsx

@@ -17,7 +17,7 @@ export const CDSBottomSheet = ({
   customSlot,
   primaryButtonLabel = "Aceptar",
   primaryButtonOnPress,
-  secondaryButtonLabel = "Cancelar",
+  secondaryButtonLabel,
   onFinish,
 }) => {
   const { theme } = useTheme();

package/components/CDSSplashScreen.jsx

@@ -1,73 +1,67 @@
-import { View, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import LottieView from "lottie-react-native";
-import { useRef, useEffect } from "react";
+import { useEffect } from "react";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withTiming,
+  runOnJS,
 } from "react-native-reanimated";
 import { useTheme } from "../context/CDSThemeContext";
 
-export const CDSSplashScreen = ({ navigation, nextScreen }) => {
+export const CDSSplashScreen = ({ onAnimationFinish }) => {
   const { theme } = useTheme();
-  const animation = useRef(null);
-  const translateY = useSharedValue(0); // Definir un sharedValue para la posición vertical.
-  const size = useSharedValue(200); // Definir un sharedValue para el tamaño inicial.
-  const backgroundOpacity = useSharedValue(1);
+  const translateY = useSharedValue(0);
+  const size = useSharedValue(200);
+  const opacity = useSharedValue(1);
+
   useEffect(() => {
-    // Después de 6 segundos, mover la animación hacia arriba y cambiar el tamaño.
-    setTimeout(() => {
-      translateY.value = withTiming(-350, { duration: 1000 }); // Mover hacia arriba
-      size.value = withTiming(120, { duration: 1000 }); // Reducir el tamaño
-      backgroundOpacity.value = withTiming(0, { duration: 1000 });
-      // Esperar 1 segundo más antes de hacer el cambio de pantalla
-      setTimeout(() => {
-        navigation.replace(nextScreen);
-      }, 600);
-    }, 6000); // Esperar 6 segundos antes de la animación
-  }, [translateY, size]);
+    // 1. Tiempo de espera de la animación principal (4 seg)
+    const timer = setTimeout(() => {
+      // 2. Animamos hacia arriba, achicamos y desvanecemos TODO
+      translateY.value = withTiming(-350, { duration: 1000 });
+      size.value = withTiming(120, { duration: 1000 });
+      opacity.value = withTiming(0, { duration: 1000 }, (isFinished) => {
+        if (isFinished && onAnimationFinish) {
+          // 3. Ejecutamos la función de cierre justo al terminar la animación
+          runOnJS(onAnimationFinish)();
+        }
+      });
+    }, 4000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const animatedContainerStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    backgroundColor: theme.surface.special.progress,
+  }));
 
-  // Aplicar el estilo animado para la animación
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }],
-      width: size.value, // Usar el tamaño animado
-      height: size.value, // Usar el tamaño animado
-    };
-  },[]);
+  const animatedIconStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    width: size.value,
+    height: size.value,
+  }));
 
   return (
-    <View style={styles.background}>
-      <View
-        style={[
-          styles.animationContainer,
-          { backgroundColor: theme.surface.special.progress },
-        ]}
-      >
-        <Animated.View
-          style={[
-            { justifyContent: "center", alignItems: "center" },
-            animatedStyle,
-          ]}
-        >
-          <LottieView
-            autoPlay
-            loop={false}
-            source={require("../assets/animations/animation.json")}
-            style={{ width: "100%", height: "100%" }} // Usar 100% del tamaño del contenedor
-          />
-        </Animated.View>
-      </View>
-    </View>
+    <Animated.View style={[styles.background, animatedContainerStyle]}>
+      <Animated.View style={animatedIconStyle}>
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require("../assets/animations/animation.json")}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </Animated.View>
+    </Animated.View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   background: {
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: 'blue',
     width: "100%",
   },
   animationContainer: {
@@ -78,4 +72,4 @@ const styles = StyleSheet.create({
     gap: 16,
     padding: 16,
   },
-});
+});

package/package.json

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