@tradly/asset 1.0.19 → 1.0.20

package/dist/core/MediaApiService.js

@@ -249,7 +249,7 @@ var MediaApiService = /*#__PURE__*/function () {
     key: "uploadMedia",
     value: (function () {
       var _uploadMedia = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(files, authKey) {
-        var auth_key, all_files_uri, upload_files, upload_full_files, i, element, file_data, responseFiles, index, path, fileURI, originalFile, fileBody, uri, fileResponse, arrayBuffer, res, errorText, mediaData, _t3, _t4, _t5;
+        var auth_key, all_files_uri, upload_files, upload_full_files, i, element, cleanFileName, file_data, responseFiles, index, path, fileURI, originalFile, fileBody, uri, fileResponse, arrayBuffer, res, errorText, errorMsg, mediaData, _t3, _t4, _t5;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
@@ -274,9 +274,11 @@ var MediaApiService = /*#__PURE__*/function () {
                 all_files_uri.push(element.path);
               } else {
                 // Prepare file data for upload
+                // Clean file name: remove spaces (following user's pattern: fileName.replace(/ /g, ""))
+                cleanFileName = element.name.replace(/\s/g, "");
                 file_data = {
-                  name: element.name.replace(/\s/g, "-"),
-                  type: element.type
+                  name: cleanFileName,
+                  type: element.type || "image/jpeg" // Default MIME type
                 };
                 upload_files.push(file_data);
                 upload_full_files.push(element);
@@ -311,9 +313,6 @@ var MediaApiService = /*#__PURE__*/function () {
               // For React Native, handle file://, content://, or http:// URIs
               uri = originalFile.uri;
               _context4.p = 7;
-              // For React Native file:// URIs, fetch should work
-              // Convert file:// URI to blob for S3 upload
-              console.log("Fetching file from URI:", uri);
               _context4.n = 8;
               return fetch(uri);
             case 8:
@@ -332,7 +331,6 @@ var MediaApiService = /*#__PURE__*/function () {
               return fileResponse.blob();
             case 10:
               fileBody = _context4.v;
-              console.log("File converted to blob, size:", fileBody.size);
               _context4.n = 14;
               break;
             case 11:
@@ -372,9 +370,6 @@ var MediaApiService = /*#__PURE__*/function () {
               });
               throw new Error("Failed to read file from URI: ".concat(uri, ". Error: ").concat(_t3.message, ". Make sure the file URI is accessible."));
             case 16:
-              // Upload to S3 using PUT request
-              console.log("Uploading to S3:", path);
-              console.log("File type:", upload_files[index].type);
               _context4.n = 17;
               return fetch(path, {
                 method: "PUT",
@@ -389,7 +384,6 @@ var MediaApiService = /*#__PURE__*/function () {
                 _context4.n = 18;
                 break;
               }
-              console.log("File ".concat(index + 1, " uploaded successfully"));
               all_files_uri.push(fileURI);
               _context4.n = 20;
               break;
@@ -401,7 +395,8 @@ var MediaApiService = /*#__PURE__*/function () {
             case 19:
               errorText = _context4.v;
               console.error("Failed to upload file ".concat(index + 1, ":"), res.status, res.statusText, errorText);
-              throw new Error("S3 upload failed: ".concat(res.status, " ").concat(res.statusText));
+              errorMsg = errorText ? "S3 upload failed: ".concat(res.status, " ").concat(res.statusText, " - ").concat(errorText) : "S3 upload failed: ".concat(res.status, " ").concat(res.statusText);
+              throw new Error(errorMsg);
             case 20:
               _context4.n = 22;
               break;
@@ -409,6 +404,8 @@ var MediaApiService = /*#__PURE__*/function () {
               _context4.p = 21;
               _t4 = _context4.v;
               console.error("Error uploading file ".concat(index + 1, ":"), _t4);
+              // Re-throw to stop the upload process
+              throw _t4;
             case 22:
               index++;
               _context4.n = 5;
@@ -424,7 +421,7 @@ var MediaApiService = /*#__PURE__*/function () {
                   type: 1,
                   parent: 0,
                   url: url,
-                  name: originalFile.name.replace(/\s/g, "-"),
+                  name: originalFile.name.replace(/\s/g, ""),
                   mime_type: originalFile.type
                 };
               }); // Save to media API - POST /v1/media with { media: [...] }

package/dist/esm/core/MediaApiService.js

@@ -243,7 +243,7 @@ var MediaApiService = /*#__PURE__*/function () {
     key: "uploadMedia",
     value: (function () {
       var _uploadMedia = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(files, authKey) {
-        var auth_key, all_files_uri, upload_files, upload_full_files, i, element, file_data, responseFiles, index, path, fileURI, originalFile, fileBody, uri, fileResponse, arrayBuffer, res, errorText, mediaData, _t3, _t4, _t5;
+        var auth_key, all_files_uri, upload_files, upload_full_files, i, element, cleanFileName, file_data, responseFiles, index, path, fileURI, originalFile, fileBody, uri, fileResponse, arrayBuffer, res, errorText, errorMsg, mediaData, _t3, _t4, _t5;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
@@ -268,9 +268,11 @@ var MediaApiService = /*#__PURE__*/function () {
                 all_files_uri.push(element.path);
               } else {
                 // Prepare file data for upload
+                // Clean file name: remove spaces (following user's pattern: fileName.replace(/ /g, ""))
+                cleanFileName = element.name.replace(/\s/g, "");
                 file_data = {
-                  name: element.name.replace(/\s/g, "-"),
-                  type: element.type
+                  name: cleanFileName,
+                  type: element.type || "image/jpeg" // Default MIME type
                 };
                 upload_files.push(file_data);
                 upload_full_files.push(element);
@@ -305,9 +307,6 @@ var MediaApiService = /*#__PURE__*/function () {
               // For React Native, handle file://, content://, or http:// URIs
               uri = originalFile.uri;
               _context4.p = 7;
-              // For React Native file:// URIs, fetch should work
-              // Convert file:// URI to blob for S3 upload
-              console.log("Fetching file from URI:", uri);
               _context4.n = 8;
               return fetch(uri);
             case 8:
@@ -326,7 +325,6 @@ var MediaApiService = /*#__PURE__*/function () {
               return fileResponse.blob();
             case 10:
               fileBody = _context4.v;
-              console.log("File converted to blob, size:", fileBody.size);
               _context4.n = 14;
               break;
             case 11:
@@ -366,9 +364,6 @@ var MediaApiService = /*#__PURE__*/function () {
               });
               throw new Error("Failed to read file from URI: ".concat(uri, ". Error: ").concat(_t3.message, ". Make sure the file URI is accessible."));
             case 16:
-              // Upload to S3 using PUT request
-              console.log("Uploading to S3:", path);
-              console.log("File type:", upload_files[index].type);
               _context4.n = 17;
               return fetch(path, {
                 method: "PUT",
@@ -383,7 +378,6 @@ var MediaApiService = /*#__PURE__*/function () {
                 _context4.n = 18;
                 break;
               }
-              console.log("File ".concat(index + 1, " uploaded successfully"));
               all_files_uri.push(fileURI);
               _context4.n = 20;
               break;
@@ -395,7 +389,8 @@ var MediaApiService = /*#__PURE__*/function () {
             case 19:
               errorText = _context4.v;
               console.error("Failed to upload file ".concat(index + 1, ":"), res.status, res.statusText, errorText);
-              throw new Error("S3 upload failed: ".concat(res.status, " ").concat(res.statusText));
+              errorMsg = errorText ? "S3 upload failed: ".concat(res.status, " ").concat(res.statusText, " - ").concat(errorText) : "S3 upload failed: ".concat(res.status, " ").concat(res.statusText);
+              throw new Error(errorMsg);
             case 20:
               _context4.n = 22;
               break;
@@ -403,6 +398,8 @@ var MediaApiService = /*#__PURE__*/function () {
               _context4.p = 21;
               _t4 = _context4.v;
               console.error("Error uploading file ".concat(index + 1, ":"), _t4);
+              // Re-throw to stop the upload process
+              throw _t4;
             case 22:
               index++;
               _context4.n = 5;
@@ -418,7 +415,7 @@ var MediaApiService = /*#__PURE__*/function () {
                   type: 1,
                   parent: 0,
                   url: url,
-                  name: originalFile.name.replace(/\s/g, "-"),
+                  name: originalFile.name.replace(/\s/g, ""),
                   mime_type: originalFile.type
                 };
               }); // Save to media API - POST /v1/media with { media: [...] }

package/dist/esm/native/FileUpload.native.js

@@ -2,6 +2,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -80,6 +81,7 @@ var FileUpload = function FileUpload(_ref) {
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
     icon = _ref.icon,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -96,6 +98,26 @@ var FileUpload = function FileUpload(_ref) {
     uploadProgress = _useState4[0],
     setUploadProgress = _useState4[1];
 
+  // Determine which icon to use based on accept type and icons prop
+  var getIcon = function getIcon() {
+    // If icons object is provided, use it to select based on accept type
+    if (icons && _typeof(icons) === "object") {
+      var isImage = accept === null || accept === void 0 ? void 0 : accept.includes("image");
+      var isVideo = accept === null || accept === void 0 ? void 0 : accept.includes("video");
+      if (isImage && icons.image) {
+        return icons.image;
+      } else if (isVideo && icons.video) {
+        return icons.video;
+      } else if (icons.default) {
+        return icons.default;
+      }
+    }
+
+    // Fallback to single icon prop (backward compatibility)
+    return icon;
+  };
+  var selectedIcon = getIcon();
+
   // Convert file picker result to File-like object for apiService
   var convertToFile = function convertToFile(pickerResult) {
     // Handle different picker formats:
@@ -116,22 +138,39 @@ var FileUpload = function FileUpload(_ref) {
       fileName = lastPart ? lastPart.split("?")[0] : null; // Remove query params if any
     }
 
-    // Final fallback
+    // Final fallback - generate a meaningful filename
     if (!fileName) {
       // Try to guess from mimeType
       var _mimeType = pickerResult.mimeType || pickerResult.type || "";
+      var timestamp = Date.now();
       if (_mimeType.includes("image")) {
-        fileName = _mimeType.includes("jpeg") || _mimeType.includes("jpg") ? "image.jpg" : _mimeType.includes("png") ? "image.png" : _mimeType.includes("gif") ? "image.gif" : "image.jpg";
+        fileName = _mimeType.includes("jpeg") || _mimeType.includes("jpg") ? "image_".concat(timestamp, ".jpg") : _mimeType.includes("png") ? "image_".concat(timestamp, ".png") : _mimeType.includes("gif") ? "image_".concat(timestamp, ".gif") : _mimeType.includes("webp") ? "image_".concat(timestamp, ".webp") : "image_".concat(timestamp, ".jpg");
       } else if (_mimeType.includes("video")) {
-        fileName = "video.mp4";
+        fileName = _mimeType.includes("mp4") ? "video_".concat(timestamp, ".mp4") : _mimeType.includes("mov") ? "video_".concat(timestamp, ".mov") : "video_".concat(timestamp, ".mp4");
       } else {
-        fileName = "file";
+        fileName = "file_".concat(timestamp);
       }
     }
 
     // Extract MIME type (handle different property names)
-    var mimeType = pickerResult.mimeType || pickerResult.type || "image/jpeg"; // Default fallback
-
+    // Use a helper function to determine MIME type from filename if needed
+    var getMimeType = function getMimeType(name, fallbackType) {
+      var _name$split$pop;
+      if (fallbackType) return fallbackType;
+      var ext = (_name$split$pop = name.split(".").pop()) === null || _name$split$pop === void 0 ? void 0 : _name$split$pop.toLowerCase();
+      var mimeMap = {
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        webp: "image/webp",
+        mp4: "video/mp4",
+        mov: "video/quicktime",
+        mp3: "audio/mpeg"
+      };
+      return mimeMap[ext] || "image/jpeg";
+    };
+    var mimeType = pickerResult.mimeType || pickerResult.type || getMimeType(fileName, null);
     return {
       uri: uri,
       name: fileName,
@@ -153,16 +192,7 @@ var FileUpload = function FileUpload(_ref) {
             setUploadProgress(0);
             _context.p = 1;
             // Convert picker results to File-like objects
-            filesToUpload = fileList.map(convertToFile); // Debug: Log file format for troubleshooting
-            console.log("Files to upload:", filesToUpload.map(function (f) {
-              return {
-                uri: f.uri,
-                name: f.name,
-                type: f.type
-              };
-            }));
-
-            // Use the API service to upload files
+            filesToUpload = fileList.map(convertToFile); // Use the API service to upload files
             // Note: uploadMedia will need to handle React Native file URIs
             _context.n = 2;
             return apiService.uploadMedia(filesToUpload, apiService.authKey);
@@ -297,20 +327,20 @@ var FileUpload = function FileUpload(_ref) {
         borderRadius: theme.radius.md
       }, buttonStyle],
       disabled: isLoading,
-      children: [icon && /*#__PURE__*/_jsx(View, {
+      children: [selectedIcon && /*#__PURE__*/_jsx(View, {
         style: [styles.iconContainer, {
           backgroundColor: theme.colors.uploadIconBackground,
           borderRadius: theme.radius.xl,
           marginBottom: theme.spacing.sm,
           padding: theme.spacing.md
         }, iconContainerStyle],
-        children: icon
+        children: selectedIcon
       }), /*#__PURE__*/_jsx(Text, {
         style: [styles.title, {
           color: theme.colors.uploadText,
           fontSize: theme.typography.body.fontSize,
           fontWeight: theme.typography.body.fontWeight,
-          marginTop: icon ? theme.spacing.sm : 0
+          marginTop: selectedIcon ? theme.spacing.sm : 0
         }, titleStyle],
         children: title
       })]

package/dist/esm/native/Icons.native.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
 // Note: For better icons, you can use react-native-svg or react-native-vector-icons
 // This is a simple implementation using Text/View
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -7,7 +7,7 @@ export var CloseIcon = function CloseIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#000000' : _ref$color;
+    color = _ref$color === void 0 ? "#000000" : _ref$color;
   return /*#__PURE__*/_jsx(View, {
     style: [styles.closeIcon, {
       width: size,
@@ -31,21 +31,57 @@ export var CameraIcon = function CameraIcon() {
     })
   });
 };
+export var VideoIcon = function VideoIcon() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.videoIcon,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.videoIconText,
+      children: "\uD83C\uDFA5"
+    })
+  });
+};
+export var UploadIcon = function UploadIcon() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.uploadIcon,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.uploadIconText,
+      children: "\uD83D\uDCE4"
+    })
+  });
+};
 var styles = StyleSheet.create({
   closeIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center"
   },
   closeIconText: {
-    fontWeight: 'bold'
+    fontWeight: "bold"
   },
   cameraIcon: {
     width: 22,
     height: 18,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center"
   },
   cameraIconText: {
     fontSize: 18
+  },
+  videoIcon: {
+    width: 22,
+    height: 18,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  videoIconText: {
+    fontSize: 18
+  },
+  uploadIcon: {
+    width: 22,
+    height: 18,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  uploadIconText: {
+    fontSize: 18
   }
 });

package/dist/esm/native/MediaGallery.native.js

@@ -12,21 +12,27 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useState, useEffect } from 'react';
-import { View, FlatList, Image, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
-import FileUpload from './FileUpload.native';
-import ImagesSkeleton from './ImagesSkeleton.native';
-import Pagination from './Pagination.native';
-import { CameraIcon } from './Icons.native';
-import { defaultTheme } from './theme';
+import React, { useState, useEffect } from "react";
+import { View, FlatList, Image, TouchableOpacity, StyleSheet, Dimensions } from "react-native";
+import FileUpload from "./FileUpload.native";
+import ImagesSkeleton from "./ImagesSkeleton.native";
+import Pagination from "./Pagination.native";
+// Icons are now passed via props, no need to import here
+import { defaultTheme } from "./theme";
 import { jsx as _jsx } from "react/jsx-runtime";
-var _Dimensions$get = Dimensions.get('window'),
+var _Dimensions$get = Dimensions.get("window"),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
-var ITEM_MARGIN = 8;
-var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS; // 40 = padding, adjust for margins
-
-var IMAGE_MIME_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/gif', 'image/avif', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/heic', 'image/heif'];
+var ITEM_MARGIN = 4; // Reduced margin for better fit
+// Calculate item size accounting for:
+// - Container padding (md = 12px on each side = 24px total)
+// - Grid padding (2px on each side = 4px total)
+// - Item margins between items (4px * 2 gaps = 8px total)
+var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
+var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
+var IMAGE_MIME_TYPES = ["image/png", "image/jpeg", "image/webp", "image/svg+xml", "image/gif", "image/avif", "image/x-icon", "image/vnd.microsoft.icon", "image/heic", "image/heif"];
 var ImagesGallery = function ImagesGallery(_ref) {
   var update_data = _ref.update_data,
     closePopup = _ref.closePopup,
@@ -34,6 +40,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -96,7 +103,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
           case 3:
             _context.p = 3;
             _t = _context.v;
-            console.error('Error loading media:', _t);
+            console.error("Error loading media:", _t);
             if (onError) {
               onError(_t);
             }
@@ -135,13 +142,13 @@ var ImagesGallery = function ImagesGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme,
-          icon: /*#__PURE__*/_jsx(CameraIcon, {})
+          icons: icons,
+          theme: theme
         })
       });
     }
     var image = images[index - 1];
-    var imageUrl = typeof image === 'string' ? image : image.url;
+    var imageUrl = typeof image === "string" ? image : image.url;
     var imageKey = image.id || image.url || index;
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: function onPress() {
@@ -163,7 +170,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
     });
   };
   var data = isLoading ? [] : [{
-    type: 'upload'
+    type: "upload"
   }].concat(_toConsumableArray(images));
   return /*#__PURE__*/_jsx(View, {
     style: [styles.container, containerStyle],
@@ -171,7 +178,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
       data: data,
       renderItem: renderItem,
       keyExtractor: function keyExtractor(item, index) {
-        if (index === 0) return 'upload';
+        if (index === 0) return "upload";
         var image = images[index - 1];
         return image.id || image.url || "image-".concat(index);
       },
@@ -202,16 +209,16 @@ var styles = StyleSheet.create({
     flex: 1
   },
   grid: {
-    padding: 4
+    padding: 2 // Reduced padding for better fit
   },
   uploadContainer: {
     margin: ITEM_MARGIN,
-    overflow: 'hidden'
+    overflow: "hidden"
   },
   imageItem: {
     margin: ITEM_MARGIN,
     borderRadius: 8,
-    overflow: 'hidden',
+    overflow: "hidden",
     shadowOffset: {
       width: 0,
       height: 2
@@ -221,8 +228,8 @@ var styles = StyleSheet.create({
     elevation: 5
   },
   image: {
-    width: '100%',
-    height: '100%'
+    width: "100%",
+    height: "100%"
   },
   paginationContainer: {
     // Styles applied via theme

package/dist/esm/native/MediaPopup.native.js

@@ -25,6 +25,7 @@ var MediaPopup = function MediaPopup(_ref) {
     title = _ref$title === void 0 ? "Media Gallery" : _ref$title,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     theme = _ref.theme,
     overlayStyle = _ref.overlayStyle,
     containerStyle = _ref.containerStyle,
@@ -88,7 +89,7 @@ var MediaPopup = function MediaPopup(_ref) {
               maxHeight: SCREEN_HEIGHT * sheetHeight,
               paddingTop: currentTheme.spacing.sm,
               paddingBottom: currentTheme.spacing.xl,
-              paddingHorizontal: currentTheme.spacing.xl
+              paddingHorizontal: currentTheme.spacing.md // Reduced from xl to md for better fit
             }, containerStyle, {
               transform: [{
                 translateY: slideAnim
@@ -129,6 +130,7 @@ var MediaPopup = function MediaPopup(_ref) {
               onError: onError,
               picker: picker,
               pickerOptions: pickerOptions,
+              icons: icons,
               theme: currentTheme
             })]
           })

package/dist/esm/native/MediaTab.native.js

@@ -20,6 +20,7 @@ var MediaTab = function MediaTab(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -66,6 +67,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -79,6 +81,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -93,6 +96,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }

package/dist/esm/native/VideosGallery.native.js

@@ -17,7 +17,7 @@ import { View, FlatList, TouchableOpacity, StyleSheet, Dimensions, Text } from '
 import FileUpload from './FileUpload.native';
 import ImagesSkeleton from './ImagesSkeleton.native';
 import Pagination from './Pagination.native';
-import { CameraIcon } from './Icons.native';
+// Icons are now passed via props, no need to import here
 import { defaultTheme } from './theme';
 // Note: You'll need to install react-native-video for video playback
 // import Video from 'react-native-video'
@@ -25,8 +25,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var _Dimensions$get = Dimensions.get('window'),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
-var ITEM_MARGIN = 8;
-var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS;
+var ITEM_MARGIN = 4; // Reduced margin for better fit
+// Calculate item size accounting for:
+// - Container padding (md = 12px on each side = 24px total)
+// - Grid padding (2px on each side = 4px total)
+// - Item margins between items (4px * 2 gaps = 8px total)
+var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
+var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
 var VIDEO_MIME_TYPES = ['video/mp4', 'video/quicktime', 'video/x-ms-wmv', 'video/h265', 'video/hevc', 'video/webm'];
 var VideosGallery = function VideosGallery(_ref) {
   var update_data = _ref.update_data,
@@ -35,6 +42,7 @@ var VideosGallery = function VideosGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -136,8 +144,8 @@ var VideosGallery = function VideosGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme,
-          icon: /*#__PURE__*/_jsx(CameraIcon, {})
+          icons: icons,
+          theme: theme
         })
       });
     }
@@ -201,7 +209,7 @@ var styles = StyleSheet.create({
     flex: 1
   },
   grid: {
-    padding: 4
+    padding: 2 // Reduced padding for better fit
   },
   uploadContainer: {
     margin: ITEM_MARGIN

package/dist/native/FileUpload.native.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +14,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -86,6 +86,7 @@ var FileUpload = function FileUpload(_ref) {
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
     icon = _ref.icon,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -102,6 +103,26 @@ var FileUpload = function FileUpload(_ref) {
     uploadProgress = _useState4[0],
     setUploadProgress = _useState4[1];
 
+  // Determine which icon to use based on accept type and icons prop
+  var getIcon = function getIcon() {
+    // If icons object is provided, use it to select based on accept type
+    if (icons && _typeof(icons) === "object") {
+      var isImage = accept === null || accept === void 0 ? void 0 : accept.includes("image");
+      var isVideo = accept === null || accept === void 0 ? void 0 : accept.includes("video");
+      if (isImage && icons.image) {
+        return icons.image;
+      } else if (isVideo && icons.video) {
+        return icons.video;
+      } else if (icons.default) {
+        return icons.default;
+      }
+    }
+
+    // Fallback to single icon prop (backward compatibility)
+    return icon;
+  };
+  var selectedIcon = getIcon();
+
   // Convert file picker result to File-like object for apiService
   var convertToFile = function convertToFile(pickerResult) {
     // Handle different picker formats:
@@ -122,22 +143,39 @@ var FileUpload = function FileUpload(_ref) {
       fileName = lastPart ? lastPart.split("?")[0] : null; // Remove query params if any
     }
 
-    // Final fallback
+    // Final fallback - generate a meaningful filename
     if (!fileName) {
       // Try to guess from mimeType
       var _mimeType = pickerResult.mimeType || pickerResult.type || "";
+      var timestamp = Date.now();
       if (_mimeType.includes("image")) {
-        fileName = _mimeType.includes("jpeg") || _mimeType.includes("jpg") ? "image.jpg" : _mimeType.includes("png") ? "image.png" : _mimeType.includes("gif") ? "image.gif" : "image.jpg";
+        fileName = _mimeType.includes("jpeg") || _mimeType.includes("jpg") ? "image_".concat(timestamp, ".jpg") : _mimeType.includes("png") ? "image_".concat(timestamp, ".png") : _mimeType.includes("gif") ? "image_".concat(timestamp, ".gif") : _mimeType.includes("webp") ? "image_".concat(timestamp, ".webp") : "image_".concat(timestamp, ".jpg");
       } else if (_mimeType.includes("video")) {
-        fileName = "video.mp4";
+        fileName = _mimeType.includes("mp4") ? "video_".concat(timestamp, ".mp4") : _mimeType.includes("mov") ? "video_".concat(timestamp, ".mov") : "video_".concat(timestamp, ".mp4");
       } else {
-        fileName = "file";
+        fileName = "file_".concat(timestamp);
       }
     }
 
     // Extract MIME type (handle different property names)
-    var mimeType = pickerResult.mimeType || pickerResult.type || "image/jpeg"; // Default fallback
-
+    // Use a helper function to determine MIME type from filename if needed
+    var getMimeType = function getMimeType(name, fallbackType) {
+      var _name$split$pop;
+      if (fallbackType) return fallbackType;
+      var ext = (_name$split$pop = name.split(".").pop()) === null || _name$split$pop === void 0 ? void 0 : _name$split$pop.toLowerCase();
+      var mimeMap = {
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        webp: "image/webp",
+        mp4: "video/mp4",
+        mov: "video/quicktime",
+        mp3: "audio/mpeg"
+      };
+      return mimeMap[ext] || "image/jpeg";
+    };
+    var mimeType = pickerResult.mimeType || pickerResult.type || getMimeType(fileName, null);
     return {
       uri: uri,
       name: fileName,
@@ -159,16 +197,7 @@ var FileUpload = function FileUpload(_ref) {
             setUploadProgress(0);
             _context.p = 1;
             // Convert picker results to File-like objects
-            filesToUpload = fileList.map(convertToFile); // Debug: Log file format for troubleshooting
-            console.log("Files to upload:", filesToUpload.map(function (f) {
-              return {
-                uri: f.uri,
-                name: f.name,
-                type: f.type
-              };
-            }));
-
-            // Use the API service to upload files
+            filesToUpload = fileList.map(convertToFile); // Use the API service to upload files
             // Note: uploadMedia will need to handle React Native file URIs
             _context.n = 2;
             return apiService.uploadMedia(filesToUpload, apiService.authKey);
@@ -303,20 +332,20 @@ var FileUpload = function FileUpload(_ref) {
         borderRadius: theme.radius.md
       }, buttonStyle],
       disabled: isLoading,
-      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [selectedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.iconContainer, {
           backgroundColor: theme.colors.uploadIconBackground,
           borderRadius: theme.radius.xl,
           marginBottom: theme.spacing.sm,
           padding: theme.spacing.md
         }, iconContainerStyle],
-        children: icon
+        children: selectedIcon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.title, {
           color: theme.colors.uploadText,
           fontSize: theme.typography.body.fontSize,
           fontWeight: theme.typography.body.fontWeight,
-          marginTop: icon ? theme.spacing.sm : 0
+          marginTop: selectedIcon ? theme.spacing.sm : 0
         }, titleStyle],
         children: title
       })]

package/dist/native/Icons.native.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CloseIcon = exports.CameraIcon = void 0;
+exports.VideoIcon = exports.UploadIcon = exports.CloseIcon = exports.CameraIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -15,7 +15,7 @@ var CloseIcon = exports.CloseIcon = function CloseIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#000000' : _ref$color;
+    color = _ref$color === void 0 ? "#000000" : _ref$color;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.closeIcon, {
       width: size,
@@ -39,21 +39,57 @@ var CameraIcon = exports.CameraIcon = function CameraIcon() {
     })
   });
 };
+var VideoIcon = exports.VideoIcon = function VideoIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.videoIcon,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.videoIconText,
+      children: "\uD83C\uDFA5"
+    })
+  });
+};
+var UploadIcon = exports.UploadIcon = function UploadIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.uploadIcon,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.uploadIconText,
+      children: "\uD83D\uDCE4"
+    })
+  });
+};
 var styles = _reactNative.StyleSheet.create({
   closeIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center"
   },
   closeIconText: {
-    fontWeight: 'bold'
+    fontWeight: "bold"
   },
   cameraIcon: {
     width: 22,
     height: 18,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center"
   },
   cameraIconText: {
     fontSize: 18
+  },
+  videoIcon: {
+    width: 22,
+    height: 18,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  videoIconText: {
+    fontSize: 18
+  },
+  uploadIcon: {
+    width: 22,
+    height: 18,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  uploadIconText: {
+    fontSize: 18
   }
 });

package/dist/native/MediaGallery.native.js

@@ -10,7 +10,6 @@ var _reactNative = require("react-native");
 var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
 var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
 var _Pagination = _interopRequireDefault(require("./Pagination.native"));
-var _Icons = require("./Icons.native");
 var _theme = require("./theme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,14 +27,20 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var _Dimensions$get = _reactNative.Dimensions.get('window'),
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Icons are now passed via props, no need to import here
+var _Dimensions$get = _reactNative.Dimensions.get("window"),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
-var ITEM_MARGIN = 8;
-var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS; // 40 = padding, adjust for margins
-
-var IMAGE_MIME_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/gif', 'image/avif', 'image/x-icon', 'image/vnd.microsoft.icon', 'image/heic', 'image/heif'];
+var ITEM_MARGIN = 4; // Reduced margin for better fit
+// Calculate item size accounting for:
+// - Container padding (md = 12px on each side = 24px total)
+// - Grid padding (2px on each side = 4px total)
+// - Item margins between items (4px * 2 gaps = 8px total)
+var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
+var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
+var IMAGE_MIME_TYPES = ["image/png", "image/jpeg", "image/webp", "image/svg+xml", "image/gif", "image/avif", "image/x-icon", "image/vnd.microsoft.icon", "image/heic", "image/heif"];
 var ImagesGallery = function ImagesGallery(_ref) {
   var update_data = _ref.update_data,
     closePopup = _ref.closePopup,
@@ -43,6 +48,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -105,7 +111,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
           case 3:
             _context.p = 3;
             _t = _context.v;
-            console.error('Error loading media:', _t);
+            console.error("Error loading media:", _t);
             if (onError) {
               onError(_t);
             }
@@ -144,13 +150,13 @@ var ImagesGallery = function ImagesGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
+          icons: icons,
+          theme: theme
         })
       });
     }
     var image = images[index - 1];
-    var imageUrl = typeof image === 'string' ? image : image.url;
+    var imageUrl = typeof image === "string" ? image : image.url;
     var imageKey = image.id || image.url || index;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: function onPress() {
@@ -172,7 +178,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
     });
   };
   var data = isLoading ? [] : [{
-    type: 'upload'
+    type: "upload"
   }].concat(_toConsumableArray(images));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.container, containerStyle],
@@ -180,7 +186,7 @@ var ImagesGallery = function ImagesGallery(_ref) {
       data: data,
       renderItem: renderItem,
       keyExtractor: function keyExtractor(item, index) {
-        if (index === 0) return 'upload';
+        if (index === 0) return "upload";
         var image = images[index - 1];
         return image.id || image.url || "image-".concat(index);
       },
@@ -211,16 +217,16 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   grid: {
-    padding: 4
+    padding: 2 // Reduced padding for better fit
   },
   uploadContainer: {
     margin: ITEM_MARGIN,
-    overflow: 'hidden'
+    overflow: "hidden"
   },
   imageItem: {
     margin: ITEM_MARGIN,
     borderRadius: 8,
-    overflow: 'hidden',
+    overflow: "hidden",
     shadowOffset: {
       width: 0,
       height: 2
@@ -230,8 +236,8 @@ var styles = _reactNative.StyleSheet.create({
     elevation: 5
   },
   image: {
-    width: '100%',
-    height: '100%'
+    width: "100%",
+    height: "100%"
   },
   paginationContainer: {
     // Styles applied via theme

package/dist/native/MediaPopup.native.js

@@ -32,6 +32,7 @@ var MediaPopup = function MediaPopup(_ref) {
     title = _ref$title === void 0 ? "Media Gallery" : _ref$title,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     theme = _ref.theme,
     overlayStyle = _ref.overlayStyle,
     containerStyle = _ref.containerStyle,
@@ -95,7 +96,7 @@ var MediaPopup = function MediaPopup(_ref) {
               maxHeight: SCREEN_HEIGHT * sheetHeight,
               paddingTop: currentTheme.spacing.sm,
               paddingBottom: currentTheme.spacing.xl,
-              paddingHorizontal: currentTheme.spacing.xl
+              paddingHorizontal: currentTheme.spacing.md // Reduced from xl to md for better fit
             }, containerStyle, {
               transform: [{
                 translateY: slideAnim
@@ -136,6 +137,7 @@ var MediaPopup = function MediaPopup(_ref) {
               onError: onError,
               picker: picker,
               pickerOptions: pickerOptions,
+              icons: icons,
               theme: currentTheme
             })]
           })

package/dist/native/MediaTab.native.js

@@ -29,6 +29,7 @@ var MediaTab = function MediaTab(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -75,6 +76,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -88,6 +90,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }
@@ -102,6 +105,7 @@ var MediaTab = function MediaTab(_ref) {
         onError: onError,
         picker: picker,
         pickerOptions: pickerOptions,
+        icons: icons,
         theme: theme
       });
     }

package/dist/native/VideosGallery.native.js

@@ -10,7 +10,6 @@ var _reactNative = require("react-native");
 var _FileUpload = _interopRequireDefault(require("./FileUpload.native"));
 var _ImagesSkeleton = _interopRequireDefault(require("./ImagesSkeleton.native"));
 var _Pagination = _interopRequireDefault(require("./Pagination.native"));
-var _Icons = require("./Icons.native");
 var _theme = require("./theme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -28,13 +27,21 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructur
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Note: You'll need to install react-native-video for video playback
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // Icons are now passed via props, no need to import here
+// Note: You'll need to install react-native-video for video playback
 // import Video from 'react-native-video'
 var _Dimensions$get = _reactNative.Dimensions.get('window'),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
-var ITEM_MARGIN = 8;
-var ITEM_SIZE = (SCREEN_WIDTH - 40 - ITEM_MARGIN * (NUM_COLUMNS - 1) * 2) / NUM_COLUMNS;
+var ITEM_MARGIN = 4; // Reduced margin for better fit
+// Calculate item size accounting for:
+// - Container padding (md = 12px on each side = 24px total)
+// - Grid padding (2px on each side = 4px total)
+// - Item margins between items (4px * 2 gaps = 8px total)
+var CONTAINER_PADDING = 24; // paddingHorizontal md (12 * 2)
+var GRID_PADDING = 4; // padding 2 on each side (2 * 2)
+var TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // margins between items (4px * 2 gaps = 8px)
+var ITEM_SIZE = (SCREEN_WIDTH - CONTAINER_PADDING - GRID_PADDING - TOTAL_MARGINS) / NUM_COLUMNS;
 var VIDEO_MIME_TYPES = ['video/mp4', 'video/quicktime', 'video/x-ms-wmv', 'video/h265', 'video/hevc', 'video/webm'];
 var VideosGallery = function VideosGallery(_ref) {
   var update_data = _ref.update_data,
@@ -43,6 +50,7 @@ var VideosGallery = function VideosGallery(_ref) {
     onError = _ref.onError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icons = _ref.icons,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -144,8 +152,8 @@ var VideosGallery = function VideosGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
+          icons: icons,
+          theme: theme
         })
       });
     }
@@ -209,7 +217,7 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   grid: {
-    padding: 4
+    padding: 2 // Reduced padding for better fit
   },
   uploadContainer: {
     margin: ITEM_MARGIN

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.19",
+    "version": "1.0.20",
     "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",