1import React from 'react'; 2import { View } from 'react-native-web'; 3import AnimationManager from './web/AnimationManager'; 4import ImageWrapper from './web/ImageWrapper'; 5import loadStyle from './web/imageStyles'; 6import useSourceSelection from './web/useSourceSelection'; 7loadStyle(); 8export const ExpoImageModule = { 9 prefetch(urls) { 10 const urlsArray = Array.isArray(urls) ? urls : [urls]; 11 urlsArray.forEach((url) => { 12 const img = new Image(); 13 img.src = url; 14 }); 15 }, 16 async clearMemoryCache() { 17 return false; 18 }, 19 async clearDiskCache() { 20 return false; 21 }, 22}; 23function onLoadAdapter(onLoad) { 24 return (event) => { 25 const target = event.target; 26 onLoad?.({ 27 source: { 28 url: target.currentSrc, 29 width: target.naturalWidth, 30 height: target.naturalHeight, 31 mediaType: null, 32 }, 33 cacheType: 'none', 34 }); 35 }; 36} 37function onErrorAdapter(onError) { 38 return ({ source }) => { 39 onError?.({ 40 error: `Failed to load image from url: ${source?.uri}`, 41 }); 42 }; 43} 44// Used for some transitions to mimic native animations 45const setCssVariables = (element, size) => { 46 element?.style.setProperty('--expo-image-width', `${size.width}px`); 47 element?.style.setProperty('--expo-image-height', `${size.height}px`); 48}; 49export default function ExpoImage({ source, placeholder, contentFit, contentPosition, placeholderContentFit, cachePolicy, onLoad, transition, onError, responsivePolicy, onLoadEnd, priority, blurRadius, recyclingKey, style, ...props }) { 50 const imagePlaceholderContentFit = placeholderContentFit || 'scale-down'; 51 const blurhashStyle = { 52 objectFit: placeholderContentFit || contentFit, 53 }; 54 const { containerRef, source: selectedSource } = useSourceSelection(source, responsivePolicy, setCssVariables); 55 const initialNodeAnimationKey = (recyclingKey ? `${recyclingKey}-${placeholder?.[0]?.uri}` : placeholder?.[0]?.uri) ?? ''; 56 const initialNode = placeholder?.[0]?.uri 57 ? [ 58 initialNodeAnimationKey, 59 ({ onAnimationFinished }) => (className, style) => (React.createElement(ImageWrapper, { ...props, source: placeholder?.[0], style: { 60 objectFit: imagePlaceholderContentFit, 61 ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}), 62 ...style, 63 }, className: className, events: { 64 onTransitionEnd: [onAnimationFinished], 65 }, contentPosition: { left: '50%', top: '50%' }, hashPlaceholderContentPosition: contentPosition, hashPlaceholderStyle: blurhashStyle })), 66 ] 67 : null; 68 const currentNodeAnimationKey = (recyclingKey 69 ? `${recyclingKey}-${selectedSource?.uri ?? placeholder?.[0]?.uri}` 70 : selectedSource?.uri ?? placeholder?.[0]?.uri) ?? ''; 71 const currentNode = [ 72 currentNodeAnimationKey, 73 ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) => (className, style) => (React.createElement(ImageWrapper, { ...props, source: selectedSource || placeholder?.[0], events: { 74 onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner], 75 onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady], 76 onMount: [onMount], 77 onTransitionEnd: [onAnimationFinished], 78 }, style: { 79 objectFit: selectedSource ? contentFit : imagePlaceholderContentFit, 80 ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}), 81 ...style, 82 }, className: className, cachePolicy: cachePolicy, priority: priority, contentPosition: selectedSource ? contentPosition : { top: '50%', left: '50%' }, hashPlaceholderContentPosition: contentPosition, hashPlaceholderStyle: blurhashStyle, accessibilityLabel: props.accessibilityLabel })), 83 ]; 84 return (React.createElement(View, { ref: containerRef, dataSet: { expoimage: true }, style: [{ overflow: 'hidden' }, style] }, 85 React.createElement(AnimationManager, { transition: transition, recyclingKey: recyclingKey, initial: initialNode }, currentNode))); 86} 87//# sourceMappingURL=ExpoImage.web.js.map