@metamask/design-system-react-native
Version:
54 lines • 2.31 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import $React, { useState, useCallback, useEffect } from "react";
const React = $importDefault($React);
import { Image } from "react-native/index.js";
import { SvgUri } from "react-native-svg";
export const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError, style, imageProps, svgProps, }) => {
// CASE 1: local image (src is a number)
if (typeof src === 'number') {
return (<Image source={src} style={[{ width, height }, style]} resizeMode="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
}
// CASE 2: Local SVG component (src is a React component)
if (typeof src === 'function') {
const LocalSvg = src;
return <LocalSvg width={width} height={height} {...svgProps}/>;
}
// CASE 3: Remote image or SVG (src is an object with a uri)
const [isSvg, setIsSvg] = useState(false);
const checkSvgContentType = useCallback(async (uri) => {
try {
const response = await fetch(uri, { method: 'HEAD' });
// If no header is returned, fallback to an empty string.
const contentType = response.headers.get('Content-Type') || '';
return contentType.includes('image/svg+xml');
}
catch {
return false;
}
}, []);
useEffect(() => {
if (src.uri) {
const uriLower = src.uri.toLowerCase();
const isLikelySvg = uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');
if (!src.uri.startsWith('data:')) {
checkSvgContentType(src.uri).then(setIsSvg);
}
else {
setIsSvg(isLikelySvg);
}
}
else {
setIsSvg(false);
}
}, [src, checkSvgContentType]);
if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {
return (<SvgUri uri={src.uri} width={width} height={height} onError={onSvgError} style={style} {...svgProps}/>);
}
return (<Image source={src} style={[{ width, height }, style]} resizeMode="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
};
//# sourceMappingURL=ImageOrSvg.mjs.map