@oxyhq/services 5.4.1 → 5.4.3

package/lib/commonjs/ui/screens/FileManagementScreen.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext");
-var _fonts = require("../styles/fonts");
-var _sonner = require("../../lib/sonner");
+var _OxyContext = require("../context/OxyContext.js");
+var _fonts = require("../styles/fonts.js");
+var _sonner = require("../../lib/sonner.js");
 var _vectorIcons = require("@expo/vector-icons");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -55,14 +55,25 @@ const FileManagementScreen = ({
   const [photoDimensions, setPhotoDimensions] = (0, _react.useState)({});
   const [loadingDimensions, setLoadingDimensions] = (0, _react.useState)(false);
   const [hoveredPreview, setHoveredPreview] = (0, _react.useState)(null);
-  const isDarkTheme = theme === 'dark';
-  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-  const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
-  const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
-  const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-  const primaryColor = '#007AFF';
-  const dangerColor = '#FF3B30';
-  const successColor = '#34C759';
+
+  // Memoize theme-related calculations to prevent unnecessary recalculations
+  const themeStyles = (0, _react.useMemo)(() => {
+    const isDarkTheme = theme === 'dark';
+    return {
+      isDarkTheme,
+      textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+      backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
+      secondaryBackgroundColor: isDarkTheme ? '#222222' : '#FFFFFF',
+      borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+      primaryColor: '#007AFF',
+      dangerColor: '#FF3B30',
+      successColor: '#34C759'
+    };
+  }, [theme]);
+
+  // Extract commonly used theme variables
+  const backgroundColor = themeStyles.backgroundColor;
+  const borderColor = themeStyles.borderColor;
   const targetUserId = userId || user?.id;
   const loadFiles = (0, _react.useCallback)(async (isRefresh = false) => {
     if (!targetUserId) return;
@@ -184,7 +195,7 @@ const FileManagementScreen = ({
   }, [oxyServices, photoDimensions]);
 
   // Create justified rows from photos with responsive algorithm
-  const createJustifiedRows = (0, _react.useCallback)(photos => {
+  const createJustifiedRows = (0, _react.useCallback)((photos, containerWidth) => {
     if (photos.length === 0) return [];
     const rows = [];
     const photosPerRow = 3; // Fixed 3 photos per row for consistency
@@ -614,9 +625,10 @@ const FileManagementScreen = ({
     const isVideo = file.contentType.startsWith('video/');
     const isAudio = file.contentType.startsWith('audio/');
     const hasPreview = isImage || isPDF || isVideo;
+    const borderColor = themeStyles.borderColor;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.fileItem, {
-        backgroundColor: secondaryBackgroundColor,
+        backgroundColor: themeStyles.secondaryBackgroundColor,
         borderColor
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -663,10 +675,10 @@ const FileManagementScreen = ({
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
                 name: "document",
                 size: 32,
-                color: primaryColor
+                color: themeStyles.primaryColor
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.pdfLabel, {
-                  color: primaryColor
+                  color: themeStyles.primaryColor
                 }],
                 children: "PDF"
               })]
@@ -675,10 +687,10 @@ const FileManagementScreen = ({
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
                 name: "play-circle",
                 size: 32,
-                color: primaryColor
+                color: themeStyles.primaryColor
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.videoLabel, {
-                  color: primaryColor
+                  color: themeStyles.primaryColor
                 }],
                 children: "VIDEO"
               })]
@@ -692,7 +704,7 @@ const FileManagementScreen = ({
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
                 name: getFileIcon(file.contentType),
                 size: 32,
-                color: primaryColor
+                color: themeStyles.primaryColor
               })
             }), _reactNative.Platform.OS === 'web' && hoveredPreview === file.id && isImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.previewOverlay,
@@ -707,25 +719,25 @@ const FileManagementScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: getFileIcon(file.contentType),
               size: 32,
-              color: primaryColor
+              color: themeStyles.primaryColor
             })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.fileInfo,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.fileName, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             numberOfLines: 1,
             children: file.filename
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: [styles.fileDetails, {
-              color: isDarkTheme ? '#BBBBBB' : '#666666'
+              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
             }],
             children: [formatFileSize(file.length), " \u2022 ", new Date(file.uploadDate).toLocaleDateString()]
           }), file.metadata?.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.fileDescription, {
-              color: isDarkTheme ? '#AAAAAA' : '#888888'
+              color: themeStyles.isDarkTheme ? '#AAAAAA' : '#888888'
             }],
             numberOfLines: 2,
             children: file.metadata.description
@@ -735,27 +747,27 @@ const FileManagementScreen = ({
         style: styles.fileActions,
         children: [hasPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.actionButton, {
-            backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0'
+            backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
           }],
           onPress: () => handleFileOpen(file),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "eye",
             size: 20,
-            color: primaryColor
+            color: themeStyles.primaryColor
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.actionButton, {
-            backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0'
+            backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
           }],
           onPress: () => handleFileDownload(file.id, file.filename),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "download",
             size: 20,
-            color: primaryColor
+            color: themeStyles.primaryColor
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.actionButton, {
-            backgroundColor: isDarkTheme ? '#400000' : '#FFEBEE'
+            backgroundColor: themeStyles.isDarkTheme ? '#400000' : '#FFEBEE'
           }],
           onPress: () => {
             handleFileDelete(file.id, file.filename);
@@ -763,16 +775,72 @@ const FileManagementScreen = ({
           disabled: deleting === file.id,
           children: deleting === file.id ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
             size: "small",
-            color: dangerColor
+            color: themeStyles.dangerColor
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "trash",
             size: 20,
-            color: dangerColor
+            color: themeStyles.dangerColor
           })
         })]
       })]
     }, file.id);
   };
+  const renderPhotoItem = (photo, index) => {
+    const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
+
+    // Calculate photo item width based on actual container size from bottom sheet
+    let itemsPerRow = 3; // Default for mobile
+    if (containerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
+    else if (containerWidth > 480) itemsPerRow = 4; // Large mobile
+
+    // Account for the photoScrollContainer padding (16px on each side = 32px total)
+    const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
+    const gaps = (itemsPerRow - 1) * 4; // Gap between items
+    const availableWidth = containerWidth - scrollContainerPadding;
+    const itemWidth = (availableWidth - gaps) / itemsPerRow;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: [styles.photoItem, {
+        width: itemWidth,
+        height: itemWidth
+      }],
+      onPress: () => handleFileOpen(photo),
+      activeOpacity: 0.8,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.photoContainer,
+        children: _reactNative.Platform.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: downloadUrl,
+          alt: photo.filename,
+          style: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            borderRadius: 8,
+            transition: 'transform 0.2s ease'
+          },
+          loading: "lazy",
+          onError: e => {
+            console.error('Photo failed to load:', e);
+            // Could replace with placeholder image
+          },
+          onMouseEnter: e => {
+            e.currentTarget.style.transform = 'scale(1.02)';
+          },
+          onMouseLeave: e => {
+            e.currentTarget.style.transform = 'scale(1)';
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+          source: {
+            uri: downloadUrl
+          },
+          style: styles.photoImage,
+          resizeMode: "cover",
+          onError: e => {
+            console.error('Photo failed to load:', e);
+          }
+        })
+      })
+    }, photo.id);
+  };
   const renderPhotoGrid = (0, _react.useCallback)(() => {
     const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
     if (photos.length === 0) {
@@ -781,20 +849,20 @@ const FileManagementScreen = ({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "images-outline",
           size: 64,
-          color: isDarkTheme ? '#666666' : '#CCCCCC'
+          color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.emptyStateTitle, {
-            color: textColor
+            color: themeStyles.textColor
           }],
           children: "No Photos Yet"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.emptyStateDescription, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: user?.id === targetUserId ? `Upload photos to get started. You can select multiple photos at once${_reactNative.Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}` : "This user hasn't uploaded any photos yet"
         }), user?.id === targetUserId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.emptyStateButton, {
-            backgroundColor: primaryColor
+            backgroundColor: themeStyles.primaryColor
           }],
           onPress: handleFileUpload,
           disabled: uploading,
@@ -820,17 +888,17 @@ const FileManagementScreen = ({
       refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
         refreshing: refreshing,
         onRefresh: () => loadFiles(true),
-        tintColor: primaryColor
+        tintColor: themeStyles.primaryColor
       }),
       showsVerticalScrollIndicator: false,
       children: [loadingDimensions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.dimensionsLoadingIndicator,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
           size: "small",
-          color: primaryColor
+          color: themeStyles.primaryColor
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.dimensionsLoadingText, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: "Loading photo layout..."
         })]
@@ -841,11 +909,11 @@ const FileManagementScreen = ({
         createJustifiedRows: createJustifiedRows,
         renderJustifiedPhotoItem: renderJustifiedPhotoItem,
         renderSimplePhotoItem: renderPhotoItem,
-        textColor: textColor,
+        textColor: themeStyles.textColor,
         containerWidth: containerWidth
       })]
     });
-  }, [filteredFiles, isDarkTheme, textColor, user?.id, targetUserId, uploading, primaryColor, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem]);
+  }, [filteredFiles, themeStyles, user?.id, targetUserId, uploading, handleFileUpload, refreshing, loadFiles, loadingDimensions, photoDimensions, loadPhotoDimensions, createJustifiedRows, renderJustifiedPhotoItem, renderPhotoItem, containerWidth]);
 
   // Separate component for the photo grid to optimize rendering
   const JustifiedPhotoGrid = /*#__PURE__*/_react.default.memo(({
@@ -885,7 +953,7 @@ const FileManagementScreen = ({
           style: styles.photoDateSection,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.photoDateHeader, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             children: new Date(date).toLocaleDateString('en-US', {
               weekday: 'long',
@@ -937,207 +1005,157 @@ const FileManagementScreen = ({
       })
     });
   });
-  const renderPhotoItem = (photo, index) => {
-    const downloadUrl = oxyServices.getFileDownloadUrl(photo.id);
-
-    // Calculate photo item width based on actual container size from bottom sheet
-    let itemsPerRow = 3; // Default for mobile
-    if (containerWidth > 768) itemsPerRow = 6; // Tablet/Desktop
-    else if (containerWidth > 480) itemsPerRow = 4; // Large mobile
-
-    // Account for the photoScrollContainer padding (16px on each side = 32px total)
-    const scrollContainerPadding = 32; // Total horizontal padding from photoScrollContainer
-    const gaps = (itemsPerRow - 1) * 4; // Gap between items
-    const availableWidth = containerWidth - scrollContainerPadding;
-    const itemWidth = (availableWidth - gaps) / itemsPerRow;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: [styles.photoItem, {
-        width: itemWidth,
-        height: itemWidth
-      }],
-      onPress: () => handleFileOpen(photo),
-      activeOpacity: 0.8,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.photoContainer,
-        children: _reactNative.Platform.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          src: downloadUrl,
-          alt: photo.filename,
-          style: {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            borderRadius: 8,
-            transition: 'transform 0.2s ease'
-          },
-          loading: "lazy",
-          onError: e => {
-            console.error('Photo failed to load:', e);
-            // Could replace with placeholder image
-          },
-          onMouseEnter: e => {
-            e.currentTarget.style.transform = 'scale(1.02)';
-          },
-          onMouseLeave: e => {
-            e.currentTarget.style.transform = 'scale(1)';
-          }
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-          source: {
-            uri: downloadUrl
-          },
-          style: styles.photoImage,
-          resizeMode: "cover",
-          onError: e => {
-            console.error('Photo failed to load:', e);
-          }
-        })
-      })
-    }, photo.id);
-  };
-  const renderFileDetailsModal = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: showFileDetails,
-    animationType: "slide",
-    presentationStyle: "pageSheet",
-    onRequestClose: () => setShowFileDetails(false),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.modalContainer, {
-        backgroundColor
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [styles.modalHeader, {
-          borderBottomColor: borderColor
+  const renderFileDetailsModal = () => {
+    const backgroundColor = themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: showFileDetails,
+      animationType: "slide",
+      presentationStyle: "pageSheet",
+      onRequestClose: () => setShowFileDetails(false),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.modalContainer, {
+          backgroundColor
         }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: styles.modalCloseButton,
-          onPress: () => setShowFileDetails(false),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "close",
-            size: 24,
-            color: textColor
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.modalTitle, {
-            color: textColor
-          }],
-          children: "File Details"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.modalPlaceholder
-        })]
-      }), selectedFile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        style: styles.modalContent,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.fileDetailCard, {
-            backgroundColor: secondaryBackgroundColor,
-            borderColor
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.modalHeader, {
+            borderBottomColor: borderColor
           }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.fileDetailIcon,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: styles.modalCloseButton,
+            onPress: () => setShowFileDetails(false),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: getFileIcon(selectedFile.contentType),
-              size: 64,
-              color: primaryColor
+              name: "close",
+              size: 24,
+              color: themeStyles.textColor
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.fileDetailName, {
-              color: textColor
+            style: [styles.modalTitle, {
+              color: themeStyles.textColor
             }],
-            children: selectedFile.filename
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.fileDetailInfo,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.detailRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailLabel, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: "Size:"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailValue, {
-                  color: textColor
-                }],
-                children: formatFileSize(selectedFile.length)
-              })]
+            children: "File Details"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.modalPlaceholder
+          })]
+        }), selectedFile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          style: styles.modalContent,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.fileDetailCard, {
+              backgroundColor: themeStyles.secondaryBackgroundColor,
+              borderColor
+            }],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.fileDetailIcon,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                name: getFileIcon(selectedFile.contentType),
+                size: 64,
+                color: themeStyles.primaryColor
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.fileDetailName, {
+                color: themeStyles.textColor
+              }],
+              children: selectedFile.filename
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.detailRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailLabel, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: "Type:"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailValue, {
-                  color: textColor
-                }],
-                children: selectedFile.contentType
+              style: styles.fileDetailInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.detailRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailLabel, {
+                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+                  }],
+                  children: "Size:"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailValue, {
+                    color: themeStyles.textColor
+                  }],
+                  children: formatFileSize(selectedFile.length)
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.detailRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailLabel, {
+                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+                  }],
+                  children: "Type:"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailValue, {
+                    color: themeStyles.textColor
+                  }],
+                  children: selectedFile.contentType
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.detailRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailLabel, {
+                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+                  }],
+                  children: "Uploaded:"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailValue, {
+                    color: themeStyles.textColor
+                  }],
+                  children: new Date(selectedFile.uploadDate).toLocaleString()
+                })]
+              }), selectedFile.metadata?.description && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: styles.detailRow,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailLabel, {
+                    color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+                  }],
+                  children: "Description:"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: [styles.detailValue, {
+                    color: themeStyles.textColor
+                  }],
+                  children: selectedFile.metadata.description
+                })]
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.detailRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailLabel, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
+              style: styles.modalActions,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                style: [styles.modalActionButton, {
+                  backgroundColor: themeStyles.primaryColor
                 }],
-                children: "Uploaded:"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailValue, {
-                  color: textColor
+                onPress: () => {
+                  handleFileDownload(selectedFile.id, selectedFile.filename);
+                  setShowFileDetails(false);
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                  name: "download",
+                  size: 20,
+                  color: "#FFFFFF"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.modalActionText,
+                  children: "Download"
+                })]
+              }), user?.id === targetUserId && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+                style: [styles.modalActionButton, {
+                  backgroundColor: themeStyles.dangerColor
                 }],
-                children: new Date(selectedFile.uploadDate).toLocaleString()
-              })]
-            }), selectedFile.metadata?.description && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.detailRow,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailLabel, {
-                  color: isDarkTheme ? '#BBBBBB' : '#666666'
-                }],
-                children: "Description:"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.detailValue, {
-                  color: textColor
-                }],
-                children: selectedFile.metadata.description
+                onPress: () => {
+                  setShowFileDetails(false);
+                  handleFileDelete(selectedFile.id, selectedFile.filename);
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+                  name: "trash",
+                  size: 20,
+                  color: "#FFFFFF"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.modalActionText,
+                  children: "Delete"
+                })]
               })]
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.modalActions,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-              style: [styles.modalActionButton, {
-                backgroundColor: primaryColor
-              }],
-              onPress: () => {
-                handleFileDownload(selectedFile.id, selectedFile.filename);
-                setShowFileDetails(false);
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                name: "download",
-                size: 20,
-                color: "#FFFFFF"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.modalActionText,
-                children: "Download"
-              })]
-            }), user?.id === targetUserId && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-              style: [styles.modalActionButton, {
-                backgroundColor: dangerColor
-              }],
-              onPress: () => {
-                setShowFileDetails(false);
-                handleFileDelete(selectedFile.id, selectedFile.filename);
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                name: "trash",
-                size: 20,
-                color: "#FFFFFF"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.modalActionText,
-                children: "Delete"
-              })]
-            })]
-          })]
-        })
-      })]
-    })
-  });
+          })
+        })]
+      })
+    });
+  };
   const renderFileViewer = () => {
     if (!openedFile) return null;
+    const backgroundColor = themeStyles.backgroundColor;
+    const borderColor = themeStyles.borderColor;
     const isImage = openedFile.contentType.startsWith('image/');
     const isText = openedFile.contentType.startsWith('text/') || openedFile.contentType.includes('json') || openedFile.contentType.includes('xml') || openedFile.contentType.includes('javascript') || openedFile.contentType.includes('typescript');
     const isPDF = openedFile.contentType.includes('pdf');
@@ -1157,19 +1175,19 @@ const FileManagementScreen = ({
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "arrow-back",
             size: 24,
-            color: textColor
+            color: themeStyles.textColor
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.fileViewerTitleContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.fileViewerTitle, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             numberOfLines: 1,
             children: openedFile.filename
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: [styles.fileViewerSubtitle, {
-              color: isDarkTheme ? '#BBBBBB' : '#666666'
+              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
             }],
             children: [formatFileSize(openedFile.length), " \u2022 ", openedFile.contentType]
           })]
@@ -1177,36 +1195,36 @@ const FileManagementScreen = ({
           style: styles.fileViewerActions,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: [styles.actionButton, {
-              backgroundColor: isDarkTheme ? '#333333' : '#F0F0F0'
+              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
             }],
             onPress: () => handleFileDownload(openedFile.id, openedFile.filename),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: "download",
               size: 20,
-              color: primaryColor
+              color: themeStyles.primaryColor
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: [styles.actionButton, {
-              backgroundColor: showFileDetailsInViewer ? primaryColor : isDarkTheme ? '#333333' : '#F0F0F0'
+              backgroundColor: showFileDetailsInViewer ? themeStyles.primaryColor : themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
             }],
             onPress: () => setShowFileDetailsInViewer(!showFileDetailsInViewer),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: showFileDetailsInViewer ? "chevron-up" : "information-circle",
               size: 20,
-              color: showFileDetailsInViewer ? "#FFFFFF" : primaryColor
+              color: showFileDetailsInViewer ? "#FFFFFF" : themeStyles.primaryColor
             })
           })]
         })]
       }), showFileDetailsInViewer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: [styles.fileDetailsSection, {
-          backgroundColor: secondaryBackgroundColor,
+          backgroundColor: themeStyles.secondaryBackgroundColor,
           borderColor
         }],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.fileDetailsSectionHeader,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.fileDetailsSectionTitle, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             children: "File Details"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -1215,7 +1233,7 @@ const FileManagementScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: "chevron-up",
               size: 20,
-              color: isDarkTheme ? '#BBBBBB' : '#666666'
+              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1224,12 +1242,12 @@ const FileManagementScreen = ({
             style: styles.detailRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailLabel, {
-                color: isDarkTheme ? '#BBBBBB' : '#666666'
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
               }],
               children: "File Name:"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailValue, {
-                color: textColor
+                color: themeStyles.textColor
               }],
               children: openedFile.filename
             })]
@@ -1237,12 +1255,12 @@ const FileManagementScreen = ({
             style: styles.detailRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailLabel, {
-                color: isDarkTheme ? '#BBBBBB' : '#666666'
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
               }],
               children: "Size:"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailValue, {
-                color: textColor
+                color: themeStyles.textColor
               }],
               children: formatFileSize(openedFile.length)
             })]
@@ -1250,12 +1268,12 @@ const FileManagementScreen = ({
             style: styles.detailRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailLabel, {
-                color: isDarkTheme ? '#BBBBBB' : '#666666'
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
               }],
               children: "Type:"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailValue, {
-                color: textColor
+                color: themeStyles.textColor
               }],
               children: openedFile.contentType
             })]
@@ -1263,12 +1281,12 @@ const FileManagementScreen = ({
             style: styles.detailRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailLabel, {
-                color: isDarkTheme ? '#BBBBBB' : '#666666'
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
               }],
               children: "Uploaded:"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailValue, {
-                color: textColor
+                color: themeStyles.textColor
               }],
               children: new Date(openedFile.uploadDate).toLocaleString()
             })]
@@ -1276,12 +1294,12 @@ const FileManagementScreen = ({
             style: styles.detailRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailLabel, {
-                color: isDarkTheme ? '#BBBBBB' : '#666666'
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
               }],
               children: "Description:"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailValue, {
-                color: textColor
+                color: themeStyles.textColor
               }],
               children: openedFile.metadata.description
             })]
@@ -1289,12 +1307,12 @@ const FileManagementScreen = ({
             style: styles.detailRow,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailLabel, {
-                color: isDarkTheme ? '#BBBBBB' : '#666666'
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
               }],
               children: "File ID:"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.detailValue, {
-                color: textColor,
+                color: themeStyles.textColor,
                 fontSize: 12,
                 fontFamily: _reactNative.Platform.OS === 'web' ? 'monospace' : 'Courier'
               }],
@@ -1305,7 +1323,7 @@ const FileManagementScreen = ({
           style: styles.fileDetailsActions,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             style: [styles.fileDetailsActionButton, {
-              backgroundColor: primaryColor
+              backgroundColor: themeStyles.primaryColor
             }],
             onPress: () => handleFileDownload(openedFile.id, openedFile.filename),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
@@ -1318,7 +1336,7 @@ const FileManagementScreen = ({
             })]
           }), user?.id === targetUserId && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             style: [styles.fileDetailsActionButton, {
-              backgroundColor: dangerColor
+              backgroundColor: themeStyles.dangerColor
             }],
             onPress: () => {
               handleCloseFile();
@@ -1341,10 +1359,10 @@ const FileManagementScreen = ({
           style: styles.fileViewerLoading,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
             size: "large",
-            color: primaryColor
+            color: themeStyles.primaryColor
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.fileViewerLoadingText, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             children: "Loading file content..."
           })]
@@ -1378,7 +1396,7 @@ const FileManagementScreen = ({
           })
         }) : isText && fileContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.textContainer, {
-            backgroundColor: secondaryBackgroundColor,
+            backgroundColor: themeStyles.secondaryBackgroundColor,
             borderColor
           }],
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
@@ -1388,7 +1406,7 @@ const FileManagementScreen = ({
             nestedScrollEnabled: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.textContent, {
-                color: textColor
+                color: themeStyles.textColor
               }],
               children: fileContent
             })
@@ -1420,7 +1438,7 @@ const FileManagementScreen = ({
             }), "Your browser does not support the video tag."]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.unsupportedText, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             children: "Video playback not supported on mobile"
           })
@@ -1438,7 +1456,7 @@ const FileManagementScreen = ({
             }), "Your browser does not support the audio tag."]
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.unsupportedText, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             children: "Audio playback not supported on mobile"
           })
@@ -1447,20 +1465,20 @@ const FileManagementScreen = ({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: getFileIcon(openedFile.contentType),
             size: 64,
-            color: isDarkTheme ? '#666666' : '#CCCCCC'
+            color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.unsupportedFileTitle, {
-              color: textColor
+              color: themeStyles.textColor
             }],
             children: "Preview Not Available"
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
             style: [styles.unsupportedFileDescription, {
-              color: isDarkTheme ? '#BBBBBB' : '#666666'
+              color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
             }],
             children: ["This file type cannot be previewed in the browser.", '\n', "Download the file to view its contents."]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
             style: [styles.downloadButtonLarge, {
-              backgroundColor: primaryColor
+              backgroundColor: themeStyles.primaryColor
             }],
             onPress: () => handleFileDownload(openedFile.id, openedFile.filename),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
@@ -1481,20 +1499,20 @@ const FileManagementScreen = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
       name: "folder-open-outline",
       size: 64,
-      color: isDarkTheme ? '#666666' : '#CCCCCC'
+      color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.emptyStateTitle, {
-        color: textColor
+        color: themeStyles.textColor
       }],
       children: "No Files Yet"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.emptyStateDescription, {
-        color: isDarkTheme ? '#BBBBBB' : '#666666'
+        color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
       }],
       children: user?.id === targetUserId ? `Upload files to get started. You can select multiple files at once${_reactNative.Platform.OS === 'web' ? ' or drag & drop them here.' : '.'}` : "This user hasn't uploaded any files yet"
     }), user?.id === targetUserId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       style: [styles.emptyStateButton, {
-        backgroundColor: primaryColor
+        backgroundColor: themeStyles.primaryColor
       }],
       onPress: handleFileUpload,
       disabled: uploading,
@@ -1520,10 +1538,10 @@ const FileManagementScreen = ({
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
         size: "large",
-        color: primaryColor
+        color: themeStyles.primaryColor
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.loadingText, {
-          color: textColor
+          color: themeStyles.textColor
         }],
         children: "Loading files..."
       })]
@@ -1548,37 +1566,37 @@ const FileManagementScreen = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.header, {
         borderBottomColor: borderColor,
-        backgroundColor: isDarkTheme ? '#1A1A1A' : '#FFFFFF',
+        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
         shadowColor: '#000000',
         shadowOffset: {
           width: 0,
           height: 2
         },
-        shadowOpacity: isDarkTheme ? 0.3 : 0.1,
+        shadowOpacity: themeStyles.isDarkTheme ? 0.3 : 0.1,
         shadowRadius: 8,
         elevation: 4
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: [styles.backButton, {
-          backgroundColor: isDarkTheme ? '#2A2A2A' : '#F8F9FA',
+          backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
           borderRadius: 12
         }],
         onPress: onClose || goBack,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-back",
           size: 22,
-          color: textColor
+          color: themeStyles.textColor
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.headerTitleContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.headerTitle, {
-            color: textColor
+            color: themeStyles.textColor
           }],
           children: viewMode === 'photos' ? 'Photos' : 'File Management'
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: [styles.headerSubtitle, {
-            color: isDarkTheme ? '#AAAAAA' : '#666666'
+            color: themeStyles.isDarkTheme ? '#AAAAAA' : '#666666'
           }],
           children: [filteredFiles.length, " ", filteredFiles.length === 1 ? 'item' : 'items']
         })]
@@ -1586,22 +1604,22 @@ const FileManagementScreen = ({
         style: styles.headerActions,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: [styles.viewModeToggle, {
-            backgroundColor: isDarkTheme ? '#2A2A2A' : '#F8F9FA',
+            backgroundColor: themeStyles.isDarkTheme ? '#2A2A2A' : '#F8F9FA',
             borderWidth: 1,
-            borderColor: isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+            borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
             shadowColor: '#000000',
             shadowOffset: {
               width: 0,
               height: 1
             },
-            shadowOpacity: isDarkTheme ? 0.3 : 0.05,
+            shadowOpacity: themeStyles.isDarkTheme ? 0.3 : 0.05,
             shadowRadius: 4,
             elevation: 2
           }],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: [styles.viewModeButton, viewMode === 'all' && {
-              backgroundColor: primaryColor,
-              shadowColor: primaryColor,
+              backgroundColor: themeStyles.primaryColor,
+              shadowColor: themeStyles.primaryColor,
               shadowOffset: {
                 width: 0,
                 height: 2
@@ -1614,12 +1632,12 @@ const FileManagementScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: "folder",
               size: 18,
-              color: viewMode === 'all' ? '#FFFFFF' : textColor
+              color: viewMode === 'all' ? '#FFFFFF' : themeStyles.textColor
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             style: [styles.viewModeButton, viewMode === 'photos' && {
-              backgroundColor: primaryColor,
-              shadowColor: primaryColor,
+              backgroundColor: themeStyles.primaryColor,
+              shadowColor: themeStyles.primaryColor,
               shadowOffset: {
                 width: 0,
                 height: 2
@@ -1632,13 +1650,13 @@ const FileManagementScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
               name: "images",
               size: 18,
-              color: viewMode === 'photos' ? '#FFFFFF' : textColor
+              color: viewMode === 'photos' ? '#FFFFFF' : themeStyles.textColor
             })
           })]
         }), user?.id === targetUserId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.uploadButton, {
-            backgroundColor: primaryColor,
-            shadowColor: primaryColor,
+            backgroundColor: themeStyles.primaryColor,
+            shadowColor: themeStyles.primaryColor,
             shadowOffset: {
               width: 0,
               height: 3
@@ -1672,27 +1690,27 @@ const FileManagementScreen = ({
       })]
     }), files.length > 0 && (viewMode === 'all' || files.some(f => f.contentType.startsWith('image/'))) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.searchContainer, {
-        backgroundColor: isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-        borderColor: isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
+        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
         shadowColor: '#000000',
         shadowOffset: {
           width: 0,
           height: 1
         },
-        shadowOpacity: isDarkTheme ? 0.2 : 0.05,
+        shadowOpacity: themeStyles.isDarkTheme ? 0.2 : 0.05,
         shadowRadius: 4,
         elevation: 2
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
         name: "search",
         size: 22,
-        color: isDarkTheme ? '#888888' : '#666666'
+        color: themeStyles.isDarkTheme ? '#888888' : '#666666'
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
         style: [styles.searchInput, {
-          color: textColor
+          color: themeStyles.textColor
         }],
         placeholder: viewMode === 'photos' ? 'Search photos...' : 'Search files...',
-        placeholderTextColor: isDarkTheme ? '#888888' : '#999999',
+        placeholderTextColor: themeStyles.isDarkTheme ? '#888888' : '#999999',
         value: searchQuery,
         onChangeText: setSearchQuery
       }), searchQuery.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
@@ -1701,19 +1719,19 @@ const FileManagementScreen = ({
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "close-circle",
           size: 22,
-          color: isDarkTheme ? '#888888' : '#666666'
+          color: themeStyles.isDarkTheme ? '#888888' : '#666666'
         })
       })]
     }), files.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.statsContainer, {
-        backgroundColor: isDarkTheme ? '#1A1A1A' : '#FFFFFF',
-        borderColor: isDarkTheme ? '#3A3A3A' : '#E8E9EA',
+        backgroundColor: themeStyles.isDarkTheme ? '#1A1A1A' : '#FFFFFF',
+        borderColor: themeStyles.isDarkTheme ? '#3A3A3A' : '#E8E9EA',
         shadowColor: '#000000',
         shadowOffset: {
           width: 0,
           height: 1
         },
-        shadowOpacity: isDarkTheme ? 0.2 : 0.05,
+        shadowOpacity: themeStyles.isDarkTheme ? 0.2 : 0.05,
         shadowRadius: 4,
         elevation: 2
       }],
@@ -1721,12 +1739,12 @@ const FileManagementScreen = ({
         style: styles.statItem,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.statValue, {
-            color: textColor
+            color: themeStyles.textColor
           }],
           children: filteredFiles.length
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.statLabel, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: searchQuery.length > 0 ? 'Found' : filteredFiles.length === 1 ? viewMode === 'photos' ? 'Photo' : 'File' : viewMode === 'photos' ? 'Photos' : 'Files'
         })]
@@ -1734,12 +1752,12 @@ const FileManagementScreen = ({
         style: styles.statItem,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.statValue, {
-            color: textColor
+            color: themeStyles.textColor
           }],
           children: formatFileSize(filteredFiles.reduce((total, file) => total + file.length, 0))
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.statLabel, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: searchQuery.length > 0 ? 'Size' : 'Total Size'
         })]
@@ -1747,12 +1765,12 @@ const FileManagementScreen = ({
         style: styles.statItem,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.statValue, {
-            color: textColor
+            color: themeStyles.textColor
           }],
           children: files.length
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.statLabel, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: "Total"
         })]
@@ -1763,27 +1781,27 @@ const FileManagementScreen = ({
       refreshControl: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
         refreshing: refreshing,
         onRefresh: () => loadFiles(true),
-        tintColor: primaryColor
+        tintColor: themeStyles.primaryColor
       }),
       children: filteredFiles.length === 0 && searchQuery.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "search",
           size: 64,
-          color: isDarkTheme ? '#666666' : '#CCCCCC'
+          color: themeStyles.isDarkTheme ? '#666666' : '#CCCCCC'
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.emptyStateTitle, {
-            color: textColor
+            color: themeStyles.textColor
           }],
           children: "No Results Found"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: [styles.emptyStateDescription, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: ["No files match your search for \"", searchQuery, "\""]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
           style: [styles.emptyStateButton, {
-            backgroundColor: primaryColor
+            backgroundColor: themeStyles.primaryColor
           }],
           onPress: () => setSearchQuery(''),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
@@ -1805,15 +1823,15 @@ const FileManagementScreen = ({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "cloud-upload",
           size: 64,
-          color: primaryColor
+          color: themeStyles.primaryColor
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.dragDropTitle, {
-            color: primaryColor
+            color: themeStyles.primaryColor
           }],
           children: "Drop files to upload"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: [styles.dragDropSubtitle, {
-            color: isDarkTheme ? '#BBBBBB' : '#666666'
+            color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
           }],
           children: ["Release to upload", uploadProgress ? ` (${uploadProgress.current}/${uploadProgress.total})` : ' multiple files']
         })]