Image - support SVG from uri (#1712)

Author: M-i-k-e-l

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -9,6 +9,8 @@ const BROKEN_URL = 'file:///Desktop/website/img/cupcake.jpg';
 const DEFAULT_SIZE = 100;
 
 const file = Assets.svgs.demo.logo;
+const uri = {uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'};
+const uriWithCss = {uri: 'http://thenewcode.com/assets/svg/accessibility.svg'};
 const xml = `
   <svg width="32" height="32" viewBox="0 0 32 32">
     <path
@@ -38,6 +40,13 @@ enum SizeType {
   Percentage = '50%'
 }
 
+enum SvgType {
+  File = 'file',
+  Uri = 'uri',
+  UriWithCss = 'use_with_css',
+  Xml = 'xml'
+}
+
 interface State {
   cover: boolean;
   showOverlayContent: boolean;
@@ -46,7 +55,7 @@ interface State {
   margin: number;
   showErrorImage: boolean;
   showSvg: boolean;
-  isFile: boolean;
+  svgType: SvgType;
   sizeType: SizeType;
 }
 
@@ -59,10 +68,25 @@ class ImageScreen extends Component<{}, State> {
     margin: 0,
     showErrorImage: false,
     showSvg: false,
-    isFile: false,
+    svgType: SvgType.File,
     sizeType: SizeType.None
   };
 
+  getSvgSource() {
+    const {svgType} = this.state;
+    switch (svgType) {
+      case SvgType.File:
+        return file;
+      case SvgType.Uri:
+        return uri;
+      case SvgType.UriWithCss:
+        return uriWithCss;
+      case SvgType.Xml:
+      default:
+        return xml;
+    }
+  }
+
   renderOverlayContent() {
     const {cover, overlayType, showOverlayContent} = this.state;
     if (showOverlayContent) {
@@ -105,14 +129,15 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderSvgImage() {
-    const {isFile, sizeType} = this.state;
+    const {sizeType} = this.state;
     const size: any = Number(sizeType) || sizeType;
+    const source = this.getSvgSource();
     return (
       <>
         {size ? (
-          <Image source={isFile ? file : xml} width={size} height={size}/>
+          <Image source={source} width={size} height={size}/>
         ) : (
-          <Image source={isFile ? file : xml}/>
+          <Image source={source}/>
         )}
       </>
     );
@@ -134,10 +159,9 @@ class ImageScreen extends Component<{}, State> {
   }
 
   renderSvgOptions() {
-    const {isFile} = this.state;
     return (
       <>
-        {renderBooleanOption.call(this, isFile ? 'Load from file' : 'Use xml const', 'isFile')}
+        {renderRadioGroup.call(this, 'SVG Type', 'svgType', SvgType, {isRow: true})}
         {renderRadioGroup.call(this, 'Size Type', 'sizeType', SizeType, {isRow: true})}
       </>
     );

generatedTypes/src/components/image/SvgImage.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import { ImageProps } from 'react-native';
+export declare function isSvg(source: ImageProps['source']): any;
 export interface SvgImageProps {
     data: any;
 }
 declare function SvgImage(props: SvgImageProps): JSX.Element | null;
 declare namespace SvgImage {
     var displayName: string;
+    var isSvg: typeof import("./SvgImage").isSvg;
 }
 export default SvgImage;

src/components/image/SvgImage.tsx

@@ -1,8 +1,19 @@
 import React from 'react';
+import {ImageProps} from 'react-native';
 import {SvgPackage} from '../../optionalDependencies';
 const SvgXml = SvgPackage?.SvgXml;
+const SvgCssUri = SvgPackage?.SvgCssUri;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
+function isSvgUri(source: ImageProps['source']) {
+  // @ts-expect-error
+  return typeof source === 'object' && source?.uri?.endsWith('.svg');
+}
+
+export function isSvg(source: ImageProps['source']) {
+  return typeof source === 'string' || typeof source === 'function' || isSvgUri(source);
+}
+
 export interface SvgImageProps {
   data: any; // TODO: I thought this should be string | React.ReactNode but it doesn't work properly
 }
@@ -16,7 +27,9 @@ function SvgImage(props: SvgImageProps) {
     return null;
   }
 
-  if (typeof data === 'string') {
+  if (isSvgUri(data)) {
+    return <SvgCssUri {...others} uri={data.uri}/>;
+  } else if (typeof data === 'string') {
     return <SvgXml xml={data} {...others}/>;
   } else if (data) {
     const File = data; // Must be with capital letter
@@ -27,5 +40,6 @@ function SvgImage(props: SvgImageProps) {
 }
 
 SvgImage.displayName = 'IGNORE';
+SvgImage.isSvg = isSvg;
 
 export default SvgImage;

src/components/image/index.tsx

@@ -254,8 +254,7 @@ class Image extends PureComponent<Props, State> {
 
   render() {
     const {source} = this.props;
-    const isSvg = typeof source === 'string' || typeof source === 'function';
-    if (isSvg) {
+    if (SvgImage.isSvg(source)) {
       return this.renderSvg();
     } else {
       return this.renderRegularImage();