Render SVG Image from URL in React-Native

In my current project, I have to render SVG images from the URLs in the list view.

I did it using FlatList and react-native-svg, but I am facing a performance issue.

When it renders on display, it freezes the screen until it is visible to the user.

Code is simple, just an Array of SVG image URLs passed to flatlist, also tried Flashlist, but same output UI freezes. The data is more than 100 SVG images

    import { SvgUri } from 'react-native-svg';    
     <FlatList data=['https://example.svg'] 
      renderItem={({item,index})=>  
          <SvgUri
            width={scale(30)}
            height={scale(30)}
            uri={item}
          />
      }

Also tried react-native-svg-uri and react-native-fast-svg

Also did some custom logic

    import React, { useEffect, useState } from "react";
    import { SvgXml } from "react-native-svg";

    // simple memory cache (lives until app reload)
    const svgCache: Record<string, string> = {};

    export const CachedSvg = ({ uri, width = 25, height = 25 }) => {
     const [xml, setXml] = useState<string | null>(svgCache[uri] || null);

      useEffect(() => {
        let mounted = true;

        if (svgCache[uri]) {
        // already cached
        setXml(svgCache[uri]);
      } else {
      // fetch & store in cache
      fetch(uri)
        .then(res => res.text())
        .then(data => {
          if (mounted) {
            svgCache[uri] = data;
            setXml(data);
          }
        })
        .catch(err => {
          console.warn("SVG fetch failed:", uri, err);
        });
    }

    return () => {
      mounted = false;
    };
  }, [uri]);

  if (!xml) return null;
  return <SvgXml xml={xml} width={width} height={height} />;
};