fix SvgCssUri fallback (#2171)

When using the `SvgCssUri` component, specifying `fallback` does not render the fallback component in the case of an error.

I looked through the source code and believe this is because `SvgCssUri` is rendering a `SvgCss`
https://github.com/software-mansion/react-native-svg/blob/22f47333fbe134b0c697b9c0190a09d6927f2cea/src/css.tsx#L712
which renders a `SvgAst`
https://github.com/software-mansion/react-native-svg/blob/22f47333fbe134b0c697b9c0190a09d6927f2cea/src/css.tsx#L696
which does not use the `fallback` prop
https://github.com/software-mansion/react-native-svg/blob/22f47333fbe134b0c697b9c0190a09d6927f2cea/src/xml.tsx#L96

This fix copies over the error handling code from `SvgUri` so `SvgCssUri` can render a fallback on error. I tested the change in my project and this works like it does for `SvgUri`

Co-authored-by: Maxwell You <maxwell.you@mlb.com>
This commit is contained in:
Maxwell You
2023-11-15 08:59:40 -07:00
committed by GitHub
parent ab52bdd118
commit fc1c9a0347
+9 -2
View File
@@ -697,8 +697,9 @@ export function SvgCss(props: XmlProps) {
}
export function SvgCssUri(props: UriProps) {
const { uri, onError = err, onLoad } = props;
const { uri, onError = err, onLoad, fallback } = props;
const [xml, setXml] = useState<string | null>(null);
const [isError, setIsError] = useState(false);
useEffect(() => {
uri
? fetchText(uri)
@@ -706,9 +707,15 @@ export function SvgCssUri(props: UriProps) {
setXml(data);
onLoad?.();
})
.catch(onError)
.catch((e) => {
onError(e);
setIsError(true);
})
: setXml(null);
}, [onError, uri, onLoad]);
if (isError) {
return fallback ?? null;
}
return <SvgCss xml={xml} override={props} />;
}