@metamask/design-system-react-native
Version:
1 lines • 4.75 kB
Source Map (JSON)
{"version":3,"file":"ImageOrSvg.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport { Image } from 'react-native';\nimport { SvgUri } from 'react-native-svg';\n\nimport type { ImageOrSvgProps } from './ImageOrSvg.types';\n\nexport const ImageOrSvg = ({\n src,\n width,\n height,\n onImageLoad,\n onImageError,\n onSvgError,\n style,\n imageProps,\n svgProps,\n}: ImageOrSvgProps) => {\n // CASE 1: local image (src is a number)\n if (typeof src === 'number') {\n return (\n <Image\n source={src}\n style={[{ width, height } as any, style]}\n resizeMode=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n }\n\n // CASE 2: Local SVG component (src is a React component)\n if (typeof src === 'function') {\n const LocalSvg = src;\n return <LocalSvg width={width} height={height} {...svgProps} />;\n }\n\n // CASE 3: Remote image or SVG (src is an object with a uri)\n const [isSvg, setIsSvg] = useState<boolean>(false);\n\n const checkSvgContentType = useCallback(async (uri: string) => {\n try {\n const response = await fetch(uri, { method: 'HEAD' });\n // If no header is returned, fallback to an empty string.\n const contentType = response.headers.get('Content-Type') || '';\n return contentType.includes('image/svg+xml');\n } catch {\n return false;\n }\n }, []);\n\n useEffect(() => {\n if (src.uri) {\n const uriLower = src.uri.toLowerCase();\n const isLikelySvg =\n uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');\n if (!src.uri.startsWith('data:')) {\n checkSvgContentType(src.uri).then(setIsSvg);\n } else {\n setIsSvg(isLikelySvg);\n }\n } else {\n setIsSvg(false);\n }\n }, [src, checkSvgContentType]);\n\n if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {\n return (\n <SvgUri\n uri={src.uri}\n width={width}\n height={height}\n onError={onSvgError}\n style={style}\n {...svgProps}\n />\n );\n }\n return (\n <Image\n source={src as any}\n style={[{ width, height } as any, style]}\n resizeMode=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n};\n"]}