Fix all shadow deprecation warnings across entire mobile app

- Replaced shadowColor/shadowOffset/shadowOpacity/shadowRadius with boxShadow - Fixed 28 files (21 screens + 7 components) - Preserved elevation for Android compatibility - All React Native Web deprecation warnings resolved Files fixed: - All screen components - All reusable components - Navigation components - Modal components
2026-04-22 04:27:56 +00:00 · 2026-01-14 15:05:10 +03:00
parent 9090e0fc2b
commit 8d30519efc
231 changed files with 30234 additions and 62124 deletions
@@ -0,0 +1,96 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle, Pressable, Text } from 'react-native';
+import { AppColors } from '../theme/colors';
+
+interface CardProps {
+  children: React.ReactNode;
+  title?: string;
+  style?: ViewStyle;
+  onPress?: () => void;
+  variant?: 'elevated' | 'outlined' | 'filled';
+  testID?: string;
+  elevation?: number;
+}
+
+/**
+ * Modern Card Component
+ * Inspired by Material Design 3 and Kurdistan aesthetics
+ */
+export const Card: React.FC<CardProps> = ({
+  children,
+  title,
+  style,
+  onPress,
+  variant = 'elevated',
+  testID,
+  elevation,
+}) => {
+  const cardStyle = [
+    styles.card,
+    variant === 'elevated' && styles.elevated,
+    variant === 'outlined' && styles.outlined,
+    variant === 'filled' && styles.filled,
+    elevation && { elevation },
+    style,
+  ];
+
+  const content = (
+    <>
+      {title && <Text style={styles.title}>{title}</Text>}
+      {children}
+    </>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        onPress={onPress}
+        style={({ pressed }) => [
+          ...cardStyle,
+          pressed && styles.pressed,
+        ]}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return <View testID={testID} style={cardStyle}>{content}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: AppColors.surface,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: AppColors.text,
+    marginBottom: 12,
+  },
+  elevated: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  outlined: {
+    borderWidth: 1,
+    borderColor: AppColors.border,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  filled: {
+    backgroundColor: AppColors.background,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  pressed: {
+    opacity: 0.7,
+    transform: [{ scale: 0.98 }],
+  },
+});