feat: Implement safe access for theme properties with fallbacks in FriendsScreen, GroupDetailsScreen, HomeScreen, ModernButton, ModernCard, and useAppTheme

Author: Devasy

frontend/screens/FriendsScreen.js

@@ -26,7 +26,7 @@ const FriendsScreen = () => {
         explanationContainer: {
             backgroundColor: '#f8fafc',
             margin: 8,
-            borderRadius: theme.custom.borderRadius,
+            borderRadius: theme?.custom?.borderRadius || 8, // Safe access with fallback
             borderLeftWidth: 3,
             borderLeftColor: '#3b82f6',
             shadowOffset: { width: 0, height: 1 },

frontend/screens/GroupDetailsScreen.js

@@ -61,7 +61,7 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     },
     owedSection: {
       backgroundColor: '#fef7f7',
-      borderRadius: theme.custom.borderRadius,
+      borderRadius: theme?.custom?.borderRadius || 8, // Safe access with fallback
       padding: 16,
       borderLeftWidth: 3,
       borderLeftColor: '#ef4444',
@@ -72,7 +72,7 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     },
     receiveSection: {
       backgroundColor: '#f0fdf4',
-      borderRadius: theme.custom.borderRadius,
+      borderRadius: theme?.custom?.borderRadius || 8, // Safe access with fallback
       padding: 16,
       borderLeftWidth: 3,
       borderLeftColor: '#22c55e',

frontend/screens/HomeScreen.js

@@ -44,7 +44,7 @@ const HomeScreen = ({ navigation }) => {
       backgroundColor: 'white',
       padding: 20,
       margin: 20,
-      borderRadius: theme.custom.borderRadiusLarge || 12,
+      borderRadius: theme?.custom?.borderRadiusLarge || 12, // Safe access with fallback
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.08,
       shadowRadius: 8,

frontend/src/components/ModernButton.js

@@ -10,7 +10,7 @@ const ModernButton = ({ style, mode = 'contained', children, ...props }) => {
 
   const getButtonStyle = () => {
     const baseStyle = {
-      borderRadius: theme.custom.borderRadius,
+      borderRadius: theme?.custom?.borderRadius || 8, // Safe access with fallback
     };
 
     switch (mode) {

frontend/src/components/ModernCard.js

@@ -10,23 +10,29 @@ const ModernCard = ({ children, style, variant = 'default', ...props }) => {
 
   const getCardStyle = () => {
     const baseStyle = {
-      backgroundColor: theme.colors.surface,
-      borderRadius: theme.custom.borderRadius,
-      ...theme.custom.shadow.small,
+      backgroundColor: theme?.colors?.surface || '#ffffff',
+      borderRadius: theme?.custom?.borderRadius || 8,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1,
     };
 
     switch (variant) {
       case 'elevated':
         return {
           ...baseStyle,
-          ...theme.custom.shadow.medium,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.08,
+          shadowRadius: 8,
+          elevation: 3,
         };
       case 'outlined':
         return {
           ...baseStyle,
           borderWidth: 1,
-          borderColor: theme.colors.outline,
-          shadowOpacity: 0, // Remove shadow for outlined variant
+          borderColor: theme?.colors?.outline || '#e1e1e6',
+          shadowOpacity: 0,
           elevation: 0,
         };
       default:

frontend/src/theme/useAppTheme.js

@@ -10,44 +10,50 @@ export const useAppTheme = () => {
   return {
     theme,
     // Utility functions for common styling patterns
-    borderRadius: theme.custom.borderRadius,
-    spacing: theme.custom.spacing,
+    borderRadius: theme?.custom?.borderRadius || 8,
+    spacing: theme?.custom?.spacing || { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
 
     // Common container styles with modern design
     getCardStyle: (customStyles = {}) => ({
-      borderRadius: theme.custom.borderRadius,
-      backgroundColor: theme.colors.surface,
-      ...theme.custom.shadow.small,
+      borderRadius: theme?.custom?.borderRadius || 8,
+      backgroundColor: theme?.colors?.surface || '#ffffff',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      elevation: 1,
       ...customStyles,
     }),
 
     getModalStyle: (customStyles = {}) => ({
-      backgroundColor: theme.colors.surface,
-      padding: theme.custom.spacing.lg,
-      margin: theme.custom.spacing.lg,
-      borderRadius: theme.custom.borderRadiusLarge, // Use larger radius only for modals
-      ...theme.custom.shadow.medium,
+      backgroundColor: theme?.colors?.surface || '#ffffff',
+      padding: theme?.custom?.spacing?.lg || 24,
+      margin: theme?.custom?.spacing?.lg || 24,
+      borderRadius: theme?.custom?.borderRadiusLarge || 12, // Use larger radius only for modals
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+      elevation: 3,
       ...customStyles,
     }),
 
     getSectionStyle: (backgroundColor, borderColor, customStyles = {}) => ({
-      backgroundColor: backgroundColor || theme.colors.surfaceVariant,
-      borderRadius: theme.custom.borderRadius,
-      padding: theme.custom.spacing.md,
+      backgroundColor: backgroundColor || theme?.colors?.surfaceVariant || '#f5f5f7',
+      borderRadius: theme?.custom?.borderRadius || 8,
+      padding: theme?.custom?.spacing?.md || 16,
       borderLeftWidth: 3, // Reduced from 4 for more subtle accent
       borderLeftColor: borderColor,
       ...customStyles,
     }),
 
     // Modern input styles
     getInputStyle: (customStyles = {}) => ({
-      backgroundColor: theme.colors.surface,
+      backgroundColor: theme?.colors?.surface || '#ffffff',
       ...customStyles,
     }),
 
     // Clean button styles
     getButtonStyle: (variant = 'contained', customStyles = {}) => ({
-      borderRadius: theme.custom.borderRadius,
+      borderRadius: theme?.custom?.borderRadius || 8,
       ...customStyles,
     }),
   };