mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-09 17:30:58 +00:00
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:
+9
-2
@@ -697,8 +697,9 @@ export function SvgCss(props: XmlProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function SvgCssUri(props: UriProps) {
|
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 [xml, setXml] = useState<string | null>(null);
|
||||||
|
const [isError, setIsError] = useState(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
uri
|
uri
|
||||||
? fetchText(uri)
|
? fetchText(uri)
|
||||||
@@ -706,9 +707,15 @@ export function SvgCssUri(props: UriProps) {
|
|||||||
setXml(data);
|
setXml(data);
|
||||||
onLoad?.();
|
onLoad?.();
|
||||||
})
|
})
|
||||||
.catch(onError)
|
.catch((e) => {
|
||||||
|
onError(e);
|
||||||
|
setIsError(true);
|
||||||
|
})
|
||||||
: setXml(null);
|
: setXml(null);
|
||||||
}, [onError, uri, onLoad]);
|
}, [onError, uri, onLoad]);
|
||||||
|
if (isError) {
|
||||||
|
return fallback ?? null;
|
||||||
|
}
|
||||||
return <SvgCss xml={xml} override={props} />;
|
return <SvgCss xml={xml} override={props} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user