cdslibrary 1.2.46 → 1.2.48

package/components/CDSBottomSheet.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, forwardRef } from "react";
 import { View, Text, Animated, Dimensions, StyleSheet, Pressable, Platform, ScrollView } from "react-native";
 import { CDSButton } from "./CDSButton";
 import { MaterialIcons } from "@expo/vector-icons";
@@ -8,7 +8,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 const { height, width } = Dimensions.get("window");
 const isMobile = width <= 878;
 
-export const CDSBottomSheet = ({
+const bottomSheetRender = ({
   type,
   isVisible,
   hasClose,
@@ -19,7 +19,7 @@ export const CDSBottomSheet = ({
   primaryButtonOnPress,
   secondaryButtonLabel,
   onFinish,
-}) => {
+}, ref) => {
   const { theme } = useTheme();
   const [modalVisible, setModalVisible] = useState(isVisible);
   const [modalOpacity] = useState(new Animated.Value(0));
@@ -104,6 +104,7 @@ export const CDSBottomSheet = ({
 
         <View style={styles.scrollWrapper}>
           <ScrollView
+            ref={ref}
             style={styles.scrollArea}
             contentContainerStyle={[styles.scrollContent, { paddingBottom: theme.space.xl }]}
             showsVerticalScrollIndicator={true}
@@ -189,6 +190,7 @@ const styles = StyleSheet.create({
     },
   },
   scrollWrapper: {
+    overflow: 'visible',
     flex: 1,
     position: 'relative',
     width: '100%',
@@ -221,4 +223,7 @@ const styles = StyleSheet.create({
       marginTop: 'auto',
     },
   },
-});
+});
+
+
+export const CDSBottomSheet = forwardRef(bottomSheetRender);

package/components/CDSCardFeedback.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Platform, Animated } from "react-native";
+import { View, Text, StyleSheet, TouchableOpacity, Platform, Animated, LayoutAnimation } from "react-native";
 
 
 import { MaterialIcons } from "@expo/vector-icons";
@@ -26,11 +26,20 @@ export const CDSCardFeedback = ({
             useNativeDriver: Platform.OS !== 'web'
         }).start(() => {
             // Una vez que la animación termina, ocultar el componente
-            setIsVisible(false);
+            requestAnimationFrame(() => {
+                setIsVisible(false);
+                if (onClose) onClose();
+            });
         })
     }
     if (!isVisible) return null;
 
+
+    const maxHeight = fadeAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1000] // 500 o un valor lo suficientemente alto para tu card
+    });
+
     const feedbackStyles = {
         success: {
             bg: theme.surface.feedback.success,
@@ -73,6 +82,8 @@ export const CDSCardFeedback = ({
             padding: theme.space.md,
             gap: theme.space.sm,
             opacity: fadeAnim,
+            maxHeight: maxHeight, // Esto obligará a la de abajo a subir
+            overflow: 'hidden',
             transform: [{
                 scale: fadeAnim.interpolate({
                     inputRange: [0, 1],

package/package.json

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