React Native SVG loading indicator for remote SVGs

Question

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?

score 1 · Accepted Answer · answered Aug 09 '22 at 07:03

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"}
        onLoad={() => setLoading(false)}
        style={{
          width: !loading ? 100 : 0,
          height: !loading ? 100 : 0,
        }}
      />
      {loading && (
        <View
          style={{
            width: 100,
            height: 100,
            backgroundColor: "blue",
          }}
        />
      )}
    </>
  );
}

React Native SVG loading indicator for remote SVGs

1 Answers1