@tamagui/image 1.13.0 → 1.13.1

package/dist/cjs/Image.js

@@ -40,12 +40,14 @@ const Image = StyledImage.extractable(
     const props = (0, import_core.useMediaPropsActive)(inProps);
     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.`
-          );
+      if (typeof src === "string") {
+        if (typeof props.width === "string" && props.width[0] !== "$" || typeof props.height === "string" && props.height[0] !== "$") {
+          if (!hasWarned) {
+            hasWarned = true;
+            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.`
+            );
+          }
         }
       }
     }

package/dist/cjs/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "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;",
+  "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 (typeof src === 'string') {\n        if (\n          (typeof props.width === 'string' && props.width[0] !== '$') ||\n          (typeof props.height === 'string' && props.height[0] !== '$')\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 you must define the \"source\" prop with width, height, and uri.`\n            )\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;AAiFW;AAjFX,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,UAAI,OAAO,QAAQ,UAAU;AAC3B,YACG,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,WAAW,YAAY,MAAM,OAAO,CAAC,MAAM,KACzD;AACA,cAAI,CAAC,WAAW;AACd,wBAAY;AACZ,oBAAQ;AAAA,cACN;AAAA,YACF;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

@@ -22,12 +22,14 @@ const Image = StyledImage.extractable(
     const props = useMediaPropsActive(inProps);
     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.`
-          );
+      if (typeof src === "string") {
+        if (typeof props.width === "string" && props.width[0] !== "$" || typeof props.height === "string" && props.height[0] !== "$") {
+          if (!hasWarned) {
+            hasWarned = true;
+            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.`
+            );
+          }
         }
       }
     }

package/dist/esm/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "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;",
+  "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 (typeof src === 'string') {\n        if (\n          (typeof props.width === 'string' && props.width[0] !== '$') ||\n          (typeof props.height === 'string' && props.height[0] !== '$')\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 you must define the \"source\" prop with width, height, and uri.`\n            )\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": "AAiFW;AAjFX;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,UAAI,OAAO,QAAQ,UAAU;AAC3B,YACG,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,WAAW,YAAY,MAAM,OAAO,CAAC,MAAM,KACzD;AACA,cAAI,CAAC,WAAW;AACd,wBAAY;AACZ,oBAAQ;AAAA,cACN;AAAA,YACF;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

@@ -22,12 +22,14 @@ const Image = StyledImage.extractable(
     const props = useMediaPropsActive(inProps);
     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.`
-          );
+      if (typeof src === "string") {
+        if (typeof props.width === "string" && props.width[0] !== "$" || typeof props.height === "string" && props.height[0] !== "$") {
+          if (!hasWarned) {
+            hasWarned = true;
+            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.`
+            );
+          }
         }
       }
     }

package/dist/esm/Image.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "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;",
+  "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 (typeof src === 'string') {\n        if (\n          (typeof props.width === 'string' && props.width[0] !== '$') ||\n          (typeof props.height === 'string' && props.height[0] !== '$')\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 you must define the \"source\" prop with width, height, and uri.`\n            )\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": "AAiFW;AAjFX;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,UAAI,OAAO,QAAQ,UAAU;AAC3B,YACG,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,WAAW,YAAY,MAAM,OAAO,CAAC,MAAM,KACzD;AACA,cAAI,CAAC,WAAW;AACd,wBAAY;AACZ,oBAAQ;AAAA,cACN;AAAA,YACF;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

@@ -21,12 +21,14 @@ const Image = StyledImage.extractable(
     const props = useMediaPropsActive(inProps);
     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.`
-          );
+      if (typeof src === "string") {
+        if (typeof props.width === "string" && props.width[0] !== "$" || typeof props.height === "string" && props.height[0] !== "$") {
+          if (!hasWarned) {
+            hasWarned = true;
+            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.`
+            );
+          }
         }
       }
     }

package/dist/jsx/Image.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "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;",
+  "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 (typeof src === 'string') {\n        if (\n          (typeof props.width === 'string' && props.width[0] !== '$') ||\n          (typeof props.height === 'string' && props.height[0] !== '$')\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 you must define the \"source\" prop with width, height, and uri.`\n            )\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,UAAI,OAAO,QAAQ,UAAU;AAC3B,YACG,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,WAAW,YAAY,MAAM,OAAO,CAAC,MAAM,KACzD;AACA,cAAI,CAAC,WAAW;AACd,wBAAY;AACZ,oBAAQ;AAAA,cACN;AAAA,YACF;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

@@ -21,12 +21,14 @@ const Image = StyledImage.extractable(
     const props = useMediaPropsActive(inProps);
     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.`
-          );
+      if (typeof src === "string") {
+        if (typeof props.width === "string" && props.width[0] !== "$" || typeof props.height === "string" && props.height[0] !== "$") {
+          if (!hasWarned) {
+            hasWarned = true;
+            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.`
+            );
+          }
         }
       }
     }

package/dist/jsx/Image.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Image.tsx"],
-  "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;",
+  "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 (typeof src === 'string') {\n        if (\n          (typeof props.width === 'string' && props.width[0] !== '$') ||\n          (typeof props.height === 'string' && props.height[0] !== '$')\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 you must define the \"source\" prop with width, height, and uri.`\n            )\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,UAAI,OAAO,QAAQ,UAAU;AAC3B,YACG,OAAO,MAAM,UAAU,YAAY,MAAM,MAAM,CAAC,MAAM,OACtD,OAAO,MAAM,WAAW,YAAY,MAAM,OAAO,CAAC,MAAM,KACzD;AACA,cAAI,CAAC,WAAW;AACd,wBAAY;AACZ,oBAAQ;AAAA,cACN;AAAA,YACF;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.13.0",
+  "version": "1.13.1",
   "sideEffects": [
     "*.css"
   ],
@@ -23,14 +23,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "1.13.0"
+    "@tamagui/core": "1.13.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.13.0",
+    "@tamagui/build": "1.13.1",
     "react": "^18.2.0",
     "react-native": "^0.71.4"
   },

package/src/Image.tsx

@@ -58,15 +58,17 @@ export const Image = StyledImage.extractable(
     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.`
-          )
+      if (typeof src === 'string') {
+        if (
+          (typeof props.width === 'string' && props.width[0] !== '$') ||
+          (typeof props.height === 'string' && props.height[0] !== '$')
+        ) {
+          if (!hasWarned) {
+            hasWarned = true
+            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.`
+            )
+          }
         }
       }
     }

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,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"}
+{"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,WA6BG,CAAA"}