@tradly/asset 1.0.24 → 1.0.25

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

@@ -171,6 +171,11 @@ var FileUpload = function FileUpload(_ref) {
       return mimeMap[ext] || "image/jpeg";
     };
     var mimeType = pickerResult.mimeType || pickerResult.type || getMimeType(fileName, null);
+    console.log("mimeType", {
+      fileName: fileName,
+      mimeType: mimeType,
+      pickerResult: pickerResult
+    });
     return {
       uri: uri,
       name: fileName,

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

@@ -1,24 +1,32 @@
 import React from "react";
-import { View, StyleSheet, Dimensions, ActivityIndicator } from "react-native";
+import { View, StyleSheet, Dimensions, ActivityIndicator, FlatList } from "react-native";
 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 = 4; // Match MediaGallery margin
-// Calculate item size accounting for:
+// Calculate item size - must match MediaGallery exactly
 // - 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 = 20; // paddingHorizontal md (12 * 2)
+// - Item margins: (NUM_COLUMNS - 1) gaps between items
+//   Each gap = 2 * ITEM_MARGIN (left margin of right item + right margin of left item)
+//   Total: (3 - 1) * 2 * 4 = 16px
+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 TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // 4 * 2 * 2 = 16px
 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;
-  var skeletonItems = [];
-  for (var i = 0; i < per_page; i++) {
-    skeletonItems.push(/*#__PURE__*/_jsx(View, {
+  var skeletonData = Array.from({
+    length: per_page
+  }, function (_, i) {
+    return {
+      id: i
+    };
+  });
+  var renderItem = function renderItem() {
+    return /*#__PURE__*/_jsx(View, {
       style: [styles.skeletonItem, {
         width: ITEM_SIZE,
         height: ITEM_SIZE,
@@ -28,17 +36,21 @@ var ImagesSkeleton = function ImagesSkeleton(_ref) {
         size: "small",
         color: "#3B3269"
       })
-    }, i));
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: skeletonItems
+    });
+  };
+  return /*#__PURE__*/_jsx(FlatList, {
+    data: skeletonData,
+    renderItem: renderItem,
+    keyExtractor: function keyExtractor(item) {
+      return "skeleton-".concat(item.id);
+    },
+    numColumns: NUM_COLUMNS,
+    contentContainerStyle: styles.grid,
+    showsVerticalScrollIndicator: false
   });
 };
 var styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    flexWrap: "wrap",
+  grid: {
     padding: 2 // Match MediaGallery grid padding
   },
   skeletonItem: {

package/dist/native/FileUpload.native.js

@@ -176,6 +176,11 @@ var FileUpload = function FileUpload(_ref) {
       return mimeMap[ext] || "image/jpeg";
     };
     var mimeType = pickerResult.mimeType || pickerResult.type || getMimeType(fileName, null);
+    console.log("mimeType", {
+      fileName: fileName,
+      mimeType: mimeType,
+      pickerResult: pickerResult
+    });
     return {
       uri: uri,
       name: fileName,

package/dist/native/ImagesSkeleton.native.js

@@ -12,20 +12,28 @@ var _Dimensions$get = _reactNative.Dimensions.get("window"),
   SCREEN_WIDTH = _Dimensions$get.width;
 var NUM_COLUMNS = 3;
 var ITEM_MARGIN = 4; // Match MediaGallery margin
-// Calculate item size accounting for:
+// Calculate item size - must match MediaGallery exactly
 // - 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 = 20; // paddingHorizontal md (12 * 2)
+// - Item margins: (NUM_COLUMNS - 1) gaps between items
+//   Each gap = 2 * ITEM_MARGIN (left margin of right item + right margin of left item)
+//   Total: (3 - 1) * 2 * 4 = 16px
+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 TOTAL_MARGINS = ITEM_MARGIN * (NUM_COLUMNS - 1) * 2; // 4 * 2 * 2 = 16px
 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;
-  var skeletonItems = [];
-  for (var i = 0; i < per_page; i++) {
-    skeletonItems.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  var skeletonData = Array.from({
+    length: per_page
+  }, function (_, i) {
+    return {
+      id: i
+    };
+  });
+  var renderItem = function renderItem() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.skeletonItem, {
         width: ITEM_SIZE,
         height: ITEM_SIZE,
@@ -35,17 +43,21 @@ var ImagesSkeleton = function ImagesSkeleton(_ref) {
         size: "small",
         color: "#3B3269"
       })
-    }, i));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: skeletonItems
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+    data: skeletonData,
+    renderItem: renderItem,
+    keyExtractor: function keyExtractor(item) {
+      return "skeleton-".concat(item.id);
+    },
+    numColumns: NUM_COLUMNS,
+    contentContainerStyle: styles.grid,
+    showsVerticalScrollIndicator: false
   });
 };
 var styles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    flexWrap: "wrap",
+  grid: {
     padding: 2 // Match MediaGallery grid padding
   },
   skeletonItem: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradly/asset",
-    "version": "1.0.24",
+    "version": "1.0.25",
     "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",