@tamagui/image 1.143.0 → 2.0.0-1

package/dist/cjs/Image.cjs

@@ -1,9 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
     for (var name in all) __defProp(target, name, {
       get: all[name],
@@ -17,70 +15,48 @@ var __export = (target, all) => {
     });
     return to;
   };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
 var Image_exports = {};
 __export(Image_exports, {
   Image: () => Image
 });
 module.exports = __toCommonJS(Image_exports);
-var import_react = __toESM(require("react"), 1),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_react_native = require("react-native-web"),
+var import_web = require("@tamagui/web"),
   import_jsx_runtime = require("react/jsx-runtime");
-const StyledImage = (0, import_core.styled)(import_react_native.Image, {
-  name: "Image"
-});
-let hasWarned = !1;
-const Image = StyledImage.styleable((inProps, ref) => {
-  const [props, style] = (0, import_core.usePropsAndStyle)(inProps),
-    {
-      src,
-      source,
-      objectFit,
+const StyledImage = (0, import_web.styled)(import_web.View, {
+    name: "Image",
+    tag: "img"
+  }),
+  Image = StyledImage.styleable((inProps, ref) => {
+    const {
+      // exclude native only props
+      blurRadius,
+      capInsets,
+      defaultSource,
+      fadeDuration,
+      loadingIndicatorSource,
+      onLoadEnd,
+      onPartialLoad,
+      progressiveRenderingEnabled,
+      resizeMethod,
+      tintColor,
+      ...rest
+    } = inProps;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StyledImage, {
+      ref,
       ...rest
-    } = props;
-  process.env.NODE_ENV === "development" && typeof src == "string" && (typeof props.width == "string" && props.width[0] !== "$" || typeof props.height == "string" && props.height[0] !== "$") && (hasWarned || (hasWarned = !0, console.warn('React Native expects a numerical width/height. If you want to use a percent you must define the "source" prop with width, height, and uri.')));
-  let finalSource = typeof src == "string" ? {
-    uri: src,
-    ...(import_constants.isWeb && {
-      width: props.width || style?.width,
-      height: props.height || style?.height
-    })
-  } : source ?? src;
-  return finalSource && typeof finalSource == "object" && (process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR && import_react.default.useEffect(() => {
-    async function run() {
-      if (typeof src == "string") try {
-        await fetch(src).then(res => res.text());
-      } catch {
-        console.error(`Error loading image: ${src}`, {
-          props
-        });
-      }
+    });
+  }, {
+    staticConfig: {
+      memo: !0
     }
-    run();
-  }, [src]), finalSource.default && (finalSource = finalSource.default)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Image, {
-    resizeMode: objectFit,
-    ref,
-    source: finalSource,
-    style,
-    ...rest
-  });
-});
-Image.getSize = import_react_native.Image.getSize;
-Image.getSizeWithHeaders = import_react_native.Image.getSizeWithHeaders;
-Image.prefetch = import_react_native.Image.prefetch;
-Image.prefetchWithMetadata = import_react_native.Image.prefetchWithMetadata;
-Image.abortPrefetch = import_react_native.Image.abortPrefetch;
-Image.queryCache = import_react_native.Image.queryCache;
+  }),
+  func = () => {};
+Image.getSize = func;
+Image.getSizeWithHeaders = func;
+Image.prefetch = func;
+Image.prefetchWithMetadata = func;
+Image.abortPrefetch = func;
+Image.queryCache = func;

package/dist/cjs/Image.js

@@ -1,8 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: !0 });
@@ -12,61 +11,45 @@ var __export = (target, all) => {
       !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
-  mod
-)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var Image_exports = {};
 __export(Image_exports, {
   Image: () => Image
 });
 module.exports = __toCommonJS(Image_exports);
-var import_react = __toESM(require("react"), 1), import_constants = require("@tamagui/constants"), import_core = require("@tamagui/core"), import_react_native = require("react-native-web"), import_jsx_runtime = require("react/jsx-runtime");
-const StyledImage = (0, import_core.styled)(import_react_native.Image, {
-  name: "Image"
-});
-let hasWarned = !1;
-const Image = StyledImage.styleable((inProps, ref) => {
-  const [props, style] = (0, import_core.usePropsAndStyle)(inProps), { src, source, objectFit, ...rest } = props;
-  process.env.NODE_ENV === "development" && typeof src == "string" && (typeof props.width == "string" && props.width[0] !== "$" || typeof props.height == "string" && props.height[0] !== "$") && (hasWarned || (hasWarned = !0, console.warn(
-    'React Native expects a numerical width/height. If you want to use a percent you must define the "source" prop with width, height, and uri.'
-  )));
-  let finalSource = typeof src == "string" ? {
-    uri: src,
-    ...import_constants.isWeb && {
-      width: props.width || style?.width,
-      height: props.height || style?.height
-    }
-  } : source ?? src;
-  return finalSource && typeof finalSource == "object" && (process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR && import_react.default.useEffect(() => {
-    async function run() {
-      if (typeof src == "string")
-        try {
-          await fetch(src).then((res) => res.text());
-        } catch {
-          console.error(`Error loading image: ${src}`, { props });
-        }
-    }
-    run();
-  }, [src]), finalSource.default && (finalSource = finalSource.default)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native.Image,
-    {
-      resizeMode: objectFit,
-      ref,
-      source: finalSource,
-      style,
+var import_web = require("@tamagui/web"), import_jsx_runtime = require("react/jsx-runtime");
+const StyledImage = (0, import_web.styled)(import_web.View, {
+  name: "Image",
+  tag: "img"
+}), Image = StyledImage.styleable(
+  (inProps, ref) => {
+    const {
+      // exclude native only props
+      blurRadius,
+      capInsets,
+      defaultSource,
+      fadeDuration,
+      loadingIndicatorSource,
+      onLoadEnd,
+      onPartialLoad,
+      progressiveRenderingEnabled,
+      resizeMethod,
+      tintColor,
       ...rest
+    } = inProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledImage, { ref, ...rest });
+  },
+  {
+    staticConfig: {
+      memo: !0
     }
-  );
+  }
+), func = (() => {
 });
-Image.getSize = import_react_native.Image.getSize;
-Image.getSizeWithHeaders = import_react_native.Image.getSizeWithHeaders;
-Image.prefetch = import_react_native.Image.prefetch;
-Image.prefetchWithMetadata = import_react_native.Image.prefetchWithMetadata;
-Image.abortPrefetch = import_react_native.Image.abortPrefetch;
-Image.queryCache = import_react_native.Image.queryCache;
+Image.getSize = func;
+Image.getSizeWithHeaders = func;
+Image.prefetch = func;
+Image.prefetchWithMetadata = func;
+Image.abortPrefetch = func;
+Image.queryCache = func;
 //# sourceMappingURL=Image.js.map

package/dist/cjs/Image.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,8BAClB,mBAAsB,+BAQtB,cAAyC,0BAEzC,sBAAiC,yBAqH7B;AAnHJ,MAAM,kBAAc,oBAAO,oBAAAA,OAAS;AAAA,EAClC,MAAM;AACR,CAAC;AAmCD,IAAI,YAAY;AAMT,MAAM,QAAQ,YAAY,UAAsB,CAAC,SAAS,QAAQ;AACvE,QAAM,CAAC,OAAO,KAAK,QAAI,8BAAiB,OAAO,GACzC,EAAE,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAI;AAE5C,EAAI,QAAQ,IAAI,aAAa,iBACvB,OAAO,OAAQ,aAEd,OAAO,MAAM,SAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,UAAW,YAAY,MAAM,OAAO,CAAC,MAAM,SAEpD,cACH,YAAY,IACZ,QAAQ;AAAA,IACN;AAAA,EACF;AAMR,MAAI,cACF,OAAO,OAAQ,WACX;AAAA,IACE,KAAK;AAAA,IACL,GAAI,0BAAS;AAAA,MACX,OAAO,MAAM,SAAS,OAAO;AAAA,MAC7B,QAAQ,MAAM,UAAU,OAAO;AAAA,IACjC;AAAA,EACF,IACC,UAAU;AAEjB,SAAI,eAAe,OAAO,eAAgB,aAgBpC,QAAQ,IAAI,aAAa,iBAAiB,QAAQ,IAAI,6BAExD,aAAAC,QAAM,UAAU,MAAM;AACpB,mBAAe,MAAM;AACnB,UAAI,OAAO,OAAQ;AACjB,YAAI;AACF,gBAAM,MAAM,GAAG,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAAA,QAC3C,QAAc;AACZ,kBAAQ,MAAM,wBAAwB,GAAG,IAAI,EAAE,MAAM,CAAC;AAAA,QACxD;AAAA,IAEJ;AAEA,QAAI;AAAA,EACN,GAAG,CAAC,GAAG,CAAC,GAIN,YAAY,YACd,cAAc,YAAY,WAM5B;AAAA,IAAC,oBAAAD;AAAA,IAAA;AAAA,MACC,YAAY;AAAA,MACZ;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ,CAAC;AAED,MAAM,UAAU,oBAAAA,MAAQ;AACxB,MAAM,qBAAqB,oBAAAA,MAAQ;AACnC,MAAM,WAAW,oBAAAA,MAAQ;AACzB,MAAM,uBAAuB,oBAAAA,MAAQ;AACrC,MAAM,gBAAgB,oBAAAA,MAAQ;AAC9B,MAAM,aAAa,oBAAAA,MAAQ;",
-  "names": ["RNImage", "React"]
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAA6B,yBAwBlB;AArBX,MAAM,kBAAc,mBAAO,iBAAM;AAAA,EAC/B,MAAM;AAAA,EACN,KAAK;AACP,CAAC,GAEY,QAAQ,YAAY;AAAA,EAC/B,CAAC,SAAS,QAAQ;AAChB,UAAM;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,WAAO,4CAAC,eAAY,KAAW,GAAG,MAAM;AAAA,EAC1C;AAAA,EACA;AAAA,IACE,cAAc;AAAA,MACZ,MAAM;AAAA,IACR;AAAA,EACF;AACF,GAEM,QAAQ,MAAM;AAAC;AAErB,MAAM,UAAU;AAChB,MAAM,qBAAqB;AAC3B,MAAM,WAAW;AACjB,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AACtB,MAAM,aAAa;",
+  "names": []
 }

package/dist/cjs/Image.native.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
     for (var name in all) __defProp(target, name, {
       get: all[name],
@@ -19,87 +17,17 @@ var __export = (target, all) => {
     });
     return to;
   };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
-var Image_exports = {};
-__export(Image_exports, {
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Image_native_exports = {};
+__export(Image_native_exports, {
   Image: () => Image
 });
-module.exports = __toCommonJS(Image_exports);
-var import_jsx_runtime = require("react/jsx-runtime"),
-  import_react = __toESM(require("react"), 1),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_react_native = require("react-native");
-function _type_of(obj) {
-  "@swc/helpers - typeof";
-
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-var StyledImage = (0, import_core.styled)(import_react_native.Image, {
-    name: "Image"
-  }),
-  hasWarned = !1,
-  Image = StyledImage.styleable(function (inProps, ref) {
-    var [props, style] = (0, import_core.usePropsAndStyle)(inProps),
-      {
-        src,
-        source,
-        objectFit,
-        ...rest
-      } = props;
-    process.env.NODE_ENV === "development" && typeof src == "string" && (typeof props.width == "string" && props.width[0] !== "$" || typeof props.height == "string" && props.height[0] !== "$") && (hasWarned || (hasWarned = !0, console.warn('React Native expects a numerical width/height. If you want to use a percent you must define the "source" prop with width, height, and uri.')));
-    var finalSource = typeof src == "string" ? {
-      uri: src,
-      ...(import_constants.isWeb && {
-        width: props.width || style?.width,
-        height: props.height || style?.height
-      })
-    } : source ?? src;
-    if (finalSource && (typeof finalSource > "u" ? "undefined" : _type_of(finalSource)) === "object") {
-      if (!Array.isArray(finalSource) && typeof finalSource.uri == "number" && (finalSource = finalSource.uri, source && (typeof source > "u" ? "undefined" : _type_of(source)) === "object" && !Array.isArray(source))) {
-        var _style, _style1, _width;
-        (_width = (_style = style).width) !== null && _width !== void 0 || (_style.width = source.width);
-        var _height;
-        (_height = (_style1 = style).height) !== null && _height !== void 0 || (_style1.height = source.height);
-      }
-      process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR && import_react.default.useEffect(function () {
-        async function run() {
-          if (typeof src == "string") try {
-            await fetch(src).then(function (res) {
-              return res.text();
-            });
-          } catch {
-            console.error(`Error loading image: ${src}`, {
-              props
-            });
-          }
-        }
-        run();
-      }, [src]), finalSource.default && (finalSource = finalSource.default);
-    }
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Image, {
-      resizeMode: objectFit,
-      ref,
-      source: finalSource,
-      style,
-      ...rest
-    });
+module.exports = __toCommonJS(Image_native_exports);
+var import_react_native = require("react-native"),
+  import_createImage = require("./createImage.native.js"),
+  Image = (0, import_createImage.createImage)({
+    Component: import_react_native.Image
   });
-Image.getSize = import_react_native.Image.getSize;
-Image.getSizeWithHeaders = import_react_native.Image.getSizeWithHeaders;
-Image.prefetch = import_react_native.Image.prefetch;
-Image.prefetchWithMetadata = import_react_native.Image.prefetchWithMetadata;
-Image.abortPrefetch = import_react_native.Image.abortPrefetch;
-Image.queryCache = import_react_native.Image.queryCache;
 //# sourceMappingURL=Image.native.js.map

package/dist/cjs/Image.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Image_exports","__export","Image","module","exports","import_jsx_runtime","require","import_react","__toESM","import_constants","import_core","import_react_native","_type_of","obj","Symbol","constructor","StyledImage","styled","name","hasWarned","styleable","inProps","ref","props","style","usePropsAndStyle","src","source","objectFit","rest","process","env","NODE_ENV","width","height","console","warn","finalSource","uri","isWeb","Array","isArray","_style","_style1","_width","_height","TAMAGUI_IMAGE_CHECK_ERROR","default","useEffect","run","fetch","then","res","text","error","jsx"],"sources":["../../src/Image.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Image_native_exports","__export","Image","module","exports","__toCommonJS","import_react_native","require","import_createImage","createImage","Component"],"sources":["../../src/Image.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,KAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAL,oBAAA;AAAA,IAAAM,mBAAA,GAAiCC,OAAA;EACjCC,kBAAA,GAA4BD,OAAA;EACjBL,KAAA,OAAQM,kBAAA,CAAAC,WAAA,EAAY;IAC3BC,SAAA,EAAWJ,mBAAA,CAAAJ;EACf,CAAC","ignoreList":[]}

package/dist/cjs/index.cjs

@@ -15,4 +15,5 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./Image.cjs"), module.exports);
+__reExport(index_exports, require("./Image.cjs"), module.exports);
+__reExport(index_exports, require("./createImage.cjs"), module.exports);

package/dist/cjs/index.js

@@ -12,4 +12,5 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./Image"), module.exports);
+__reExport(index_exports, require("./createImage"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "mappings": ";;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,oBAAd;",
+  "mappings": ";;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,oBAAd;AACA,0BAAc,0BADd;",
   "names": []
 }

package/dist/cjs/index.native.js

@@ -18,4 +18,5 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./Image.native.js"), module.exports);
+__reExport(index_exports, require("./createImage.native.js"), module.exports);
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports","__reExport","require"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA;AACdG,UAAA,CAAAH,aAAA,EAAcI,OAAA,uBAAAH,MADd,CAAAC,OAAA","ignoreList":[]}

package/dist/esm/Image.js

@@ -1,51 +1,39 @@
-import React from "react";
-import { isWeb } from "@tamagui/constants";
-import { styled, usePropsAndStyle } from "@tamagui/core";
-import { Image as RNImage } from "react-native-web";
+import { View, styled } from "@tamagui/web";
 import { jsx } from "react/jsx-runtime";
-const StyledImage = styled(RNImage, {
-  name: "Image"
-});
-let hasWarned = !1;
-const Image = StyledImage.styleable((inProps, ref) => {
-  const [props, style] = usePropsAndStyle(inProps), { src, source, objectFit, ...rest } = props;
-  process.env.NODE_ENV === "development" && typeof src == "string" && (typeof props.width == "string" && props.width[0] !== "$" || typeof props.height == "string" && props.height[0] !== "$") && (hasWarned || (hasWarned = !0, console.warn(
-    'React Native expects a numerical width/height. If you want to use a percent you must define the "source" prop with width, height, and uri.'
-  )));
-  let finalSource = typeof src == "string" ? {
-    uri: src,
-    ...isWeb && {
-      width: props.width || style?.width,
-      height: props.height || style?.height
-    }
-  } : source ?? src;
-  return finalSource && typeof finalSource == "object" && (process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR && React.useEffect(() => {
-    async function run() {
-      if (typeof src == "string")
-        try {
-          await fetch(src).then((res) => res.text());
-        } catch {
-          console.error(`Error loading image: ${src}`, { props });
-        }
-    }
-    run();
-  }, [src]), finalSource.default && (finalSource = finalSource.default)), /* @__PURE__ */ jsx(
-    RNImage,
-    {
-      resizeMode: objectFit,
-      ref,
-      source: finalSource,
-      style,
+const StyledImage = styled(View, {
+  name: "Image",
+  tag: "img"
+}), Image = StyledImage.styleable(
+  (inProps, ref) => {
+    const {
+      // exclude native only props
+      blurRadius,
+      capInsets,
+      defaultSource,
+      fadeDuration,
+      loadingIndicatorSource,
+      onLoadEnd,
+      onPartialLoad,
+      progressiveRenderingEnabled,
+      resizeMethod,
+      tintColor,
       ...rest
+    } = inProps;
+    return /* @__PURE__ */ jsx(StyledImage, { ref, ...rest });
+  },
+  {
+    staticConfig: {
+      memo: !0
     }
-  );
+  }
+), func = (() => {
 });
-Image.getSize = RNImage.getSize;
-Image.getSizeWithHeaders = RNImage.getSizeWithHeaders;
-Image.prefetch = RNImage.prefetch;
-Image.prefetchWithMetadata = RNImage.prefetchWithMetadata;
-Image.abortPrefetch = RNImage.abortPrefetch;
-Image.queryCache = RNImage.queryCache;
+Image.getSize = func;
+Image.getSizeWithHeaders = func;
+Image.prefetch = func;
+Image.prefetchWithMetadata = func;
+Image.abortPrefetch = func;
+Image.queryCache = func;
 export {
   Image
 };

package/dist/esm/Image.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,aAAa;AAQtB,SAAS,QAAQ,wBAAwB;AAEzC,SAAS,SAAS,eAAe;AAqH7B;AAnHJ,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AACR,CAAC;AAmCD,IAAI,YAAY;AAMT,MAAM,QAAQ,YAAY,UAAsB,CAAC,SAAS,QAAQ;AACvE,QAAM,CAAC,OAAO,KAAK,IAAI,iBAAiB,OAAO,GACzC,EAAE,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAI;AAE5C,EAAI,QAAQ,IAAI,aAAa,iBACvB,OAAO,OAAQ,aAEd,OAAO,MAAM,SAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,UAAW,YAAY,MAAM,OAAO,CAAC,MAAM,SAEpD,cACH,YAAY,IACZ,QAAQ;AAAA,IACN;AAAA,EACF;AAMR,MAAI,cACF,OAAO,OAAQ,WACX;AAAA,IACE,KAAK;AAAA,IACL,GAAI,SAAS;AAAA,MACX,OAAO,MAAM,SAAS,OAAO;AAAA,MAC7B,QAAQ,MAAM,UAAU,OAAO;AAAA,IACjC;AAAA,EACF,IACC,UAAU;AAEjB,SAAI,eAAe,OAAO,eAAgB,aAgBpC,QAAQ,IAAI,aAAa,iBAAiB,QAAQ,IAAI,6BAExD,MAAM,UAAU,MAAM;AACpB,mBAAe,MAAM;AACnB,UAAI,OAAO,OAAQ;AACjB,YAAI;AACF,gBAAM,MAAM,GAAG,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAAA,QAC3C,QAAc;AACZ,kBAAQ,MAAM,wBAAwB,GAAG,IAAI,EAAE,MAAM,CAAC;AAAA,QACxD;AAAA,IAEJ;AAEA,QAAI;AAAA,EACN,GAAG,CAAC,GAAG,CAAC,GAIN,YAAY,YACd,cAAc,YAAY,WAM5B;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ,CAAC;AAED,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
+  "mappings": "AAAA,SAAS,MAAM,cAAc;AAwBlB;AArBX,MAAM,cAAc,OAAO,MAAM;AAAA,EAC/B,MAAM;AAAA,EACN,KAAK;AACP,CAAC,GAEY,QAAQ,YAAY;AAAA,EAC/B,CAAC,SAAS,QAAQ;AAChB,UAAM;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,WAAO,oBAAC,eAAY,KAAW,GAAG,MAAM;AAAA,EAC1C;AAAA,EACA;AAAA,IACE,cAAc;AAAA,MACZ,MAAM;AAAA,IACR;AAAA,EACF;AACF,GAEM,QAAQ,MAAM;AAAC;AAErB,MAAM,UAAU;AAChB,MAAM,qBAAqB;AAC3B,MAAM,WAAW;AACjB,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AACtB,MAAM,aAAa;",
   "names": []
 }

package/dist/esm/Image.mjs

@@ -1,52 +1,39 @@
-import React from "react";
-import { isWeb } from "@tamagui/constants";
-import { styled, usePropsAndStyle } from "@tamagui/core";
-import { Image as RNImage } from "react-native-web";
+import { View, styled } from "@tamagui/web";
 import { jsx } from "react/jsx-runtime";
-const StyledImage = styled(RNImage, {
-  name: "Image"
-});
-let hasWarned = !1;
-const Image = StyledImage.styleable((inProps, ref) => {
-  const [props, style] = usePropsAndStyle(inProps),
-    {
-      src,
-      source,
-      objectFit,
+const StyledImage = styled(View, {
+    name: "Image",
+    tag: "img"
+  }),
+  Image = StyledImage.styleable((inProps, ref) => {
+    const {
+      // exclude native only props
+      blurRadius,
+      capInsets,
+      defaultSource,
+      fadeDuration,
+      loadingIndicatorSource,
+      onLoadEnd,
+      onPartialLoad,
+      progressiveRenderingEnabled,
+      resizeMethod,
+      tintColor,
       ...rest
-    } = props;
-  process.env.NODE_ENV === "development" && typeof src == "string" && (typeof props.width == "string" && props.width[0] !== "$" || typeof props.height == "string" && props.height[0] !== "$") && (hasWarned || (hasWarned = !0, console.warn('React Native expects a numerical width/height. If you want to use a percent you must define the "source" prop with width, height, and uri.')));
-  let finalSource = typeof src == "string" ? {
-    uri: src,
-    ...(isWeb && {
-      width: props.width || style?.width,
-      height: props.height || style?.height
-    })
-  } : source ?? src;
-  return finalSource && typeof finalSource == "object" && (process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR && React.useEffect(() => {
-    async function run() {
-      if (typeof src == "string") try {
-        await fetch(src).then(res => res.text());
-      } catch {
-        console.error(`Error loading image: ${src}`, {
-          props
-        });
-      }
+    } = inProps;
+    return /* @__PURE__ */jsx(StyledImage, {
+      ref,
+      ...rest
+    });
+  }, {
+    staticConfig: {
+      memo: !0
     }
-    run();
-  }, [src]), finalSource.default && (finalSource = finalSource.default)), /* @__PURE__ */jsx(RNImage, {
-    resizeMode: objectFit,
-    ref,
-    source: finalSource,
-    style,
-    ...rest
-  });
-});
-Image.getSize = RNImage.getSize;
-Image.getSizeWithHeaders = RNImage.getSizeWithHeaders;
-Image.prefetch = RNImage.prefetch;
-Image.prefetchWithMetadata = RNImage.prefetchWithMetadata;
-Image.abortPrefetch = RNImage.abortPrefetch;
-Image.queryCache = RNImage.queryCache;
+  }),
+  func = () => {};
+Image.getSize = func;
+Image.getSizeWithHeaders = func;
+Image.prefetch = func;
+Image.prefetchWithMetadata = func;
+Image.abortPrefetch = func;
+Image.queryCache = func;
 export { Image };
 //# sourceMappingURL=Image.mjs.map

package/dist/esm/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["React","isWeb","styled","usePropsAndStyle","Image","RNImage","jsx","StyledImage","name","hasWarned","styleable","inProps","ref","props","style","src","source","objectFit","rest","process","env","NODE_ENV","width","height","console","warn","finalSource","uri","TAMAGUI_IMAGE_CHECK_ERROR","useEffect","run","fetch","then","res","text","error","default","resizeMode","getSize","getSizeWithHeaders","prefetch","prefetchWithMetadata","abortPrefetch","queryCache"],"sources":["../../src/Image.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,KAAA,QAAa;AAQtB,SAASC,MAAA,EAAQC,gBAAA,QAAwB;AAEzC,SAASC,KAAA,IAASC,OAAA,QAAe;AAqH7B,SAAAC,GAAA;AAnHJ,MAAMC,WAAA,GAAcL,MAAA,CAAOG,OAAA,EAAS;EAClCG,IAAA,EAAM;AACR,CAAC;AAmCD,IAAIC,SAAA,GAAY;AAMT,MAAML,KAAA,GAAQG,WAAA,CAAYG,SAAA,CAAsB,CAACC,OAAA,EAASC,GAAA,KAAQ;EACvE,MAAM,CAACC,KAAA,EAAOC,KAAK,IAAIX,gBAAA,CAAiBQ,OAAO;IACzC;MAAEI,GAAA;MAAKC,MAAA;MAAQC,SAAA;MAAW,GAAGC;IAAK,IAAIL,KAAA;EAExCM,OAAA,CAAQC,GAAA,CAAIC,QAAA,KAAa,iBACvB,OAAON,GAAA,IAAQ,aAEd,OAAOF,KAAA,CAAMS,KAAA,IAAU,YAAYT,KAAA,CAAMS,KAAA,CAAM,CAAC,MAAM,OACtD,OAAOT,KAAA,CAAMU,MAAA,IAAW,YAAYV,KAAA,CAAMU,MAAA,CAAO,CAAC,MAAM,SAEpDd,SAAA,KACHA,SAAA,GAAY,IACZe,OAAA,CAAQC,IAAA,CACN,4IACF;EAMR,IAAIC,WAAA,GACF,OAAOX,GAAA,IAAQ,WACX;IACEY,GAAA,EAAKZ,GAAA;IACL,IAAId,KAAA,IAAS;MACXqB,KAAA,EAAOT,KAAA,CAAMS,KAAA,IAASR,KAAA,EAAOQ,KAAA;MAC7BC,MAAA,EAAQV,KAAA,CAAMU,MAAA,IAAUT,KAAA,EAAOS;IACjC;EACF,IACCP,MAAA,IAAUD,GAAA;EAEjB,OAAIW,WAAA,IAAe,OAAOA,WAAA,IAAgB,aAgBpCP,OAAA,CAAQC,GAAA,CAAIC,QAAA,KAAa,iBAAiBF,OAAA,CAAQC,GAAA,CAAIQ,yBAAA,IAExD5B,KAAA,CAAM6B,SAAA,CAAU,MAAM;IACpB,eAAeC,IAAA,EAAM;MACnB,IAAI,OAAOf,GAAA,IAAQ,UACjB,IAAI;QACF,MAAMgB,KAAA,CAAMhB,GAAG,EAAEiB,IAAA,CAAMC,GAAA,IAAQA,GAAA,CAAIC,IAAA,CAAK,CAAC;MAC3C,QAAc;QACZV,OAAA,CAAQW,KAAA,CAAM,wBAAwBpB,GAAG,IAAI;UAAEF;QAAM,CAAC;MACxD;IAEJ;IAEAiB,GAAA,CAAI;EACN,GAAG,CAACf,GAAG,CAAC,GAINW,WAAA,CAAYU,OAAA,KACdV,WAAA,GAAcA,WAAA,CAAYU,OAAA,IAM5B,eAAA9B,GAAA,CAACD,OAAA;IACCgC,UAAA,EAAYpB,SAAA;IACZL,GAAA;IACAI,MAAA,EAAQU,WAAA;IACRZ,KAAA;IACC,GAAII;EAAA,CACP;AAEJ,CAAC;AAEDd,KAAA,CAAMkC,OAAA,GAAUjC,OAAA,CAAQiC,OAAA;AACxBlC,KAAA,CAAMmC,kBAAA,GAAqBlC,OAAA,CAAQkC,kBAAA;AACnCnC,KAAA,CAAMoC,QAAA,GAAWnC,OAAA,CAAQmC,QAAA;AACzBpC,KAAA,CAAMqC,oBAAA,GAAuBpC,OAAA,CAAQoC,oBAAA;AACrCrC,KAAA,CAAMsC,aAAA,GAAgBrC,OAAA,CAAQqC,aAAA;AAC9BtC,KAAA,CAAMuC,UAAA,GAAatC,OAAA,CAAQsC,UAAA","ignoreList":[]}
+{"version":3,"names":["View","styled","jsx","StyledImage","name","tag","Image","styleable","inProps","ref","blurRadius","capInsets","defaultSource","fadeDuration","loadingIndicatorSource","onLoadEnd","onPartialLoad","progressiveRenderingEnabled","resizeMethod","tintColor","rest","staticConfig","memo","func","getSize","getSizeWithHeaders","prefetch","prefetchWithMetadata","abortPrefetch","queryCache"],"sources":["../../src/Image.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,IAAA,EAAMC,MAAA,QAAc;AAwBlB,SAAAC,GAAA;AArBX,MAAMC,WAAA,GAAcF,MAAA,CAAOD,IAAA,EAAM;IAC/BI,IAAA,EAAM;IACNC,GAAA,EAAK;EACP,CAAC;EAEYC,KAAA,GAAQH,WAAA,CAAYI,SAAA,CAC/B,CAACC,OAAA,EAASC,GAAA,KAAQ;IAChB,MAAM;MAAA;MAEJC,UAAA;MACAC,SAAA;MACAC,aAAA;MACAC,YAAA;MACAC,sBAAA;MACAC,SAAA;MACAC,aAAA;MACAC,2BAAA;MACAC,YAAA;MACAC,SAAA;MACA,GAAGC;IACL,IAAIZ,OAAA;IACJ,OAAO,eAAAN,GAAA,CAACC,WAAA;MAAYM,GAAA;MAAW,GAAGW;IAAA,CAAM;EAC1C,GACA;IACEC,YAAA,EAAc;MACZC,IAAA,EAAM;IACR;EACF,CACF;EAEMC,IAAA,GAAQA,CAAA,KAAM,CAAC;AAErBjB,KAAA,CAAMkB,OAAA,GAAUD,IAAA;AAChBjB,KAAA,CAAMmB,kBAAA,GAAqBF,IAAA;AAC3BjB,KAAA,CAAMoB,QAAA,GAAWH,IAAA;AACjBjB,KAAA,CAAMqB,oBAAA,GAAuBJ,IAAA;AAC7BjB,KAAA,CAAMsB,aAAA,GAAgBL,IAAA;AACtBjB,KAAA,CAAMuB,UAAA,GAAaN,IAAA","ignoreList":[]}