@tamagui/image 1.12.1 → 1.13.0

package/dist/cjs/Image.js

@@ -34,12 +34,23 @@ const StyledImage = (0, import_core.styled)(import_react_native.Image, {
   source: { uri: "" },
   zIndex: 1
 });
+let hasWarned = false;
 const Image = StyledImage.extractable(
   (0, import_react.forwardRef)((inProps, ref) => {
     const props = (0, import_core.useMediaPropsActive)(inProps);
-    const { src, ...rest } = props;
-    const source = typeof src === "string" ? { uri: src, ...import_core.isWeb && { width: props.width, height: props.height } } : src;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledImage, { ref, source, ...rest });
+    const { src, source, ...rest } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (typeof src === "string" && (typeof props.width === "number" || typeof props.height === "number")) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            `React Native expects a numerical width/height. If you want to use a percent use the "source" prop instead.`
+          );
+        }
+      }
+    }
+    const finalSource = typeof src === "string" ? { uri: src, ...import_core.isWeb && { width: props.width, height: props.height } } : source ?? src;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledImage, { ref, source: finalSource, ...rest });
   })
 );
 Image.getSize = import_react_native.Image.getSize;

package/dist/cjs/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  StackProps,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<\n  StyledImageProps,\n  'source' | 'width' | 'height' | 'style' | 'onLayout'\n> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, ...rest } = props\n    const source =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={source} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DW;AA3DX,kBAQO;AACP,mBAAkC;AAClC,0BAAiC;AAAA,IAEjC,8BAAiB;AAAA,EACf,OAAO,oBAAAA;AACT,CAAC;AAED,MAAM,kBAAc,oBAAO,oBAAAA,OAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA4BM,MAAM,QAAQ,YAAY;AAAA,MAC/B,yBAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,YAAQ,iCAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,UAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,qBAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,WAAO,4CAAC,eAAY,KAAU,QAAiB,GAAI,MAAc;AAAA,EACnE,CAAC;AACH;AAEA,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;",
+  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  SizeTokens,\n  StackProps,\n  ThemeValueFallback,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: string | number | SizeTokens | ThemeValueFallback\n  height: string | number | SizeTokens | ThemeValueFallback\n\n  /**\n   * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image\n   */\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nlet hasWarned = false\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, source, ...rest } = props\n\n    if (process.env.NODE_ENV === 'development') {\n      if (\n        typeof src === 'string' &&\n        (typeof props.width === 'number' || typeof props.height === 'number')\n      ) {\n        if (!hasWarned) {\n          hasWarned = true\n          console.warn(\n            `React Native expects a numerical width/height. If you want to use a percent use the \"source\" prop instead.`\n          )\n        }\n      }\n    }\n\n    const finalSource =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : source ?? src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={finalSource} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EW;AA/EX,kBAUO;AACP,mBAAkC;AAClC,0BAAiC;AAAA,IAEjC,8BAAiB;AAAA,EACf,OAAO,oBAAAA;AACT,CAAC;AAED,MAAM,kBAAc,oBAAO,oBAAAA,OAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA6BD,IAAI,YAAY;AAET,MAAM,QAAQ,YAAY;AAAA,MAC/B,yBAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,YAAQ,iCAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,QAAQ,GAAG,KAAK,IAAI;AAEjC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UACE,OAAO,QAAQ,aACd,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,YAAI,CAAC,WAAW;AACd,sBAAY;AACZ,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,cACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,qBAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE,UAAU;AAGhB,WAAO,4CAAC,eAAY,KAAU,QAAQ,aAAc,GAAI,MAAc;AAAA,EACxE,CAAC;AACH;AAEA,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"]
 }

package/dist/esm/Image.js

@@ -16,12 +16,23 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
+let hasWarned = false;
 const Image = StyledImage.extractable(
   forwardRef((inProps, ref) => {
     const props = useMediaPropsActive(inProps);
-    const { src, ...rest } = props;
-    const source = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : src;
-    return /* @__PURE__ */ jsx(StyledImage, { ref, source, ...rest });
+    const { src, source, ...rest } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (typeof src === "string" && (typeof props.width === "number" || typeof props.height === "number")) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            `React Native expects a numerical width/height. If you want to use a percent use the "source" prop instead.`
+          );
+        }
+      }
+    }
+    const finalSource = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : source ?? src;
+    return /* @__PURE__ */ jsx(StyledImage, { ref, source: finalSource, ...rest });
   })
 );
 Image.getSize = RNImage.getSize;

package/dist/esm/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  StackProps,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<\n  StyledImageProps,\n  'source' | 'width' | 'height' | 'style' | 'onLayout'\n> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, ...rest } = props\n    const source =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={source} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
-  "mappings": "AA2DW;AA3DX;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA4BM,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,UAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,WAAO,oBAAC,eAAY,KAAU,QAAiB,GAAI,MAAc;AAAA,EACnE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
+  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  SizeTokens,\n  StackProps,\n  ThemeValueFallback,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: string | number | SizeTokens | ThemeValueFallback\n  height: string | number | SizeTokens | ThemeValueFallback\n\n  /**\n   * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image\n   */\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nlet hasWarned = false\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, source, ...rest } = props\n\n    if (process.env.NODE_ENV === 'development') {\n      if (\n        typeof src === 'string' &&\n        (typeof props.width === 'number' || typeof props.height === 'number')\n      ) {\n        if (!hasWarned) {\n          hasWarned = true\n          console.warn(\n            `React Native expects a numerical width/height. If you want to use a percent use the \"source\" prop instead.`\n          )\n        }\n      }\n    }\n\n    const finalSource =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : source ?? src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={finalSource} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
+  "mappings": "AA+EW;AA/EX;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA6BD,IAAI,YAAY;AAET,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,QAAQ,GAAG,KAAK,IAAI;AAEjC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UACE,OAAO,QAAQ,aACd,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,YAAI,CAAC,WAAW;AACd,sBAAY;AACZ,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,cACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE,UAAU;AAGhB,WAAO,oBAAC,eAAY,KAAU,QAAQ,aAAc,GAAI,MAAc;AAAA,EACxE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
   "names": []
 }

package/dist/esm/Image.mjs

@@ -16,12 +16,23 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
+let hasWarned = false;
 const Image = StyledImage.extractable(
   forwardRef((inProps, ref) => {
     const props = useMediaPropsActive(inProps);
-    const { src, ...rest } = props;
-    const source = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : src;
-    return /* @__PURE__ */ jsx(StyledImage, { ref, source, ...rest });
+    const { src, source, ...rest } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (typeof src === "string" && (typeof props.width === "number" || typeof props.height === "number")) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            `React Native expects a numerical width/height. If you want to use a percent use the "source" prop instead.`
+          );
+        }
+      }
+    }
+    const finalSource = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : source ?? src;
+    return /* @__PURE__ */ jsx(StyledImage, { ref, source: finalSource, ...rest });
   })
 );
 Image.getSize = RNImage.getSize;

package/dist/esm/Image.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  StackProps,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<\n  StyledImageProps,\n  'source' | 'width' | 'height' | 'style' | 'onLayout'\n> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, ...rest } = props\n    const source =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={source} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
-  "mappings": "AA2DW;AA3DX;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA4BM,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,UAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,WAAO,oBAAC,eAAY,KAAU,QAAiB,GAAI,MAAc;AAAA,EACnE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
+  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  SizeTokens,\n  StackProps,\n  ThemeValueFallback,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: string | number | SizeTokens | ThemeValueFallback\n  height: string | number | SizeTokens | ThemeValueFallback\n\n  /**\n   * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image\n   */\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nlet hasWarned = false\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, source, ...rest } = props\n\n    if (process.env.NODE_ENV === 'development') {\n      if (\n        typeof src === 'string' &&\n        (typeof props.width === 'number' || typeof props.height === 'number')\n      ) {\n        if (!hasWarned) {\n          hasWarned = true\n          console.warn(\n            `React Native expects a numerical width/height. If you want to use a percent use the \"source\" prop instead.`\n          )\n        }\n      }\n    }\n\n    const finalSource =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : source ?? src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={finalSource} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
+  "mappings": "AA+EW;AA/EX;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA6BD,IAAI,YAAY;AAET,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,QAAQ,GAAG,KAAK,IAAI;AAEjC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UACE,OAAO,QAAQ,aACd,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,YAAI,CAAC,WAAW;AACd,sBAAY;AACZ,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,cACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE,UAAU;AAGhB,WAAO,oBAAC,eAAY,KAAU,QAAQ,aAAc,GAAI,MAAc;AAAA,EACxE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
   "names": []
 }

package/dist/jsx/Image.js

@@ -15,12 +15,23 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
+let hasWarned = false;
 const Image = StyledImage.extractable(
   forwardRef((inProps, ref) => {
     const props = useMediaPropsActive(inProps);
-    const { src, ...rest } = props;
-    const source = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : src;
-    return <StyledImage ref={ref} source={source} {...rest} />;
+    const { src, source, ...rest } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (typeof src === "string" && (typeof props.width === "number" || typeof props.height === "number")) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            `React Native expects a numerical width/height. If you want to use a percent use the "source" prop instead.`
+          );
+        }
+      }
+    }
+    const finalSource = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : source ?? src;
+    return <StyledImage ref={ref} source={finalSource} {...rest} />;
   })
 );
 Image.getSize = RNImage.getSize;

package/dist/jsx/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  StackProps,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<\n  StyledImageProps,\n  'source' | 'width' | 'height' | 'style' | 'onLayout'\n> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, ...rest } = props\n    const source =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={source} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA4BM,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,UAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,WAAO,CAAC,YAAY,KAAK,KAAK,QAAQ,YAAa,MAAc;AAAA,EACnE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
+  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  SizeTokens,\n  StackProps,\n  ThemeValueFallback,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: string | number | SizeTokens | ThemeValueFallback\n  height: string | number | SizeTokens | ThemeValueFallback\n\n  /**\n   * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image\n   */\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nlet hasWarned = false\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, source, ...rest } = props\n\n    if (process.env.NODE_ENV === 'development') {\n      if (\n        typeof src === 'string' &&\n        (typeof props.width === 'number' || typeof props.height === 'number')\n      ) {\n        if (!hasWarned) {\n          hasWarned = true\n          console.warn(\n            `React Native expects a numerical width/height. If you want to use a percent use the \"source\" prop instead.`\n          )\n        }\n      }\n    }\n\n    const finalSource =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : source ?? src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={finalSource} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
+  "mappings": "AAAA;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA6BD,IAAI,YAAY;AAET,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,QAAQ,GAAG,KAAK,IAAI;AAEjC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UACE,OAAO,QAAQ,aACd,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,YAAI,CAAC,WAAW;AACd,sBAAY;AACZ,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,cACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE,UAAU;AAGhB,WAAO,CAAC,YAAY,KAAK,KAAK,QAAQ,iBAAkB,MAAc;AAAA,EACxE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
   "names": []
 }

package/dist/jsx/Image.mjs

@@ -15,12 +15,23 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
+let hasWarned = false;
 const Image = StyledImage.extractable(
   forwardRef((inProps, ref) => {
     const props = useMediaPropsActive(inProps);
-    const { src, ...rest } = props;
-    const source = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : src;
-    return <StyledImage ref={ref} source={source} {...rest} />;
+    const { src, source, ...rest } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (typeof src === "string" && (typeof props.width === "number" || typeof props.height === "number")) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            `React Native expects a numerical width/height. If you want to use a percent use the "source" prop instead.`
+          );
+        }
+      }
+    }
+    const finalSource = typeof src === "string" ? { uri: src, ...isWeb && { width: props.width, height: props.height } } : source ?? src;
+    return <StyledImage ref={ref} source={finalSource} {...rest} />;
   })
 );
 Image.getSize = RNImage.getSize;

package/dist/jsx/Image.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  StackProps,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<\n  StyledImageProps,\n  'source' | 'width' | 'height' | 'style' | 'onLayout'\n> & {\n  width: number\n  height: number\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, ...rest } = props\n    const source =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={source} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA4BM,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,UAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,WAAO,CAAC,YAAY,KAAK,KAAK,QAAQ,YAAa,MAAc;AAAA,EACnE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
+  "sourcesContent": ["import {\n  GetProps,\n  RadiusTokens,\n  SizeTokens,\n  StackProps,\n  ThemeValueFallback,\n  isWeb,\n  setupReactNative,\n  styled,\n  useMediaPropsActive,\n} from '@tamagui/core'\nimport React, { forwardRef } from 'react'\nimport { Image as RNImage } from 'react-native'\n\nsetupReactNative({\n  Image: RNImage,\n})\n\nconst StyledImage = styled(RNImage, {\n  name: 'Image',\n  position: 'relative',\n  source: { uri: '' },\n  zIndex: 1,\n})\n\ntype StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {\n  borderRadius?: RadiusTokens\n}\n\ntype BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {\n  width: string | number | SizeTokens | ThemeValueFallback\n  height: string | number | SizeTokens | ThemeValueFallback\n\n  /**\n   * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image\n   */\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\ntype RNImageType = typeof RNImage\n\ntype ImageType = React.FC<ImageProps> & {\n  getSize: RNImageType['getSize']\n  getSizeWithHeaders: RNImageType['getSizeWithHeaders']\n  prefetch: RNImageType['prefetch']\n  prefetchWithMetadata: RNImageType['prefetchWithMetadata']\n  abortPrefetch: RNImageType['abortPrefetch']\n  queryCache: RNImageType['queryCache']\n}\n\nlet hasWarned = false\n\nexport const Image = StyledImage.extractable(\n  forwardRef((inProps: ImageProps, ref) => {\n    const props = useMediaPropsActive(inProps)\n    const { src, source, ...rest } = props\n\n    if (process.env.NODE_ENV === 'development') {\n      if (\n        typeof src === 'string' &&\n        (typeof props.width === 'number' || typeof props.height === 'number')\n      ) {\n        if (!hasWarned) {\n          hasWarned = true\n          console.warn(\n            `React Native expects a numerical width/height. If you want to use a percent use the \"source\" prop instead.`\n          )\n        }\n      }\n    }\n\n    const finalSource =\n      typeof src === 'string'\n        ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }\n        : source ?? src\n\n    // must set defaultSource to allow SSR, default it to the same as src\n    return <StyledImage ref={ref} source={finalSource} {...(rest as any)} />\n  })\n) as any as ImageType\n\nImage.getSize = RNImage.getSize\nImage.getSizeWithHeaders = RNImage.getSizeWithHeaders\nImage.prefetch = RNImage.prefetch\nImage.prefetchWithMetadata = RNImage.prefetchWithMetadata\nImage.abortPrefetch = RNImage.abortPrefetch\nImage.queryCache = RNImage.queryCache\n"],
+  "mappings": "AAAA;AAAA,EAME;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,kBAAkB;AAClC,SAAS,SAAS,eAAe;AAEjC,iBAAiB;AAAA,EACf,OAAO;AACT,CAAC;AAED,MAAM,cAAc,OAAO,SAAS;AAAA,EAClC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,EAAE,KAAK,GAAG;AAAA,EAClB,QAAQ;AACV,CAAC;AA6BD,IAAI,YAAY;AAET,MAAM,QAAQ,YAAY;AAAA,EAC/B,WAAW,CAAC,SAAqB,QAAQ;AACvC,UAAM,QAAQ,oBAAoB,OAAO;AACzC,UAAM,EAAE,KAAK,QAAQ,GAAG,KAAK,IAAI;AAEjC,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UACE,OAAO,QAAQ,aACd,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,YAAI,CAAC,WAAW;AACd,sBAAY;AACZ,kBAAQ;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,UAAM,cACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE,UAAU;AAGhB,WAAO,CAAC,YAAY,KAAK,KAAK,QAAQ,iBAAkB,MAAc;AAAA,EACxE,CAAC;AACH;AAEA,MAAM,UAAU,QAAQ;AACxB,MAAM,qBAAqB,QAAQ;AACnC,MAAM,WAAW,QAAQ;AACzB,MAAM,uBAAuB,QAAQ;AACrC,MAAM,gBAAgB,QAAQ;AAC9B,MAAM,aAAa,QAAQ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/image",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "sideEffects": [
     "*.css"
   ],
@@ -23,14 +23,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "1.12.1"
+    "@tamagui/core": "1.13.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.12.1",
+    "@tamagui/build": "1.13.0",
     "react": "^18.2.0",
     "react-native": "^0.71.4"
   },

package/src/Image.tsx

@@ -1,7 +1,9 @@
 import {
   GetProps,
   RadiusTokens,
+  SizeTokens,
   StackProps,
+  ThemeValueFallback,
   isWeb,
   setupReactNative,
   styled,
@@ -25,12 +27,13 @@ type StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {
   borderRadius?: RadiusTokens
 }
 
-type BaseProps = Omit<
-  StyledImageProps,
-  'source' | 'width' | 'height' | 'style' | 'onLayout'
-> & {
-  width: number
-  height: number
+type BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {
+  width: string | number | SizeTokens | ThemeValueFallback
+  height: string | number | SizeTokens | ThemeValueFallback
+
+  /**
+   * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image
+   */
   src: string | StyledImageProps['source']
 }
 
@@ -47,17 +50,34 @@ type ImageType = React.FC<ImageProps> & {
   queryCache: RNImageType['queryCache']
 }
 
+let hasWarned = false
+
 export const Image = StyledImage.extractable(
   forwardRef((inProps: ImageProps, ref) => {
     const props = useMediaPropsActive(inProps)
-    const { src, ...rest } = props
-    const source =
+    const { src, source, ...rest } = props
+
+    if (process.env.NODE_ENV === 'development') {
+      if (
+        typeof src === 'string' &&
+        (typeof props.width === 'number' || typeof props.height === 'number')
+      ) {
+        if (!hasWarned) {
+          hasWarned = true
+          console.warn(
+            `React Native expects a numerical width/height. If you want to use a percent use the "source" prop instead.`
+          )
+        }
+      }
+    }
+
+    const finalSource =
       typeof src === 'string'
         ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }
-        : src
+        : source ?? src
 
     // must set defaultSource to allow SSR, default it to the same as src
-    return <StyledImage ref={ref} source={source} {...(rest as any)} />
+    return <StyledImage ref={ref} source={finalSource} {...(rest as any)} />
   })
 ) as any as ImageType
 

package/types/Image.d.ts

@@ -1,4 +1,4 @@
-import { GetProps, RadiusTokens, StackProps } from '@tamagui/core';
+import { GetProps, RadiusTokens, SizeTokens, StackProps, ThemeValueFallback } from '@tamagui/core';
 import React from 'react';
 import { Image as RNImage } from 'react-native';
 declare const StyledImage: import("@tamagui/core").TamaguiComponent<(import("react-native").ImageProps & Omit<StackProps, keyof import("react-native").ImageProps>) | (import("react-native").ImageProps & Omit<StackProps, keyof import("react-native").ImageProps> & Omit<{}, string | number> & {
@@ -13,9 +13,12 @@ declare const StyledImage: import("@tamagui/core").TamaguiComponent<(import("rea
 type StyledImageProps = Omit<GetProps<typeof StyledImage>, 'borderRadius'> & {
     borderRadius?: RadiusTokens;
 };
-type BaseProps = Omit<StyledImageProps, 'source' | 'width' | 'height' | 'style' | 'onLayout'> & {
-    width: number;
-    height: number;
+type BaseProps = Omit<StyledImageProps, 'width' | 'height' | 'style' | 'onLayout'> & {
+    width: string | number | SizeTokens | ThemeValueFallback;
+    height: string | number | SizeTokens | ThemeValueFallback;
+    /**
+     * @deprecated use `source` instead to disambiguate width/height style from width/height of the actual image
+     */
     src: string | StyledImageProps['source'];
 };
 export type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>;

package/types/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,UAAU,EAKX,MAAM,eAAe,CAAA;AACtB,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AAM/C,QAAA,MAAM,WAAW;;;;;;;;EAKf,CAAA;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,WAAW,CAAC,EAAE,cAAc,CAAC,GAAG;IAC3E,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED,KAAK,SAAS,GAAG,IAAI,CACnB,gBAAgB,EAChB,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CACrD,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,SAAS,CAAC,CAAA;AAEtE,KAAK,WAAW,GAAG,OAAO,OAAO,CAAA;AAEjC,KAAK,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACtC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC/B,kBAAkB,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAA;IACrD,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,oBAAoB,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAA;IACzD,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,CAAA;IAC3C,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,KAAK,WAYG,CAAA"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EACV,kBAAkB,EAKnB,MAAM,eAAe,CAAA;AACtB,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AAM/C,QAAA,MAAM,WAAW;;;;;;;;EAKf,CAAA;AAEF,KAAK,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,WAAW,CAAC,EAAE,cAAc,CAAC,GAAG;IAC3E,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACnF,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,CAAA;IACxD,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,kBAAkB,CAAA;IAEzD;;OAEG;IACH,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAAA;CACzC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,MAAM,SAAS,CAAC,CAAA;AAEtE,KAAK,WAAW,GAAG,OAAO,OAAO,CAAA;AAEjC,KAAK,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACtC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC/B,kBAAkB,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAA;IACrD,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,oBAAoB,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAA;IACzD,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,CAAA;IAC3C,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAA;CACtC,CAAA;AAID,eAAO,MAAM,KAAK,WA2BG,CAAA"}