@tamagui/image 1.9.5 → 1.9.7

package/dist/cjs/Image.js

@@ -23,6 +23,7 @@ __export(Image_exports, {
 module.exports = __toCommonJS(Image_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@tamagui/core");
+var import_react = require("react");
 var import_react_native = require("react-native");
 (0, import_core.setupReactNative)({
   Image: import_react_native.Image
@@ -33,12 +34,14 @@ const StyledImage = (0, import_core.styled)(import_react_native.Image, {
   source: { uri: "" },
   zIndex: 1
 });
-const Image = StyledImage.extractable((inProps) => {
-  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, { source, ...rest });
-});
+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 });
+  })
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Image

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 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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\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 source={source} {...(rest as any)} />\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CS;AA/CT,kBAQO;AAEP,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;AAiBM,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,YAAQ,iCAAoB,OAAO;AACzC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,qBAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,SAAO,4CAAC,eAAY,QAAiB,GAAI,MAAc;AACzD,CAAC;",
+  "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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable(\n  forwardRef((inProps, 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)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDW;AAhDX,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;AAiBM,MAAM,QAA8B,YAAY;AAAA,MACrD,yBAAW,CAAC,SAAS,QAAQ;AAC3B,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;",
   "names": ["RNImage"]
 }

package/dist/esm/Image.js

@@ -5,6 +5,7 @@ import {
   styled,
   useMediaPropsActive
 } from "@tamagui/core";
+import { forwardRef } from "react";
 import { Image as RNImage } from "react-native";
 setupReactNative({
   Image: RNImage
@@ -15,12 +16,14 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
-const Image = StyledImage.extractable((inProps) => {
-  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, { source, ...rest });
-});
+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 });
+  })
+);
 export {
   Image
 };

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 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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\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 source={source} {...(rest as any)} />\n})\n"],
-  "mappings": "AA+CS;AA/CT;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,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;AAiBM,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,oBAAoB,OAAO;AACzC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,SAAO,oBAAC,eAAY,QAAiB,GAAI,MAAc;AACzD,CAAC;",
+  "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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable(\n  forwardRef((inProps, 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)\n"],
+  "mappings": "AAgDW;AAhDX;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;AAiBM,MAAM,QAA8B,YAAY;AAAA,EACrD,WAAW,CAAC,SAAS,QAAQ;AAC3B,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;",
   "names": []
 }

package/dist/esm/Image.mjs

@@ -5,6 +5,7 @@ import {
   styled,
   useMediaPropsActive
 } from "@tamagui/core";
+import { forwardRef } from "react";
 import { Image as RNImage } from "react-native";
 setupReactNative({
   Image: RNImage
@@ -15,12 +16,14 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
-const Image = StyledImage.extractable((inProps) => {
-  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, { source, ...rest });
-});
+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 });
+  })
+);
 export {
   Image
 };

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 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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\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 source={source} {...(rest as any)} />\n})\n"],
-  "mappings": "AA+CS;AA/CT;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,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;AAiBM,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,oBAAoB,OAAO;AACzC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,SAAO,oBAAC,eAAY,QAAiB,GAAI,MAAc;AACzD,CAAC;",
+  "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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable(\n  forwardRef((inProps, 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)\n"],
+  "mappings": "AAgDW;AAhDX;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;AAiBM,MAAM,QAA8B,YAAY;AAAA,EACrD,WAAW,CAAC,SAAS,QAAQ;AAC3B,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;",
   "names": []
 }

package/dist/jsx/Image.js

@@ -4,6 +4,7 @@ import {
   styled,
   useMediaPropsActive
 } from "@tamagui/core";
+import { forwardRef } from "react";
 import { Image as RNImage } from "react-native";
 setupReactNative({
   Image: RNImage
@@ -14,12 +15,14 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
-const Image = StyledImage.extractable((inProps) => {
-  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 source={source} {...rest} />;
-});
+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} />;
+  })
+);
 export {
   Image
 };

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 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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\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 source={source} {...(rest as any)} />\n})\n"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,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;AAiBM,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,oBAAoB,OAAO;AACzC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,SAAO,CAAC,YAAY,QAAQ,YAAa,MAAc;AACzD,CAAC;",
+  "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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable(\n  forwardRef((inProps, 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)\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;AAiBM,MAAM,QAA8B,YAAY;AAAA,EACrD,WAAW,CAAC,SAAS,QAAQ;AAC3B,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;",
   "names": []
 }

package/dist/jsx/Image.mjs

@@ -4,6 +4,7 @@ import {
   styled,
   useMediaPropsActive
 } from "@tamagui/core";
+import { forwardRef } from "react";
 import { Image as RNImage } from "react-native";
 setupReactNative({
   Image: RNImage
@@ -14,12 +15,14 @@ const StyledImage = styled(RNImage, {
   source: { uri: "" },
   zIndex: 1
 });
-const Image = StyledImage.extractable((inProps) => {
-  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 source={source} {...rest} />;
-});
+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} />;
+  })
+);
 export {
   Image
 };

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 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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {\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 source={source} {...(rest as any)} />\n})\n"],
-  "mappings": "AAAA;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,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;AAiBM,MAAM,QAA8B,YAAY,YAAY,CAAC,YAAY;AAC9E,QAAM,QAAQ,oBAAoB,OAAO;AACzC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,SACJ,OAAO,QAAQ,WACX,EAAE,KAAK,KAAK,GAAI,SAAS,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO,EAAG,IACvE;AAGN,SAAO,CAAC,YAAY,QAAQ,YAAa,MAAc;AACzD,CAAC;",
+  "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 | string\n  height: number | string\n  src: string | StyledImageProps['source']\n}\n\nexport type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>\n\nexport const Image: React.FC<ImageProps> = StyledImage.extractable(\n  forwardRef((inProps, 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)\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;AAiBM,MAAM,QAA8B,YAAY;AAAA,EACrD,WAAW,CAAC,SAAS,QAAQ;AAC3B,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;",
   "names": []
 }

package/package.json

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

package/src/Image.tsx

@@ -7,7 +7,7 @@ import {
   styled,
   useMediaPropsActive,
 } from '@tamagui/core'
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Image as RNImage } from 'react-native'
 
 setupReactNative({
@@ -36,14 +36,16 @@ type BaseProps = Omit<
 
 export type ImageProps = BaseProps & Omit<StackProps, keyof BaseProps>
 
-export const Image: React.FC<ImageProps> = StyledImage.extractable((inProps) => {
-  const props = useMediaPropsActive(inProps)
-  const { src, ...rest } = props
-  const source =
-    typeof src === 'string'
-      ? { uri: src, ...(isWeb && { width: props.width, height: props.height }) }
-      : src
+export const Image: React.FC<ImageProps> = 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
 
-  // must set defaultSource to allow SSR, default it to the same as src
-  return <StyledImage source={source} {...(rest as any)} />
-})
+    // must set defaultSource to allow SSR, default it to the same as src
+    return <StyledImage ref={ref} source={source} {...(rest as any)} />
+  })
+)

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,KAAK,MAAM,OAAO,CAAA;AAOzB,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,GAAG,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,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,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAUrC,CAAA"}
+{"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;AAOzC,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,GAAG,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,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,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAYtC,CAAA"}