@tradly/asset 1.0.15 → 1.0.17

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, fileResponse, blob, res, mediaData, _t3, _t4;
+        var auth_key, all_files_uri, upload_files, upload_full_files, i, element, file_data, responseFiles, index, path, fileURI, originalFile, fileBody, uri, fileResponse, blob, res, mediaData, _t3, _t4, _t5;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
@@ -266,7 +266,7 @@ var MediaApiService = /*#__PURE__*/function () {
               i = 0;
             case 2:
               if (!(i < files.length)) {
-                _context4.n = 17;
+                _context4.n = 21;
                 break;
               }
               element = files[i]; // Check if file already has a path (from previous upload)
@@ -284,7 +284,7 @@ var MediaApiService = /*#__PURE__*/function () {
 
               // Upload files when we've processed all files
               if (!(files.length === i + 1 && upload_files.length > 0)) {
-                _context4.n = 16;
+                _context4.n = 20;
                 break;
               }
               _context4.p = 3;
@@ -295,7 +295,7 @@ var MediaApiService = /*#__PURE__*/function () {
               index = 0;
             case 5:
               if (!(index < responseFiles.length)) {
-                _context4.n = 13;
+                _context4.n = 17;
                 break;
               }
               path = responseFiles[index].signedUrl;
@@ -305,20 +305,46 @@ var MediaApiService = /*#__PURE__*/function () {
               fileBody = originalFile; // Handle React Native file URIs
               // If file has a uri property, it's from React Native - fetch it first
               if (!(originalFile.uri && typeof originalFile.uri === "string")) {
-                _context4.n = 9;
+                _context4.n = 13;
                 break;
               }
-              _context4.n = 7;
-              return fetch(originalFile.uri);
-            case 7:
-              fileResponse = _context4.v;
+              // For React Native, handle file://, content://, or http:// URIs
+              uri = originalFile.uri;
+              _context4.p = 7;
               _context4.n = 8;
-              return fileResponse.blob();
+              return fetch(uri);
             case 8:
+              fileResponse = _context4.v;
+              if (!fileResponse.blob) {
+                _context4.n = 10;
+                break;
+              }
+              _context4.n = 9;
+              return fileResponse.blob();
+            case 9:
               blob = _context4.v;
               fileBody = blob;
-            case 9:
-              _context4.n = 10;
+              _context4.n = 11;
+              break;
+            case 10:
+              // Fallback: use the response as-is if blob() is not available
+              // Some React Native versions might need different handling
+              fileBody = fileResponse;
+            case 11:
+              _context4.n = 13;
+              break;
+            case 12:
+              _context4.p = 12;
+              _t3 = _context4.v;
+              // If fetch fails, try using the URI directly
+              // Some React Native environments might handle this differently
+              console.warn("Fetch failed for URI, trying direct upload:", _t3);
+              // For S3 PUT, we need the actual file content
+              // If fetch fails, we'll try to use the file object directly
+              // This might require additional React Native file handling libraries
+              throw new Error("Failed to read file from URI: ".concat(uri, ". Make sure the file URI is accessible. Error: ").concat(_t3.message));
+            case 13:
+              _context4.n = 14;
               return fetch(path, {
                 method: "PUT",
                 headers: {
@@ -326,26 +352,26 @@ var MediaApiService = /*#__PURE__*/function () {
                 },
                 body: fileBody
               });
-            case 10:
+            case 14:
               res = _context4.v;
               if (res.ok) {
                 all_files_uri.push(fileURI);
               } else {
                 console.error("Failed to upload file ".concat(index + 1));
               }
-              _context4.n = 12;
+              _context4.n = 16;
               break;
-            case 11:
-              _context4.p = 11;
-              _t3 = _context4.v;
-              console.error("Error uploading file ".concat(index + 1, ":"), _t3);
-            case 12:
+            case 15:
+              _context4.p = 15;
+              _t4 = _context4.v;
+              console.error("Error uploading file ".concat(index + 1, ":"), _t4);
+            case 16:
               index++;
               _context4.n = 5;
               break;
-            case 13:
+            case 17:
               if (!(all_files_uri.length > 0)) {
-                _context4.n = 14;
+                _context4.n = 18;
                 break;
               }
               mediaData = all_files_uri.map(function (url, index) {
@@ -358,7 +384,7 @@ var MediaApiService = /*#__PURE__*/function () {
                   mime_type: originalFile.type
                 };
               }); // Save to media API - POST /v1/media with { media: [...] }
-              _context4.n = 14;
+              _context4.n = 18;
               return this.apiCall({
                 method: "POST",
                 path: "/v1/media",
@@ -366,25 +392,25 @@ var MediaApiService = /*#__PURE__*/function () {
                   media: mediaData
                 }
               });
-            case 14:
-              _context4.n = 16;
+            case 18:
+              _context4.n = 20;
               break;
-            case 15:
-              _context4.p = 15;
-              _t4 = _context4.v;
-              console.error("Upload error:", _t4);
+            case 19:
+              _context4.p = 19;
+              _t5 = _context4.v;
+              console.error("Upload error:", _t5);
               if (this.onError) {
-                this.onError(_t4);
+                this.onError(_t5);
               }
-              throw _t4;
-            case 16:
+              throw _t5;
+            case 20:
               i++;
               _context4.n = 2;
               break;
-            case 17:
+            case 21:
               return _context4.a(2, all_files_uri);
           }
-        }, _callee4, this, [[6, 11], [3, 15]]);
+        }, _callee4, this, [[7, 12], [6, 15], [3, 19]]);
       }));
       function uploadMedia(_x5, _x6) {
         return _uploadMedia.apply(this, arguments);

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, fileResponse, blob, res, mediaData, _t3, _t4;
+        var auth_key, all_files_uri, upload_files, upload_full_files, i, element, file_data, responseFiles, index, path, fileURI, originalFile, fileBody, uri, fileResponse, blob, res, mediaData, _t3, _t4, _t5;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
@@ -260,7 +260,7 @@ var MediaApiService = /*#__PURE__*/function () {
               i = 0;
             case 2:
               if (!(i < files.length)) {
-                _context4.n = 17;
+                _context4.n = 21;
                 break;
               }
               element = files[i]; // Check if file already has a path (from previous upload)
@@ -278,7 +278,7 @@ var MediaApiService = /*#__PURE__*/function () {
 
               // Upload files when we've processed all files
               if (!(files.length === i + 1 && upload_files.length > 0)) {
-                _context4.n = 16;
+                _context4.n = 20;
                 break;
               }
               _context4.p = 3;
@@ -289,7 +289,7 @@ var MediaApiService = /*#__PURE__*/function () {
               index = 0;
             case 5:
               if (!(index < responseFiles.length)) {
-                _context4.n = 13;
+                _context4.n = 17;
                 break;
               }
               path = responseFiles[index].signedUrl;
@@ -299,20 +299,46 @@ var MediaApiService = /*#__PURE__*/function () {
               fileBody = originalFile; // Handle React Native file URIs
               // If file has a uri property, it's from React Native - fetch it first
               if (!(originalFile.uri && typeof originalFile.uri === "string")) {
-                _context4.n = 9;
+                _context4.n = 13;
                 break;
               }
-              _context4.n = 7;
-              return fetch(originalFile.uri);
-            case 7:
-              fileResponse = _context4.v;
+              // For React Native, handle file://, content://, or http:// URIs
+              uri = originalFile.uri;
+              _context4.p = 7;
               _context4.n = 8;
-              return fileResponse.blob();
+              return fetch(uri);
             case 8:
+              fileResponse = _context4.v;
+              if (!fileResponse.blob) {
+                _context4.n = 10;
+                break;
+              }
+              _context4.n = 9;
+              return fileResponse.blob();
+            case 9:
               blob = _context4.v;
               fileBody = blob;
-            case 9:
-              _context4.n = 10;
+              _context4.n = 11;
+              break;
+            case 10:
+              // Fallback: use the response as-is if blob() is not available
+              // Some React Native versions might need different handling
+              fileBody = fileResponse;
+            case 11:
+              _context4.n = 13;
+              break;
+            case 12:
+              _context4.p = 12;
+              _t3 = _context4.v;
+              // If fetch fails, try using the URI directly
+              // Some React Native environments might handle this differently
+              console.warn("Fetch failed for URI, trying direct upload:", _t3);
+              // For S3 PUT, we need the actual file content
+              // If fetch fails, we'll try to use the file object directly
+              // This might require additional React Native file handling libraries
+              throw new Error("Failed to read file from URI: ".concat(uri, ". Make sure the file URI is accessible. Error: ").concat(_t3.message));
+            case 13:
+              _context4.n = 14;
               return fetch(path, {
                 method: "PUT",
                 headers: {
@@ -320,26 +346,26 @@ var MediaApiService = /*#__PURE__*/function () {
                 },
                 body: fileBody
               });
-            case 10:
+            case 14:
               res = _context4.v;
               if (res.ok) {
                 all_files_uri.push(fileURI);
               } else {
                 console.error("Failed to upload file ".concat(index + 1));
               }
-              _context4.n = 12;
+              _context4.n = 16;
               break;
-            case 11:
-              _context4.p = 11;
-              _t3 = _context4.v;
-              console.error("Error uploading file ".concat(index + 1, ":"), _t3);
-            case 12:
+            case 15:
+              _context4.p = 15;
+              _t4 = _context4.v;
+              console.error("Error uploading file ".concat(index + 1, ":"), _t4);
+            case 16:
               index++;
               _context4.n = 5;
               break;
-            case 13:
+            case 17:
               if (!(all_files_uri.length > 0)) {
-                _context4.n = 14;
+                _context4.n = 18;
                 break;
               }
               mediaData = all_files_uri.map(function (url, index) {
@@ -352,7 +378,7 @@ var MediaApiService = /*#__PURE__*/function () {
                   mime_type: originalFile.type
                 };
               }); // Save to media API - POST /v1/media with { media: [...] }
-              _context4.n = 14;
+              _context4.n = 18;
               return this.apiCall({
                 method: "POST",
                 path: "/v1/media",
@@ -360,25 +386,25 @@ var MediaApiService = /*#__PURE__*/function () {
                   media: mediaData
                 }
               });
-            case 14:
-              _context4.n = 16;
+            case 18:
+              _context4.n = 20;
               break;
-            case 15:
-              _context4.p = 15;
-              _t4 = _context4.v;
-              console.error("Upload error:", _t4);
+            case 19:
+              _context4.p = 19;
+              _t5 = _context4.v;
+              console.error("Upload error:", _t5);
               if (this.onError) {
-                this.onError(_t4);
+                this.onError(_t5);
               }
-              throw _t4;
-            case 16:
+              throw _t5;
+            case 20:
               i++;
               _context4.n = 2;
               break;
-            case 17:
+            case 21:
               return _context4.a(2, all_files_uri);
           }
-        }, _callee4, this, [[6, 11], [3, 15]]);
+        }, _callee4, this, [[7, 12], [6, 15], [3, 19]]);
       }));
       function uploadMedia(_x5, _x6) {
         return _uploadMedia.apply(this, arguments);

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

@@ -79,6 +79,7 @@ var FileUpload = function FileUpload(_ref) {
     onUploadError = _ref.onUploadError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icon = _ref.icon,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -97,14 +98,44 @@ var FileUpload = function FileUpload(_ref) {
 
   // Convert file picker result to File-like object for apiService
   var convertToFile = function convertToFile(pickerResult) {
-    // Picker typically returns: { uri, type, fileName, fileSize, width, height }
-    // We need to create a File-like object that apiService.uploadMedia expects
-    // For React Native, we'll use the URI directly and let uploadMedia handle it
+    // Handle different picker formats:
+    // react-native-image-picker: { uri, fileName, mimeType, fileSize, ... }
+    // expo-image-picker: { uri, fileName, mimeType, ... }
+    // Custom: { uri, name, type, ... }
+
+    // Extract URI (can be file://, content://, or http://)
+    var uri = pickerResult.uri || pickerResult.path;
+
+    // Extract file name (handle different property names)
+    var fileName = pickerResult.fileName || pickerResult.name;
+
+    // If no fileName, try to extract from URI
+    if (!fileName && uri) {
+      var uriParts = uri.split("/");
+      var lastPart = uriParts[uriParts.length - 1];
+      fileName = lastPart ? lastPart.split("?")[0] : null; // Remove query params if any
+    }
+
+    // Final fallback
+    if (!fileName) {
+      // Try to guess from mimeType
+      var _mimeType = pickerResult.mimeType || pickerResult.type || "";
+      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";
+      } else if (_mimeType.includes("video")) {
+        fileName = "video.mp4";
+      } else {
+        fileName = "file";
+      }
+    }
+
+    // Extract MIME type (handle different property names)
+    var mimeType = pickerResult.mimeType || pickerResult.type || "image/jpeg"; // Default fallback
 
     return {
-      uri: pickerResult.uri,
-      name: pickerResult.fileName || pickerResult.uri.split("/").pop() || "image.jpg",
-      type: pickerResult.type || pickerResult.mimeType || "image/jpeg",
+      uri: uri,
+      name: fileName,
+      type: mimeType,
       // Keep original picker result for potential use
       _pickerResult: pickerResult
     };
@@ -195,7 +226,8 @@ var FileUpload = function FileUpload(_ref) {
           case 2:
             result = _context2.v;
             // Handle different picker response formats
-            // react-native-image-picker: { assets: [...] }
+            // react-native-image-picker: { assets: [{ uri, fileName, mimeType, ... }] }
+            //   Example: { assets: [{ uri: "file:///...", fileName: "image.jpg", mimeType: "image/jpeg" }] }
             // expo-image-picker: { assets: [...] }
             // Custom: could be array directly or { assets: [...] }
             assets = Array.isArray(result) ? result : (result === null || result === void 0 ? void 0 : result.assets) || result || [];
@@ -256,19 +288,20 @@ var FileUpload = function FileUpload(_ref) {
         borderRadius: theme.radius.md
       }, buttonStyle],
       disabled: isLoading,
-      children: [/*#__PURE__*/_jsx(View, {
+      children: [icon && /*#__PURE__*/_jsx(View, {
         style: [styles.iconContainer, {
           backgroundColor: theme.colors.uploadIconBackground,
           borderRadius: theme.radius.xl,
           marginBottom: theme.spacing.sm,
           padding: theme.spacing.md
         }, iconContainerStyle],
-        children: /*#__PURE__*/_jsx(CameraIcon, {})
+        children: icon
       }), /*#__PURE__*/_jsx(Text, {
         style: [styles.title, {
           color: theme.colors.uploadText,
-          marginTop: theme.spacing.sm,
-          fontSize: theme.typography.caption.fontSize
+          fontSize: theme.typography.body.fontSize,
+          fontWeight: theme.typography.body.fontWeight,
+          marginTop: icon ? theme.spacing.sm : 0
         }, titleStyle],
         children: title
       })]

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

@@ -17,6 +17,7 @@ import { View, FlatList, Image, TouchableOpacity, StyleSheet, Dimensions } from
 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 { jsx as _jsx } from "react/jsx-runtime";
 var _Dimensions$get = Dimensions.get('window'),
@@ -134,7 +135,8 @@ var ImagesGallery = function ImagesGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme
+          theme: theme,
+          icon: /*#__PURE__*/_jsx(CameraIcon, {})
         })
       });
     }

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

@@ -4,13 +4,13 @@ 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 from 'react';
-import { Modal, View, Text, TouchableOpacity, StyleSheet, Dimensions, Animated, TouchableWithoutFeedback } from 'react-native';
-import MediaTab from './MediaTab.native';
-import { CloseIcon } from './Icons.native';
-import { createTheme } from './theme';
+import React from "react";
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Dimensions, Animated, TouchableWithoutFeedback } from "react-native";
+import MediaTab from "./MediaTab.native";
+import { CloseIcon } from "./Icons.native";
+import { createTheme } from "./theme";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var _Dimensions$get = Dimensions.get('window'),
+var _Dimensions$get = Dimensions.get("window"),
   SCREEN_HEIGHT = _Dimensions$get.height;
 var MediaPopup = function MediaPopup(_ref) {
   var isOpen = _ref.isOpen,
@@ -18,11 +18,11 @@ var MediaPopup = function MediaPopup(_ref) {
     onSelect = _ref.onSelect,
     currentData = _ref.currentData,
     _ref$options = _ref.options,
-    options = _ref$options === void 0 ? ['image'] : _ref$options,
+    options = _ref$options === void 0 ? ["image"] : _ref$options,
     apiService = _ref.apiService,
     onError = _ref.onError,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Media Gallery' : _ref$title,
+    title = _ref$title === void 0 ? "Media Gallery" : _ref$title,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
     theme = _ref.theme,
@@ -84,6 +84,7 @@ var MediaPopup = function MediaPopup(_ref) {
               backgroundColor: currentTheme.colors.background,
               borderTopLeftRadius: currentTheme.radius.xxl,
               borderTopRightRadius: currentTheme.radius.xxl,
+              height: SCREEN_HEIGHT * sheetHeight,
               maxHeight: SCREEN_HEIGHT * sheetHeight,
               padding: currentTheme.spacing.xl
             }, containerStyle, {
@@ -93,9 +94,7 @@ var MediaPopup = function MediaPopup(_ref) {
             }],
             children: [/*#__PURE__*/_jsxs(View, {
               style: [styles.header, {
-                borderBottomColor: currentTheme.colors.border,
-                marginBottom: currentTheme.spacing.lg,
-                paddingBottom: currentTheme.spacing.md
+                marginBottom: currentTheme.spacing.md
               }, headerStyle],
               children: [/*#__PURE__*/_jsx(Text, {
                 style: [styles.title, {
@@ -139,24 +138,24 @@ var MediaPopup = function MediaPopup(_ref) {
 var styles = StyleSheet.create({
   overlay: {
     flex: 1,
-    justifyContent: 'flex-end'
+    justifyContent: "flex-end"
   },
   container: {
-    minHeight: 200,
-    shadowColor: '#000',
+    width: "100%",
+    shadowColor: "#000",
     shadowOffset: {
       width: 0,
       height: -2
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    overflow: "hidden" // Ensure content doesn't overflow
   },
   header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottomWidth: 1
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   title: {
     flex: 1

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

@@ -4,11 +4,11 @@ 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, { useMemo, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import ImagesGallery from './MediaGallery.native';
-import VideosGallery from './VideosGallery.native';
-import { defaultTheme } from './theme';
+import React, { useMemo, useState } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import ImagesGallery from "./MediaGallery.native";
+import VideosGallery from "./VideosGallery.native";
+import { defaultTheme } from "./theme";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var MediaTab = function MediaTab(_ref) {
   var imagePopup = _ref.imagePopup,
@@ -35,9 +35,9 @@ var MediaTab = function MediaTab(_ref) {
   // Build a stable list of enabled tabs in order
   var availableTabs = useMemo(function () {
     var tabs = [];
-    if (options !== null && options !== void 0 && options.includes('image')) tabs.push('image');
-    if (options !== null && options !== void 0 && options.includes('video')) tabs.push('video');
-    if (options !== null && options !== void 0 && options.includes('file')) tabs.push('file');
+    if (options !== null && options !== void 0 && options.includes("image")) tabs.push("image");
+    if (options !== null && options !== void 0 && options.includes("video")) tabs.push("video");
+    if (options !== null && options !== void 0 && options.includes("file")) tabs.push("file");
     return tabs;
   }, [options]);
   var _useState = useState(0),
@@ -50,13 +50,13 @@ var MediaTab = function MediaTab(_ref) {
     return null;
   }
   var renderTabLabel = function renderTabLabel(type) {
-    if (type === 'image') return 'Images';
-    if (type === 'video') return 'Videos';
-    if (type === 'file') return 'Files';
+    if (type === "image") return "Images";
+    if (type === "video") return "Videos";
+    if (type === "file") return "Files";
     return type;
   };
   var renderPanel = function renderPanel(type) {
-    if (type === 'image') {
+    if (type === "image") {
       return /*#__PURE__*/_jsx(ImagesGallery, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -65,10 +65,11 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
-    if (type === 'video') {
+    if (type === "video") {
       return /*#__PURE__*/_jsx(VideosGallery, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -81,7 +82,7 @@ var MediaTab = function MediaTab(_ref) {
         theme: theme
       });
     }
-    if (type === 'file') {
+    if (type === "file") {
       // Reuse ImagesGallery for files as in original implementation
       return /*#__PURE__*/_jsx(ImagesGallery, {
         imagePopup: imagePopup,
@@ -91,7 +92,8 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
     return null;
@@ -102,7 +104,9 @@ var MediaTab = function MediaTab(_ref) {
       style: [styles.tabList, {
         backgroundColor: theme.colors.tabBackground,
         borderBottomColor: theme.colors.border,
-        paddingHorizontal: theme.spacing.xs
+        paddingHorizontal: theme.spacing.xs,
+        // Always left align
+        justifyContent: "flex-start"
       }, tabListStyle],
       children: availableTabs.map(function (type, index) {
         var isSelected = index === selectedIndex;
@@ -112,7 +116,8 @@ var MediaTab = function MediaTab(_ref) {
           },
           style: [styles.tabButton, {
             paddingVertical: theme.spacing.md,
-            paddingHorizontal: theme.spacing.lg
+            paddingHorizontal: theme.spacing.lg,
+            flex: 1
           }, tabButtonStyle, isSelected ? [styles.tabButtonActive, tabButtonActiveStyle] : [styles.tabButtonInactive, tabButtonInactiveStyle]],
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.tabButtonText, {
@@ -148,14 +153,13 @@ var styles = StyleSheet.create({
     flex: 1
   },
   tabList: {
-    flexDirection: 'row',
+    flexDirection: "row",
     borderBottomWidth: 2
   },
   tabButton: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative'
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
   },
   tabButtonActive: {
     // Active state styling applied via theme
@@ -173,7 +177,7 @@ var styles = StyleSheet.create({
     // Inactive text color applied via theme
   },
   tabIndicator: {
-    position: 'absolute',
+    position: "absolute",
     bottom: -2,
     left: 0,
     right: 0,
@@ -186,7 +190,7 @@ var styles = StyleSheet.create({
     flex: 1
   },
   panelHidden: {
-    display: 'none'
+    display: "none"
   }
 });
 export default MediaTab;

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

@@ -17,6 +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';
 import { defaultTheme } from './theme';
 // Note: You'll need to install react-native-video for video playback
 // import Video from 'react-native-video'
@@ -135,7 +136,8 @@ var VideosGallery = function VideosGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme
+          theme: theme,
+          icon: /*#__PURE__*/_jsx(CameraIcon, {})
         })
       });
     }

package/dist/native/FileUpload.native.js

@@ -85,6 +85,7 @@ var FileUpload = function FileUpload(_ref) {
     onUploadError = _ref.onUploadError,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
+    icon = _ref.icon,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? _theme.defaultTheme : _ref$theme,
     containerStyle = _ref.containerStyle,
@@ -103,14 +104,44 @@ var FileUpload = function FileUpload(_ref) {
 
   // Convert file picker result to File-like object for apiService
   var convertToFile = function convertToFile(pickerResult) {
-    // Picker typically returns: { uri, type, fileName, fileSize, width, height }
-    // We need to create a File-like object that apiService.uploadMedia expects
-    // For React Native, we'll use the URI directly and let uploadMedia handle it
+    // Handle different picker formats:
+    // react-native-image-picker: { uri, fileName, mimeType, fileSize, ... }
+    // expo-image-picker: { uri, fileName, mimeType, ... }
+    // Custom: { uri, name, type, ... }
+
+    // Extract URI (can be file://, content://, or http://)
+    var uri = pickerResult.uri || pickerResult.path;
+
+    // Extract file name (handle different property names)
+    var fileName = pickerResult.fileName || pickerResult.name;
+
+    // If no fileName, try to extract from URI
+    if (!fileName && uri) {
+      var uriParts = uri.split("/");
+      var lastPart = uriParts[uriParts.length - 1];
+      fileName = lastPart ? lastPart.split("?")[0] : null; // Remove query params if any
+    }
+
+    // Final fallback
+    if (!fileName) {
+      // Try to guess from mimeType
+      var _mimeType = pickerResult.mimeType || pickerResult.type || "";
+      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";
+      } else if (_mimeType.includes("video")) {
+        fileName = "video.mp4";
+      } else {
+        fileName = "file";
+      }
+    }
+
+    // Extract MIME type (handle different property names)
+    var mimeType = pickerResult.mimeType || pickerResult.type || "image/jpeg"; // Default fallback
 
     return {
-      uri: pickerResult.uri,
-      name: pickerResult.fileName || pickerResult.uri.split("/").pop() || "image.jpg",
-      type: pickerResult.type || pickerResult.mimeType || "image/jpeg",
+      uri: uri,
+      name: fileName,
+      type: mimeType,
       // Keep original picker result for potential use
       _pickerResult: pickerResult
     };
@@ -201,7 +232,8 @@ var FileUpload = function FileUpload(_ref) {
           case 2:
             result = _context2.v;
             // Handle different picker response formats
-            // react-native-image-picker: { assets: [...] }
+            // react-native-image-picker: { assets: [{ uri, fileName, mimeType, ... }] }
+            //   Example: { assets: [{ uri: "file:///...", fileName: "image.jpg", mimeType: "image/jpeg" }] }
             // expo-image-picker: { assets: [...] }
             // Custom: could be array directly or { assets: [...] }
             assets = Array.isArray(result) ? result : (result === null || result === void 0 ? void 0 : result.assets) || result || [];
@@ -262,19 +294,20 @@ var FileUpload = function FileUpload(_ref) {
         borderRadius: theme.radius.md
       }, buttonStyle],
       disabled: isLoading,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [icon && /*#__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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
+        children: icon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.title, {
           color: theme.colors.uploadText,
-          marginTop: theme.spacing.sm,
-          fontSize: theme.typography.caption.fontSize
+          fontSize: theme.typography.body.fontSize,
+          fontWeight: theme.typography.body.fontWeight,
+          marginTop: icon ? theme.spacing.sm : 0
         }, titleStyle],
         children: title
       })]

package/dist/native/MediaGallery.native.js

@@ -10,6 +10,7 @@ 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 }; }
@@ -143,7 +144,8 @@ var ImagesGallery = function ImagesGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme
+          theme: theme,
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
         })
       });
     }

package/dist/native/MediaPopup.native.js

@@ -17,7 +17,7 @@ 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; }
-var _Dimensions$get = _reactNative.Dimensions.get('window'),
+var _Dimensions$get = _reactNative.Dimensions.get("window"),
   SCREEN_HEIGHT = _Dimensions$get.height;
 var MediaPopup = function MediaPopup(_ref) {
   var isOpen = _ref.isOpen,
@@ -25,11 +25,11 @@ var MediaPopup = function MediaPopup(_ref) {
     onSelect = _ref.onSelect,
     currentData = _ref.currentData,
     _ref$options = _ref.options,
-    options = _ref$options === void 0 ? ['image'] : _ref$options,
+    options = _ref$options === void 0 ? ["image"] : _ref$options,
     apiService = _ref.apiService,
     onError = _ref.onError,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? 'Media Gallery' : _ref$title,
+    title = _ref$title === void 0 ? "Media Gallery" : _ref$title,
     picker = _ref.picker,
     pickerOptions = _ref.pickerOptions,
     theme = _ref.theme,
@@ -91,6 +91,7 @@ var MediaPopup = function MediaPopup(_ref) {
               backgroundColor: currentTheme.colors.background,
               borderTopLeftRadius: currentTheme.radius.xxl,
               borderTopRightRadius: currentTheme.radius.xxl,
+              height: SCREEN_HEIGHT * sheetHeight,
               maxHeight: SCREEN_HEIGHT * sheetHeight,
               padding: currentTheme.spacing.xl
             }, containerStyle, {
@@ -100,9 +101,7 @@ var MediaPopup = function MediaPopup(_ref) {
             }],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: [styles.header, {
-                borderBottomColor: currentTheme.colors.border,
-                marginBottom: currentTheme.spacing.lg,
-                paddingBottom: currentTheme.spacing.md
+                marginBottom: currentTheme.spacing.md
               }, headerStyle],
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.title, {
@@ -146,24 +145,24 @@ var MediaPopup = function MediaPopup(_ref) {
 var styles = _reactNative.StyleSheet.create({
   overlay: {
     flex: 1,
-    justifyContent: 'flex-end'
+    justifyContent: "flex-end"
   },
   container: {
-    minHeight: 200,
-    shadowColor: '#000',
+    width: "100%",
+    shadowColor: "#000",
     shadowOffset: {
       width: 0,
       height: -2
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    overflow: "hidden" // Ensure content doesn't overflow
   },
   header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottomWidth: 1
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   title: {
     flex: 1

package/dist/native/MediaTab.native.js

@@ -44,9 +44,9 @@ var MediaTab = function MediaTab(_ref) {
   // Build a stable list of enabled tabs in order
   var availableTabs = (0, _react.useMemo)(function () {
     var tabs = [];
-    if (options !== null && options !== void 0 && options.includes('image')) tabs.push('image');
-    if (options !== null && options !== void 0 && options.includes('video')) tabs.push('video');
-    if (options !== null && options !== void 0 && options.includes('file')) tabs.push('file');
+    if (options !== null && options !== void 0 && options.includes("image")) tabs.push("image");
+    if (options !== null && options !== void 0 && options.includes("video")) tabs.push("video");
+    if (options !== null && options !== void 0 && options.includes("file")) tabs.push("file");
     return tabs;
   }, [options]);
   var _useState = (0, _react.useState)(0),
@@ -59,13 +59,13 @@ var MediaTab = function MediaTab(_ref) {
     return null;
   }
   var renderTabLabel = function renderTabLabel(type) {
-    if (type === 'image') return 'Images';
-    if (type === 'video') return 'Videos';
-    if (type === 'file') return 'Files';
+    if (type === "image") return "Images";
+    if (type === "video") return "Videos";
+    if (type === "file") return "Files";
     return type;
   };
   var renderPanel = function renderPanel(type) {
-    if (type === 'image') {
+    if (type === "image") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -74,10 +74,11 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
-    if (type === 'video') {
+    if (type === "video") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideosGallery.default, {
         imagePopup: imagePopup,
         update_data: update_data,
@@ -90,7 +91,7 @@ var MediaTab = function MediaTab(_ref) {
         theme: theme
       });
     }
-    if (type === 'file') {
+    if (type === "file") {
       // Reuse ImagesGallery for files as in original implementation
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
         imagePopup: imagePopup,
@@ -100,7 +101,8 @@ var MediaTab = function MediaTab(_ref) {
         apiService: apiService,
         onError: onError,
         picker: picker,
-        pickerOptions: pickerOptions
+        pickerOptions: pickerOptions,
+        theme: theme
       });
     }
     return null;
@@ -111,7 +113,9 @@ var MediaTab = function MediaTab(_ref) {
       style: [styles.tabList, {
         backgroundColor: theme.colors.tabBackground,
         borderBottomColor: theme.colors.border,
-        paddingHorizontal: theme.spacing.xs
+        paddingHorizontal: theme.spacing.xs,
+        // Always left align
+        justifyContent: "flex-start"
       }, tabListStyle],
       children: availableTabs.map(function (type, index) {
         var isSelected = index === selectedIndex;
@@ -121,7 +125,8 @@ var MediaTab = function MediaTab(_ref) {
           },
           style: [styles.tabButton, {
             paddingVertical: theme.spacing.md,
-            paddingHorizontal: theme.spacing.lg
+            paddingHorizontal: theme.spacing.lg,
+            flex: 1
           }, tabButtonStyle, isSelected ? [styles.tabButtonActive, tabButtonActiveStyle] : [styles.tabButtonInactive, tabButtonInactiveStyle]],
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.tabButtonText, {
@@ -157,14 +162,13 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   tabList: {
-    flexDirection: 'row',
+    flexDirection: "row",
     borderBottomWidth: 2
   },
   tabButton: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative'
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
   },
   tabButtonActive: {
     // Active state styling applied via theme
@@ -182,7 +186,7 @@ var styles = _reactNative.StyleSheet.create({
     // Inactive text color applied via theme
   },
   tabIndicator: {
-    position: 'absolute',
+    position: "absolute",
     bottom: -2,
     left: 0,
     right: 0,
@@ -195,7 +199,7 @@ var styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   panelHidden: {
-    display: 'none'
+    display: "none"
   }
 });
 var _default = exports.default = MediaTab;

package/dist/native/VideosGallery.native.js

@@ -10,6 +10,7 @@ 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 }; }
@@ -143,7 +144,8 @@ var VideosGallery = function VideosGallery(_ref) {
           onUploadError: onError,
           picker: picker,
           pickerOptions: pickerOptions,
-          theme: theme
+          theme: theme,
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CameraIcon, {})
         })
       });
     }

package/package.json

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