I am rendering SVGs from remote URLs:
import { SvgUri } from "react-native-svg";
function RemoteSVG() {
return (
<SvgUri
uri={"https://cdn.orsive.com/avatars/3tYL96SMyBcwUakNphevH-avatar.svg"}
style={{
width: 100,
height: 100,
backgroundColor: "blue",
}}
/>
);
}
I want to show loading indicator/skeleton when the SVG is being fetched and loaded, but SvgUri
component from react-native-svg
doesn't have onLoad
and onLoadEnd
props. So, I tried setting backgroundColor
, but once the SVG gets loaded, the background of the SVG also gets affected. It kinda looks like this:
Is there a way to show a loading skeleton when the SVG is being loaded?
CodePudding user response:
Turns out I was using an old version of react-native-svg
. I have switched to version 12.4.3
which has the onLoad
prop. Here's what I did:
import { useState } from "react";
import { View } from "react-native";
import { SvgUri } from "react-native-svg";
function RemoteSVG() {
const [loading, setLoading] = useState(true);
return (
<>
<SvgUri
uri={"https://cdn.orsive.com/avatars/3tYL96SMyBcwUakNphevH-avatar.svg"}
onl oad={() => setLoading(false)}
style={{
width: !loading ? 100 : 0,
height: !loading ? 100 : 0,
}}
/>
{loading && (
<View
style={{
width: 100,
height: 100,
backgroundColor: "blue",
}}
/>
)}
</>
);
}