**feat**: provide svg props in onload

burnes · burnes · commit 1de80f8eeb1f · 2024-11-18T13:18:05.000+01:00
The SvgProps are now provided to the onLoad handler of the SvgUri and SvgCssUri components. Then we can react on different aspects of the SVG when loaded.

Background: Had an issue with SVGs not scaling correctly when changing the height of the image. With the handler I could fix my problem on my app side. I can imagine other use cases for this feature and decided to contribute this change here.

This PR does not fix the issue I had, but adds the feature for the onLoad handler. Any ideas to fix the issue itself are warmly welcome. The issue is described in the PR's test case.

Other considerations in this PR:
- using useMemo or UseEffect in conditionals/try-catch is not recommended, so restyled this code structure.
diff --git a/USAGE.md b/USAGE.md
@@ -92,14 +92,15 @@ If remote SVG file contains CSS in `<style>` element, use `SvgCssUri`:
 import * as React from 'react';
 import { ActivityIndicator, View, StyleSheet } from 'react-native';
 import { SvgCssUri } from 'react-native-svg/css';
+import type { SvgProps } from 'react-native-svg';
 export default function TestComponent() {
   const [loading, setLoading] = React.useState(true);
   const onError = (e: Error) => {
     console.log(e.message);
     setLoading(false);
   };
-  const onLoad = () => {
-    console.log('Svg loaded!');
+  const onLoad = (svgProps: SvgProps) => {
+    console.log('Svg loaded!', svgProps);
     setLoading(false);
   };
   return (
diff --git a/apps/common/test/SvgUriOnLoad.tsx b/apps/common/test/SvgUriOnLoad.tsx
@@ -0,0 +1,181 @@
+import React, {useState} from 'react';
+import {View, Text} from 'react-native';
+import {SvgProps, SvgUri} from '../../../src';
+import {SvgCssUri} from 'react-native-svg/css';
+
+const svgDataUri =
+  'data:image/svg+xml;base64,' +
+  btoa(`
+    <svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="pink">
+     <ellipse cx="30" cy="30" rx="30" ry="15" fill="yellow" />
+    </svg>
+    `);
+
+const cssSvgDataUri =
+  'data:image/svg+xml;base64,' +
+  btoa(`
+    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <style>
+        .small { font: italic 13px sans-serif; }
+      </style>
+      <rect x="0" y="0" width="100" height="100" fill="yellow" />
+      <text x="20" y="35" class="small">CSS Styled</text>
+    </svg>
+`);
+
+const calculateWidth = (svgProps: SvgProps, desiredHeight: number) => {
+  let originalHeight = svgProps.height;
+  let originalWidth = svgProps.width;
+  if (originalWidth && originalHeight) {
+    return (Number(originalWidth) / Number(originalHeight)) * desiredHeight;
+  }
+};
+
+const ExampleWithSvgUri = () => {
+  const [width, setWidth] = useState(0);
+  const height = 12;
+
+  const handleLoad = (svgProps: SvgProps) => {
+    const calculatedWidth = calculateWidth(svgProps, height);
+    if (calculatedWidth) {
+      setWidth(calculatedWidth);
+    }
+  };
+  return (
+    <View style={{flex: 1}}>
+      <Text style={{fontSize: 24, color: '#fff'}}>SvgUri component</Text>
+
+      <Text style={{marginTop: 10, color: '#fff'}}>Original Size ✅</Text>
+      <SvgUri style={{backgroundColor: 'blue'}} uri={svgDataUri} />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Set different height ❌
+      </Text>
+      <SvgUri
+        style={{backgroundColor: 'red'}}
+        uri={svgDataUri}
+        height={height}
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Preserve Aspect Ratio Meet ❌
+      </Text>
+      <SvgUri
+        style={{backgroundColor: 'red'}}
+        uri={svgDataUri}
+        height={height}
+        preserveAspectRatio="xMinYMid meet"
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Preserve Aspect Ratio Slice ❌
+      </Text>
+      <SvgUri
+        style={{backgroundColor: 'red'}}
+        uri={svgDataUri}
+        height={height}
+        preserveAspectRatio="xMinYMid slice"
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Preserve Aspect Ratio None ❌
+      </Text>
+      <SvgUri
+        style={{backgroundColor: 'red'}}
+        uri={svgDataUri}
+        height={height}
+        preserveAspectRatio="none"
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Auto calculate width ✅
+      </Text>
+      <SvgUri
+        style={{backgroundColor: 'green'}}
+        uri={svgDataUri}
+        height={height}
+        width={width}
+        onLoad={handleLoad}
+      />
+    </View>
+  );
+};
+
+const ExampleWithSvgCssUri = () => {
+  const [width, setWidth] = useState(0);
+  const height = 25;
+  const handleLoad = (svgProps: SvgProps) => {
+    const calculatedWidth = calculateWidth(svgProps, height);
+    if (calculatedWidth) {
+      setWidth(calculatedWidth);
+    }
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <Text style={{fontSize: 24, color: '#fff'}}>SvgCssUri component</Text>
+
+      <Text style={{marginTop: 10, color: '#fff'}}>Original Size ✅</Text>
+      <SvgCssUri style={{backgroundColor: 'blue'}} uri={cssSvgDataUri} />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Set different height ❌
+      </Text>
+      <SvgCssUri
+        style={{backgroundColor: 'red'}}
+        height={height}
+        uri={cssSvgDataUri}
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Preserve Aspect Ratio Meet ❌
+      </Text>
+      <SvgCssUri
+        style={{backgroundColor: 'red'}}
+        height={height}
+        uri={cssSvgDataUri}
+        preserveAspectRatio="xMinYMid meet"
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Preserve Aspect Ratio Slice ❌
+      </Text>
+      <SvgCssUri
+        style={{backgroundColor: 'red'}}
+        height={height}
+        uri={cssSvgDataUri}
+        preserveAspectRatio="xMinYMid slice"
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Preserve Aspect Ratio None ❌
+      </Text>
+      <SvgCssUri
+        style={{backgroundColor: 'red'}}
+        height={height}
+        uri={cssSvgDataUri}
+        preserveAspectRatio="none"
+      />
+
+      <Text style={{marginTop: 10, color: '#fff'}}>
+        Auto calculate width ✅
+      </Text>
+      <SvgCssUri
+        style={{backgroundColor: 'green'}}
+        height={height}
+        uri={cssSvgDataUri}
+        width={width}
+        onLoad={handleLoad}
+      />
+    </View>
+  );
+};
+
+export default () => {
+  return (
+    <View style={{flex: 1, padding: 10, flexDirection: 'row'}}>
+      <ExampleWithSvgUri />
+      <ExampleWithSvgCssUri />
+    </View>
+  );
+};
diff --git a/apps/common/test/index.tsx b/apps/common/test/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react';
 
 import ColorTest from './ColorTest';
@@ -35,7 +34,8 @@ import Test2417 from './Test2417';
 import Test2455 from './Test2455';
 import Test2471 from './Test2471';
 import Test2520 from './Test2520';
+import SvgUriOnLoad from './SvgUriOnLoad';
 
 export default function App() {
-  return <ColorTest />;
+  return <SvgUriOnLoad />;
 }
diff --git a/src/css/css.tsx b/src/css/css.tsx
@@ -766,17 +766,29 @@ export const inlineStyles: Middleware = function inlineStyles(
 };
 
 export function SvgCss(props: XmlProps) {
-  const { xml, override, fallback, onError = err } = props;
-  try {
-    const ast = useMemo<JsxAST | null>(
-      () => (xml !== null ? parse(xml, inlineStyles) : null),
-      [xml]
-    );
-    return <SvgAst ast={ast} override={override || props} />;
-  } catch (error) {
-    onError(error);
+  const { xml, override, fallback, onError = err, onLoad } = props;
+
+  const [ast, error] = useMemo<[JsxAST | null, unknown]>(() => {
+    try {
+      const parsed = xml !== null ? parse(xml, inlineStyles) : null;
+      return [parsed, null];
+    } catch (exc) {
+      return [null, exc];
+    }
+  }, [xml]);
+
+  useEffect(() => {
+    if (!error && ast?.props) {
+      onLoad?.(ast.props);
+    } else if (error) {
+      onError(error as Error);
+    }
+  }, [ast, error, onLoad, onError]);
+
+  if (error) {
     return fallback ?? null;
   }
+  return <SvgAst ast={ast} override={override || props} />;
 }
 
 export function SvgCssUri(props: UriProps) {
@@ -788,7 +800,6 @@ export function SvgCssUri(props: UriProps) {
       ? fetchText(uri)
           .then((data) => {
             setXml(data);
-            onLoad?.();
           })
           .catch((e) => {
             onError(e);
@@ -799,7 +810,9 @@ export function SvgCssUri(props: UriProps) {
   if (isError) {
     return fallback ?? null;
   }
-  return <SvgCss xml={xml} override={props} fallback={fallback} />;
+  return (
+    <SvgCss xml={xml} override={props} fallback={fallback} onLoad={onLoad} />
+  );
 }
 
 // Extending Component is required for Animated support.
diff --git a/src/xml.tsx b/src/xml.tsx
@@ -35,7 +35,7 @@ export interface JsxAST extends AST {
 export type AdditionalProps = {
   onError?: (error: Error) => void;
   override?: object;
-  onLoad?: () => void;
+  onLoad?: (svgProps: SvgProps) => void;
   fallback?: JSX.Element;
 };
 
@@ -65,18 +65,29 @@ export function SvgAst({ ast, override }: AstProps) {
 const err = console.error.bind(console);
 
 export function SvgXml(props: XmlProps) {
-  const { onError = err, xml, override, fallback } = props;
+  const { onError = err, xml, override, fallback, onLoad } = props;
 
-  try {
-    const ast = useMemo<JsxAST | null>(
-      () => (xml !== null ? parse(xml) : null),
-      [xml]
-    );
-    return <SvgAst ast={ast} override={override || props} />;
-  } catch (error) {
-    onError(error);
+  const [ast, error] = useMemo<[JsxAST | null, unknown]>(() => {
+    try {
+      const parsed = xml !== null ? parse(xml) : null;
+      return [parsed, null];
+    } catch (exc) {
+      return [null, exc];
+    }
+  }, [xml]);
+
+  useEffect(() => {
+    if (!error && ast?.props) {
+      onLoad?.(ast.props);
+    } else if (error) {
+      onError(error as Error);
+    }
+  }, [ast, error, onError, onLoad]);
+
+  if (error) {
     return fallback ?? null;
   }
+  return <SvgAst ast={ast} override={override || props} />;
 }
 
 export function SvgUri(props: UriProps) {
@@ -89,7 +100,6 @@ export function SvgUri(props: UriProps) {
           .then((data) => {
             setXml(data);
             isError && setIsError(false);
-            onLoad?.();
           })
           .catch((e) => {
             onError(e);
@@ -101,7 +111,9 @@ export function SvgUri(props: UriProps) {
   if (isError) {
     return fallback ?? null;
   }
-  return <SvgXml xml={xml} override={props} fallback={fallback} />;
+  return (
+    <SvgXml xml={xml} override={props} fallback={fallback} onLoad={onLoad} />
+  );
 }
 
 // Extending Component is required for Animated support.
