mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-05-24 11:44:39 +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) {
|
||||
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} />;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user