@tradly/asset 1.0.19 → 1.0.21

package/dist/esm/native/ImagesSkeleton.native.js

@@ -1,11 +1,18 @@
-import React from 'react';
-import { View, StyleSheet, Dimensions, ActivityIndicator } from 'react-native';
+import React from "react";
+import { View, StyleSheet, Dimensions, ActivityIndicator } from "react-native";
 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;
+var ITEM_MARGIN = 4; // Match MediaGallery margin
+// 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 ImagesSkeleton = function ImagesSkeleton(_ref) {
   var _ref$per_page = _ref.per_page,
     per_page = _ref$per_page === void 0 ? 30 : _ref$per_page;
@@ -30,15 +37,15 @@ var ImagesSkeleton = function ImagesSkeleton(_ref) {
 };
 var styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    padding: 4
+    flexDirection: "row",
+    flexWrap: "wrap",
+    padding: 2 // Match MediaGallery grid padding
   },
   skeletonItem: {
-    backgroundColor: '#E5E5E5',
+    backgroundColor: "#E5E5E5",
     borderRadius: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     opacity: 0.3
   }
 });

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/ImagesSkeleton.native.js

@@ -8,11 +8,18 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _Dimensions$get = _reactNative.Dimensions.get('window'),
+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; // Match MediaGallery margin
+// 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 ImagesSkeleton = function ImagesSkeleton(_ref) {
   var _ref$per_page = _ref.per_page,
     per_page = _ref$per_page === void 0 ? 30 : _ref$per_page;
@@ -37,15 +44,15 @@ var ImagesSkeleton = function ImagesSkeleton(_ref) {
 };
 var styles = _reactNative.StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    padding: 4
+    flexDirection: "row",
+    flexWrap: "wrap",
+    padding: 2 // Match MediaGallery grid padding
   },
   skeletonItem: {
-    backgroundColor: '#E5E5E5',
+    backgroundColor: "#E5E5E5",
     borderRadius: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
     opacity: 0.3
   }
 });