testing

src/components/common/AnimatedCard.tsx

@@ -6,20 +6,20 @@ import {
   TouchableWithoutFeedback,
   Animated,
   ViewStyle,
+  StyleProp,
 } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import Ionicons from "react-native-vector-icons/Ionicons";
-import { IoniconsIconName } from "react-native-vector-icons/Ionicons";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 import colors from "../colors"; // Assuming your pastel colors are defined here
 
 type CardProps = {
   title: string;
   subtitle?: string;
-  iconName?: IoniconsIconName;
+  iconName?: string;
   onPress?: () => void;
   backOne?: string;
   backTwo?: string;
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
 };
 
 const AnimatedCard: React.FC<CardProps> = ({
@@ -27,18 +27,26 @@ const AnimatedCard: React.FC<CardProps> = ({
   subtitle,
   iconName = "ellipse",
   onPress,
-  backOne = colors.pastelPink, // Defaulting to pastelPink
+  backOne = colors.pastelPink, // Defaulting to pastelPink from your preferences
   backTwo = colors.primary,
   style,
 }) => {
   const scale = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, friction: 4 }).start();
+    Animated.spring(scale, {
+      toValue: 0.96,
+      useNativeDriver: true,
+      friction: 4,
+    }).start();
   };
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 4 }).start(() => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      friction: 4,
+    }).start(() => {
       if (onPress) {
         onPress();
       }
@@ -60,7 +68,14 @@ const AnimatedCard: React.FC<CardProps> = ({
 
           {/* Content */}
           <View style={styles.content}>
-            {iconName && <Ionicons name={iconName} size={38} color="#fff" style={styles.icon} />}
+            {iconName && (
+              <Ionicons
+                name={iconName}
+                size={38}
+                color="#fff"
+                style={styles.icon}
+              />
+            )}
             <View style={styles.textContainer}>
               <Text style={styles.title}>{title}</Text>
               {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
@@ -74,6 +89,10 @@ const AnimatedCard: React.FC<CardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
+    minWidth: 170,
+    flex: 1,
+    height: 170,
+    marginHorizontal: 8,
     marginVertical: 10,
     borderRadius: 24,
     overflow: "hidden",
@@ -85,7 +104,6 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
   },
   gradient: {
-    minHeight: 150, // Increased height for better spacing
     position: "relative",
     flex: 1,
     justifyContent: "center",
@@ -121,15 +139,15 @@ const styles = StyleSheet.create({
     marginBottom: 12,
   },
   textContainer: {
-    alignItems: 'center',
+    alignItems: "center",
   },
   title: {
     fontSize: 18,
     fontWeight: "bold",
     color: "#fff",
-    textTransform: 'uppercase',
+    textTransform: "uppercase",
     letterSpacing: 1,
-    textAlign: 'center',
+    textAlign: "center",
   },
   subtitle: {
     fontSize: 13,