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-05-06 06:37: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,226 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { KurdistanColors } from '../../theme/colors';
+import type { StackHeaderProps } from '@react-navigation/stack';
+
+interface GradientHeaderProps extends StackHeaderProps {
+  subtitle?: string;
+  rightButtons?: React.ReactNode;
+  gradientColors?: [string, string];
+}
+
+export const GradientHeader: React.FC<GradientHeaderProps> = ({
+  navigation,
+  options,
+  route,
+  subtitle,
+  rightButtons,
+  gradientColors = [KurdistanColors.kesk, '#008f43'],
+}) => {
+  const title = options.headerTitle !== undefined
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : route.name;
+
+  const canGoBack = navigation.canGoBack();
+
+  return (
+    <LinearGradient colors={gradientColors} style={styles.gradientHeader}>
+      <View style={styles.headerContent}>
+        <View style={styles.headerLeft}>
+          {canGoBack && (
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              style={styles.backButton}
+            >
+              <Text style={styles.backButtonText}>←</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.headerCenter}>
+          <Text style={styles.headerTitle}>{title}</Text>
+          {subtitle && <Text style={styles.headerSubtitle}>{subtitle}</Text>}
+        </View>
+
+        <View style={styles.headerRight}>{rightButtons}</View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+interface SimpleHeaderProps extends StackHeaderProps {
+  rightButtons?: React.ReactNode;
+}
+
+export const SimpleHeader: React.FC<SimpleHeaderProps> = ({
+  navigation,
+  options,
+  route,
+  rightButtons,
+}) => {
+  const title = options.headerTitle !== undefined
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : route.name;
+
+  const canGoBack = navigation.canGoBack();
+
+  return (
+    <View style={styles.simpleHeader}>
+      <View style={styles.headerContent}>
+        <View style={styles.headerLeft}>
+          {canGoBack && (
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              style={styles.backButton}
+            >
+              <Text style={styles.simpleBackButtonText}>←</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.headerCenter}>
+          <Text style={styles.simpleHeaderTitle}>{title}</Text>
+        </View>
+
+        <View style={styles.headerRight}>{rightButtons}</View>
+      </View>
+    </View>
+  );
+};
+
+export const BackButton: React.FC<{ onPress?: () => void; color?: string }> = ({
+  onPress,
+  color = '#FFFFFF',
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.backButton}>
+      <Text style={[styles.backButtonText, { color }]}>←</Text>
+    </TouchableOpacity>
+  );
+};
+
+interface AppBarHeaderProps extends StackHeaderProps {
+  rightButtons?: React.ReactNode;
+}
+
+export const AppBarHeader: React.FC<AppBarHeaderProps> = ({
+  navigation,
+  options,
+  route,
+  rightButtons,
+}) => {
+  const title = options.headerTitle !== undefined
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : route.name;
+
+  const canGoBack = navigation.canGoBack();
+
+  return (
+    <View style={styles.appBarHeader}>
+      <View style={styles.headerContent}>
+        <View style={styles.headerLeft}>
+          {canGoBack && (
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              style={styles.backButton}
+            >
+              <Text style={styles.appBarBackButtonText}>←</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.headerCenter}>
+          <Text style={styles.appBarTitle}>{title}</Text>
+        </View>
+
+        <View style={styles.headerRight}>{rightButtons}</View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientHeader: {
+    paddingTop: 50,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+  },
+  simpleHeader: {
+    paddingTop: 50,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerLeft: {
+    width: 60,
+    alignItems: 'flex-start',
+  },
+  headerCenter: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  headerRight: {
+    width: 60,
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  headerSubtitle: {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    marginTop: 2,
+  },
+  simpleHeaderTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: KurdistanColors.reş,
+  },
+  backButton: {
+    padding: 8,
+  },
+  backButtonText: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  simpleBackButtonText: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: KurdistanColors.reş,
+  },
+  appBarHeader: {
+    paddingTop: 50,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+    backgroundColor: '#FFFFFF',
+    boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
+    elevation: 4,
+  },
+  appBarTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: KurdistanColors.reş,
+  },
+  appBarBackButtonText: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: KurdistanColors.kesk,
+  },
+});
@@ -0,0 +1,229 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { KurdistanColors } from '../../theme/colors';
+import type { StackHeaderProps } from '@react-navigation/stack';
+
+interface GradientHeaderProps extends StackHeaderProps {
+  subtitle?: string;
+  rightButtons?: React.ReactNode;
+  gradientColors?: [string, string];
+}
+
+export const GradientHeader: React.FC<GradientHeaderProps> = ({
+  navigation,
+  options,
+  route,
+  subtitle,
+  rightButtons,
+  gradientColors = [KurdistanColors.kesk, '#008f43'],
+}) => {
+  const title = options.headerTitle !== undefined
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : route.name;
+
+  const canGoBack = navigation.canGoBack();
+
+  return (
+    <LinearGradient colors={gradientColors} style={styles.gradientHeader}>
+      <View style={styles.headerContent}>
+        <View style={styles.headerLeft}>
+          {canGoBack && (
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              style={styles.backButton}
+            >
+              <Text style={styles.backButtonText}>←</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.headerCenter}>
+          <Text style={styles.headerTitle}>{title}</Text>
+          {subtitle && <Text style={styles.headerSubtitle}>{subtitle}</Text>}
+        </View>
+
+        <View style={styles.headerRight}>{rightButtons}</View>
+      </View>
+    </LinearGradient>
+  );
+};
+
+interface SimpleHeaderProps extends StackHeaderProps {
+  rightButtons?: React.ReactNode;
+}
+
+export const SimpleHeader: React.FC<SimpleHeaderProps> = ({
+  navigation,
+  options,
+  route,
+  rightButtons,
+}) => {
+  const title = options.headerTitle !== undefined
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : route.name;
+
+  const canGoBack = navigation.canGoBack();
+
+  return (
+    <View style={styles.simpleHeader}>
+      <View style={styles.headerContent}>
+        <View style={styles.headerLeft}>
+          {canGoBack && (
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              style={styles.backButton}
+            >
+              <Text style={styles.simpleBackButtonText}>←</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.headerCenter}>
+          <Text style={styles.simpleHeaderTitle}>{title}</Text>
+        </View>
+
+        <View style={styles.headerRight}>{rightButtons}</View>
+      </View>
+    </View>
+  );
+};
+
+export const BackButton: React.FC<{ onPress?: () => void; color?: string }> = ({
+  onPress,
+  color = '#FFFFFF',
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.backButton}>
+      <Text style={[styles.backButtonText, { color }]}>←</Text>
+    </TouchableOpacity>
+  );
+};
+
+interface AppBarHeaderProps extends StackHeaderProps {
+  rightButtons?: React.ReactNode;
+}
+
+export const AppBarHeader: React.FC<AppBarHeaderProps> = ({
+  navigation,
+  options,
+  route,
+  rightButtons,
+}) => {
+  const title = options.headerTitle !== undefined
+    ? options.headerTitle
+    : options.title !== undefined
+    ? options.title
+    : route.name;
+
+  const canGoBack = navigation.canGoBack();
+
+  return (
+    <View style={styles.appBarHeader}>
+      <View style={styles.headerContent}>
+        <View style={styles.headerLeft}>
+          {canGoBack && (
+            <TouchableOpacity
+              onPress={() => navigation.goBack()}
+              style={styles.backButton}
+            >
+              <Text style={styles.appBarBackButtonText}>←</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.headerCenter}>
+          <Text style={styles.appBarTitle}>{title}</Text>
+        </View>
+
+        <View style={styles.headerRight}>{rightButtons}</View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gradientHeader: {
+    paddingTop: 50,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+  },
+  simpleHeader: {
+    paddingTop: 50,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerLeft: {
+    width: 60,
+    alignItems: 'flex-start',
+  },
+  headerCenter: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  headerRight: {
+    width: 60,
+    alignItems: 'flex-end',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  headerSubtitle: {
+    fontSize: 12,
+    color: 'rgba(255, 255, 255, 0.8)',
+    marginTop: 2,
+  },
+  simpleHeaderTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: KurdistanColors.reş,
+  },
+  backButton: {
+    padding: 8,
+  },
+  backButtonText: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  simpleBackButtonText: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: KurdistanColors.reş,
+  },
+  appBarHeader: {
+    paddingTop: 50,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  appBarTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: KurdistanColors.reş,
+  },
+  appBarBackButtonText: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: KurdistanColors.kesk,
+  },
+});