diff --git a/packages/react-native-web-docs/src/pages/docs/components/image.md b/packages/react-native-web-docs/src/pages/docs/components/image.md index 7c4137163..427b95952 100644 --- a/packages/react-native-web-docs/src/pages/docs/components/image.md +++ b/packages/react-native-web-docs/src/pages/docs/components/image.md @@ -97,6 +97,10 @@ Prefetches a remote image for later use by downloading it. Once an image has bee Performs cache interrogation. Returns a mapping from URL to cache status: "disk", "memory", "disk/memory". If a requested URL is not in the mapping, it means it's not in the cache. {% endcall %} +{% call macro.prop('resolveAssetSource', '?(source: Source) => { uri: string, width?: number, height?: number }') %} +Resolves an asset reference into an object which has the properties uri, width, and height. +{% endcall %} + --- ## Examples diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index f99faa7ec..f8f80ae49 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -10,7 +10,7 @@ 'use client'; -import type { ImageProps } from './types'; +import type { ImageProps, Source } from './types'; import * as React from 'react'; import createElement from '../createElement'; @@ -166,6 +166,11 @@ interface ImageStatics { success: (width: number, height: number) => void, failure: () => void ) => void; + resolveAssetSource: (source: Source) => { + uri: string, + width?: number, + height?: number + }; prefetch: (uri: string) => Promise; queryCache: ( uris: Array @@ -363,6 +368,23 @@ const ImageWithStatics = (Image: React.AbstractComponent< > & ImageStatics); +ImageWithStatics.resolveAssetSource = function resolveAssetSource(source): { + uri: string, + width?: number, + height?: number +} { + const uri = resolveAssetUri(source) || ''; + const dimensions = resolveAssetDimensions(source) || {}; + let width, height; + if (typeof dimensions.width === 'number') { + width = dimensions.width; + } + if (typeof dimensions.height === 'number') { + height = dimensions.height; + } + return { uri, width, height }; +}; + ImageWithStatics.getSize = function (uri, success, failure) { ImageLoader.getSize(uri, success, failure); };