@hanzogui/image 2.0.0-rc.41-hanzoai.1

package/dist/jsx/v1/Image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","isWeb","styled","usePropsAndStyle","Image","RNImage","jsx","StyledImage","name","hasWarned","styleable","inProps","ref","props","style","src","source","objectFit","rest","process","env","NODE_ENV","width","height","console","warn","finalSource","uri","TAMAGUI_IMAGE_CHECK_ERROR","useEffect","run","fetch","then","res","text","err","error","resizeMode","getSize","getSizeWithHeaders","prefetch","prefetchWithMetadata","abortPrefetch","queryCache"],"sources":["../../../src/v1/Image.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,KAAA,QAAa;AAQtB,SAASC,MAAA,EAAQC,gBAAA,QAAwB;AAEzC,SAASC,KAAA,IAASC,OAAA,QAAe;AAqH7B,SAAAC,GAAA;AAnHJ,MAAMC,WAAA,GAAcL,MAAA,CAAOG,OAAA,EAAS;EAAAG,IAAA;AAAA;AAAA,IAClCC,SAAM;AACR,MAACL,KAAA,GAAAG,WAAA,CAAAG,SAAA,EAAAC,OAAA,EAAAC,GAAA;EAmCD,MAAI,CAAAC,KAAA,EAAAC,KAAY,IAAAX,gBAAA,CAAAQ,OAAA;EAMT,MAAM;IAAAI,GAAA;IAAQC,MAAA;IAAAC,SAAY;IAAA,GAAsBC;EAAC,IAAAL,KAAS;EAC/D,IAAAM,OAAO,CAAAC,GAAO,CAAAC,QAAS,kBAAiB;IACxC,WAAQN,GAAK,aAAQ;MAErB,IAAI,OAAQF,KAAI,CAAAS,KAAA,aAAa,IAAAT,KAAe,CAAAS,KAAA,sBAAAT,KAAA,CAAAU,MAAA,iBAAAV,KAAA,CAAAU,MAAA;QAC1C,IAAI,CAAAd,SAAO;UACTA,SACG,GAAO;UAGRe,OAAI,CAACC,IAAA,6IAAW;QACd;MACA;IAAQ;EACN;EACF,IAAAC,WACF,UAAAX,GAAA;IAAAY,GAAA,EACFZ,GAAA;IAAA,IACFd,KAAA;MACFqB,KAAA,EAAAT,KAAA,CAAAS,KAAA,IAAAR,KAAA,EAAAQ,KAAA;MAEAC,MAAI,EAAAV,KAAA,CAAAU,MACF,IAAOT,KAAA,EAAAS;IACH;EACO,IACLP,MAAI,IAAAD,GAAS;EAAA,IAAAW,WACJ,IAAM,OAAAA,WAAgB;IAAA,IAC7BP,OAAA,CAAQC,GAAA,CAAAC,QAAM,KAAU,aAAO,IAAAF,OAAA,CAAAC,GAAA,CAAAQ,yBAAA,EAAA5B,KAAA,CAAA6B,SAAA;MAAA,eACjCC,IAAA;QACF,IACC,OAAAf,GAAU;UAEjB,MAAIgB,KAAA,CAAAhB,GAAA,CAAe,CAAAiB,IAAA,CAAOC,GAAA,IAAAA,GAAA,CAAAC,IAAgB;QACxC,SAAIC,GAAQ;UAEVX,OAAK,CAAAY,KAAM,yBAAsBrB,GAAA;YAAAF;UAAA;QAC/B;MACE;MACAiB,GAAA;IAEE,IAAAf,GAAA;IAEA,IAAAW,WAAA,CAAM,YAAWA,WAAO,GAAAA,WAAA;EAAA;EAC1B,OACF,eAAApB,GAAA,CAAAD,OAAA;IAAAgC,UACF,EAAApB,SAAA;IAAAL,GACF;IAEAI,MAAI,EAAAU,WAAY;IAEdZ,KAAA;IACE,GAAAI;EACE;AACE;AACEd,KAAA,CAAAkC,OAAA,GAAAjC,OAAM,CAAAiC,OAAW;AAAwBlC,KAAA,CAAAmC,kBAClC,GAAKlC,OAAA,CAAAkC,kBAAA;AACZnC,KAAA,CAAAoC,QAAA,GAAAnC,OAAQ,CAAAmC,QAAM;AAAwCpC,KAAA,CAAAqC,oBACxD,GAAApC,OAAA,CAAAoC,oBAAA;AAAArC,KAAA,CAAAsC,aACF,GAAArC,OAAA,CAAAqC,aAAA;AAAAtC,KAAA,CAAAuC,UACF,GAAAtC,OAAA,CAAAsC,UAAA;AAEA,SAAAvC,KAAI","ignoreList":[]}

package/dist/jsx/v1/Image.native.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Image_exports = {};
+__export(Image_exports, {
+  Image: () => Image
+});
+module.exports = __toCommonJS(Image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"), 1);
+var import_constants = require("@hanzogui/constants");
+var import_web = require("@hanzogui/web");
+var import_react_native = require("react-native");
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var StyledImage = (0, import_web.styled)(import_react_native.Image, {
+  name: "Image"
+});
+var hasWarned = false;
+var Image = StyledImage.styleable(function (inProps, ref) {
+  var [props, style] = (0, import_web.usePropsAndStyle)(inProps);
+  var {
+    src,
+    source,
+    objectFit,
+    ...rest
+  } = props;
+  if (process.env.NODE_ENV === "development") {
+    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.`);
+        }
+      }
+    }
+  }
+  var finalSource = typeof src === "string" ? {
+    uri: src,
+    ...(import_constants.isWeb && {
+      width: props.width || (style === null || style === void 0 ? void 0 : style.width),
+      height: props.height || (style === null || style === void 0 ? void 0 : style.height)
+    })
+  } : source !== null && source !== void 0 ? source : src;
+  if (finalSource && (typeof finalSource === "undefined" ? "undefined" : _type_of(finalSource)) === "object") {
+    if (!Array.isArray(finalSource)) {
+      if (typeof finalSource.uri === "number") {
+        finalSource = finalSource.uri;
+        if (source && (typeof source === "undefined" ? "undefined" : _type_of(source)) === "object" && !Array.isArray(source)) {
+          var _style, _style1;
+          var _width;
+          (_width = (_style = style).width) !== null && _width !== void 0 || (_style.width = source.width);
+          var _height;
+          (_height = (_style1 = style).height) !== null && _height !== void 0 || (_style1.height = source.height);
+        }
+      }
+    }
+    if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_IMAGE_CHECK_ERROR) import_react.default.useEffect(function () {
+      async function run() {
+        if (typeof src === "string") try {
+          await fetch(src).then(function (res) {
+            return res.text();
+          });
+        } catch (err) {
+          console.error(`Error loading image: ${src}`, {
+            props
+          });
+        }
+      }
+      run();
+    }, [src]);
+    if (finalSource["default"]) finalSource = finalSource["default"];
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Image, {
+    resizeMode: objectFit,
+    ref,
+    source: finalSource,
+    style,
+    ...rest
+  });
+});
+Image.getSize = import_react_native.Image.getSize;
+Image.getSizeWithHeaders = import_react_native.Image.getSizeWithHeaders;
+Image.prefetch = import_react_native.Image.prefetch;
+Image.prefetchWithMetadata = import_react_native.Image.prefetchWithMetadata;
+Image.abortPrefetch = import_react_native.Image.abortPrefetch;
+Image.queryCache = import_react_native.Image.queryCache;
+//# sourceMappingURL=Image.native.js.map

package/dist/jsx/v1/Image.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","Image_exports","Image","module","exports","import_jsx_runtime","require","import_react","import_constants","import_web","import_react_native","_type_of","obj","Symbol","constructor","StyledImage","styled","hasWarned","styleable","inProps","ref","props","style","usePropsAndStyle","src","source","objectFit","rest","process","env","NODE_ENV","width","height","console","warn","finalSource","uri","isWeb","Array","isArray","_style","_style1","_width","_height"],"sources":["../../../src/v1/Image.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/v1/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Image.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/v1/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/v1/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/v1/index.native.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var v1_exports = {};
+module.exports = __toCommonJS(v1_exports);
+__reExport(v1_exports, require("./Image.native.js"), module.exports);
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/v1/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/v1/index.ts"],"sourcesContent":[null],"mappings":"AAAA","ignoreList":[]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@hanzogui/image",
+  "version": "2.0.0-rc.41-hanzoai.1",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/constants": "2.0.0-rc.41-hanzoai.1",
+    "@hanzogui/core": "2.0.0-rc.41-hanzoai.1",
+    "@hanzogui/web": "2.0.0-rc.41-hanzoai.1"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.41-hanzoai.1",
+    "react": ">=19",
+    "react-native": "0.83.2"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-native": "*"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/Image.native.tsx

@@ -0,0 +1,6 @@
+import { Image as RNImage } from 'react-native'
+import { createImage } from './createImage'
+
+export const Image = createImage({
+  Component: RNImage,
+})

package/src/Image.tsx

@@ -0,0 +1,41 @@
+import { View, styled } from '@hanzogui/web'
+import type { ImageProps, ImageType } from './types'
+
+const StyledImage = styled(View, {
+  name: 'Image',
+  render: 'img',
+})
+
+export const Image = StyledImage.styleable<ImageProps>(
+  (inProps, ref) => {
+    const {
+      // exclude native only props
+      blurRadius,
+      capInsets,
+      defaultSource,
+      fadeDuration,
+      loadingIndicatorSource,
+      onLoadEnd,
+      onPartialLoad,
+      progressiveRenderingEnabled,
+      resizeMethod,
+      tintColor,
+      ...rest
+    } = inProps
+    return <StyledImage ref={ref} {...rest} />
+  },
+  {
+    staticConfig: {
+      memo: true,
+    },
+  }
+) as unknown as ImageType
+
+const func = (() => {}) as any
+
+Image.getSize = func
+Image.getSizeWithHeaders = func
+Image.prefetch = func
+Image.prefetchWithMetadata = func
+Image.abortPrefetch = func
+Image.queryCache = func

package/src/createImage.tsx

@@ -0,0 +1,245 @@
+import { getTokenValue, styled } from '@hanzogui/web'
+import type { ComponentType } from 'react'
+import type { ImageResizeMode } from 'react-native'
+import type { ImageProps, ImageType } from './types'
+
+type GetProps<T> = T extends ComponentType<infer P> ? P : never
+
+export type CreateImageOptions<C extends ComponentType<any>> = {
+  /**
+   * The underlying image component to use.
+   * Can be React Native Image, expo-image, react-native-fast-image, or any compatible component.
+   */
+  Component: C
+  /**
+   * Map objectFit CSS values to the component's resize mode prop.
+   * Default maps to React Native's resizeMode.
+   */
+  mapObjectFitToResizeMode?: (objectFit: string) => string
+  /**
+   * The prop name used for resize mode.
+   * Default: 'resizeMode' (React Native)
+   * expo-image uses: 'contentFit'
+   */
+  resizeModePropName?: string
+  /**
+   * The prop name used for object position.
+   * Default: undefined (React Native doesn't support it)
+   * expo-image uses: 'contentPosition'
+   */
+  objectPositionPropName?: string
+  /**
+   * Custom source transformation.
+   * Useful for expo-image which has a different source format.
+   */
+  transformSource?: (props: {
+    src?: string | number
+    source?: any
+    width?: any
+    height?: any
+  }) => any
+}
+
+const defaultObjectFitMap = (objectFit: string): ImageResizeMode => {
+  switch (objectFit) {
+    case 'fill':
+      return 'stretch'
+    case 'none':
+      return 'center'
+    case 'scale-down':
+      return 'contain'
+    case 'contain':
+      return 'contain'
+    default:
+      return 'cover'
+  }
+}
+
+const defaultTransformSource = (props: {
+  src?: string | number
+  source?: any
+  width?: any
+  height?: any
+}) => {
+  const { src, source, width, height } = props
+  if (source) return source
+  if (src && typeof src !== 'string') return src
+  return {
+    uri: src,
+    width,
+    height,
+  }
+}
+
+/**
+ * Create a custom Image component with a pluggable underlying implementation.
+ *
+ * @example
+ * Using with expo-image
+ * import { Image as ExpoImage } from 'expo-image'
+ * import { createImage } from '@hanzogui/image'
+ *
+ * export const Image = createImage({
+ *   Component: ExpoImage,
+ *   resizeModePropName: 'contentFit',
+ *   objectPositionPropName: 'contentPosition',
+ * })
+ *
+ * Now you get all expo-image props (transition, placeholder, etc.)
+ * plus Hanzogui's unified API (src, objectFit, objectPosition)
+ * <Image
+ *   src="https://example.com/photo.jpg"
+ *   objectFit="cover"
+ *   transition={300}
+ *   placeholder={blurhash}
+ * />
+ */
+export function createImage<C extends ComponentType<any>>(
+  options: CreateImageOptions<C>
+) {
+  const {
+    Component,
+    mapObjectFitToResizeMode = defaultObjectFitMap,
+    resizeModePropName = 'resizeMode',
+    objectPositionPropName,
+    transformSource = defaultTransformSource,
+  } = options
+
+  // Props that should pass directly to the underlying component without Hanzogui processing
+  const inlinePropsSet = new Set([
+    'source',
+    'placeholder',
+    'transition',
+    'contentFit',
+    'contentPosition',
+    'cachePolicy',
+    'recyclingKey',
+    'allowDownscaling',
+    'autoplay',
+    'blurRadius',
+    'priority',
+    'placeholderContentFit',
+    'responsivePolicy',
+    'onLoadStart',
+    'onProgress',
+    'onLoadEnd',
+  ])
+
+  const StyledImage = styled(
+    Component as ComponentType<any>,
+    {
+      name: 'Image',
+    },
+    {
+      inlineProps: inlinePropsSet,
+    }
+  )
+
+  // Combined props: ImageProps (Hanzogui) + Component's native props
+  type CombinedProps = ImageProps & Omit<GetProps<C>, keyof ImageProps>
+
+  const ImageComponent = StyledImage.styleable<CombinedProps>((incomingProps, ref) => {
+    const props = incomingProps as any
+    const {
+      src,
+      width,
+      height,
+      borderRadius,
+      objectFit,
+      objectPosition,
+      // web only props - filter out on native
+      decoding,
+      elementTiming,
+      fetchpriority,
+      isMap,
+      loading,
+      sizes,
+      useMap,
+      onLoad,
+      onError,
+      ...rest
+    } = props
+
+    const resolvedWidth =
+      typeof width === 'string' && width[0] === '$'
+        ? getTokenValue(width as any, 'size')
+        : width
+    const resolvedHeight =
+      typeof height === 'string' && height[0] === '$'
+        ? getTokenValue(height as any, 'size')
+        : height
+
+    const finalSource = transformSource({
+      src,
+      width: resolvedWidth,
+      height: resolvedHeight,
+    })
+
+    const incomingStyle = Array.isArray(rest.style)
+      ? Object.assign({}, ...rest.style.flat())
+      : rest.style
+
+    const resolvedBorderRadius =
+      typeof borderRadius === 'string' && borderRadius[0] === '$'
+        ? getTokenValue(borderRadius as any, 'radius')
+        : borderRadius
+
+    const finalProps: any = {
+      ...rest,
+      source: finalSource,
+      style: {
+        ...incomingStyle,
+        ...(resolvedBorderRadius !== undefined && { borderRadius: resolvedBorderRadius }),
+        ...(resolvedWidth !== undefined && { width: resolvedWidth }),
+        ...(resolvedHeight !== undefined && { height: resolvedHeight }),
+      },
+    }
+
+    // Set resize mode / content fit
+    if (objectFit) {
+      finalProps[resizeModePropName] = mapObjectFitToResizeMode(objectFit)
+    }
+
+    // Add object position if supported
+    if (objectPositionPropName && objectPosition) {
+      finalProps[objectPositionPropName] = objectPosition
+    }
+
+    // Normalize onLoad event
+    if (onLoad) {
+      finalProps.onLoad = (e: any) => {
+        const source = e?.nativeEvent?.source || e?.source || {}
+        onLoad({
+          target: {
+            naturalHeight: source?.height,
+            naturalWidth: source?.width,
+          },
+          type: 'load',
+        } as any)
+      }
+    }
+
+    // Normalize onError event
+    if (onError) {
+      finalProps.onError = () => {
+        onError({
+          type: 'error',
+        } as any)
+      }
+    }
+
+    // Render the underlying Component directly to ensure all props pass through
+    return <Component ref={ref} {...finalProps} />
+  }) as unknown as ImageType & React.FC<CombinedProps>
+
+  // Add static methods if the component has them
+  const comp = Component as any
+  ImageComponent.getSize = comp.getSize || (() => {})
+  ImageComponent.getSizeWithHeaders = comp.getSizeWithHeaders || (() => {})
+  ImageComponent.prefetch = comp.prefetch || (() => {})
+  ImageComponent.prefetchWithMetadata = comp.prefetchWithMetadata || (() => {})
+  ImageComponent.abortPrefetch = comp.abortPrefetch || (() => {})
+  ImageComponent.queryCache = comp.queryCache || (() => {})
+
+  return ImageComponent
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './Image'
+export * from './createImage'
+export type { ImageProps, ImageType } from './types'

package/src/types.ts

@@ -0,0 +1,54 @@
+import type { ViewProps } from '@hanzogui/web'
+import type {
+  ImageResizeMode,
+  ImageSourcePropType,
+  Image as RNImage,
+  ImageProps as RNImageProps,
+} from 'react-native'
+
+type RNImageType = typeof RNImage
+
+type KeyofViewProps = keyof ViewProps
+
+export type ImageProps = ViewProps &
+  Omit<RNImageProps, KeyofViewProps | 'source' | 'resizeMode' | 'style'> & {
+    /**
+     * The image source URL or require() result.
+     * Preferred over `source` for better web alignment.
+     */
+    src?: string | number
+    /**
+     * @deprecated
+     * use src instead
+     */
+    source?: ImageSourcePropType
+    /**
+     * @deprecated
+     * use objectFit instead
+     */
+    resizeMode?: ImageResizeMode
+    /**
+     * How the image should be resized to fit its container.
+     * Maps to CSS object-fit on web and resizeMode on native.
+     */
+    objectFit?: React.CSSProperties['objectFit']
+    /**
+     * How the image should be positioned within its container.
+     * Maps to CSS object-position on web.
+     * On native, requires expo-image or similar for full support.
+     */
+    objectPosition?: React.CSSProperties['objectPosition']
+  } & Omit<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    'width' | 'height' | KeyofViewProps | 'src'
+  > &
+  Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'width' | 'height' | 'style' | 'src'>
+
+export type ImageType = React.FC<Partial<ImageProps>> & {
+  getSize: RNImageType['getSize']
+  getSizeWithHeaders: RNImageType['getSizeWithHeaders']
+  prefetch: RNImageType['prefetch']
+  prefetchWithMetadata: RNImageType['prefetchWithMetadata']
+  abortPrefetch: RNImageType['abortPrefetch']
+  queryCache: RNImageType['queryCache']
+}