Optimizing SVG Rendering in React Native: From React-Native-SVG to Expo-Image

If you are someone who is working with SVGs and use react-native-svg to render svg components, this blog is your life-saver! We will discuss how to optimize SVG performance and inspect if we still need react-native-svg?

What is SVG ?

SVG stands for Scalable Vector Graphics, a file format used to describe two-dimensional graphics. It is based on XML (Extensible Markup Language) and is used to create vector images that can scale without losing quality.

Why react-native-svg ?

1. Dynamic SVGs: It allows us to draw SVGs dynamically, meaning a single svg component can accept various props like dimensions and color which will help us to render svg on runtime.
   
   
2. Ease of Maintenance: Since a single component can be reused in many places, it’s very easy to maintain the codebase and a little code tweaking is required whenever a new property is required.

What is the problem with react-native-svg?

1. SVG Rendering: The SVGs rendered by the library aren’t “true” SVGs. They’re React Native components rendered natively.
   
   
2. Performance Problems: Rendering 500 svg at the same time using react-native-svg took a staggering 9–10 seconds!
   

Imagine you have a huge list of items rendered in SVG cards. This 9-second delay was a huge compromise, so we need a solution that could render without such performance hits.

The Solution

After evaluating alternatives, Expo-Image offers support to render SVGs natively. We already know that rendering images natively offers better performance. So, why not use Expo-Image to render SVGs? However, this approach brought its own set of challenges.

While Expo-Image offers native performance, it only accepts SVG images as Base64 URI or file URI source, meaning:

• SVG sources need to be predefined (dimensions, colors, tags, etc.).
• Dynamically generated SVGs are not supported.

To overcome this, you can pre-generate all the SVGs required for the entire app and store them in the cache. Here’s how you can implement it.

1. Converting React Native SVGs to XML

You can create a SvgGenerator component that converts functional SVG components into XML. This component when wrapped around child components will traverse its children and store the xml in an array.

const ATTRS_DATA = { /* Key-value map of React-Native-SVG props to XML */ }

export const SvgGenerator = React.memo((props) => {
  const { children, name, style } = props;

  const convertToSvgXml = (children) =>
    React.Children.map(children, (child) => {
      const tag = child?.type?.name.toLowerCase();
      const { children, style, ...rest } = child?.props ?? {};
      const attrs = Object.keys(rest)
        .map((key) => `${ATTRS_DATA[key] || key}="${rest[key]}"`)
        .join(' ');

      return children 
        ?`<${tag}${attrs}>${convertToSvgXml(children).join('\n')}</${tag}>` 
        : `<${tag} ${attrs} />`;
    });

  return null;
});

2. Pre-generating and Storing SVGs in Async-Storage

After the conversion of svg into xml, you can use Base-64 library to convert those xml into base64 uri string and store it in AsyncStorage, so that we can retrieve it from the disk.

export const UriGenerator = (props) => {
  const svgList = useRef([]);
	const svgBaseKey = 'svg_base64'
	
  const convertSvgToBase64 = async () => {
    const uri = [];
    await Promise.all(
      svgList.current.map((item) => {
        const { svg, name } = item;
        const base64 = Base64.encode(svg);
        uri.push({ name, uri: `data:image/svg+xml;base64,${base64}` });
      })
    );
   await save(svgBaseKey, cacheValue)
  };
  
  return (/..../)
};

You can choose to use several optimization techniques given by Expo-Image while rendering this svg to increase performance. For example you can use the prefetch method to load an array of images even before rendering. You can leverage the cachePolicy property of Expo-Image to store images in caches which will further reduce the render time!

The Results

By implementing this approach, when you render 500 SVGs at a time, you can notice render time is decreased drastically from 9 seconds to an average of 2.5 seconds.

Conclusion

Switching from react-native-svg to native SVG rendering with Expo-Image will provide significant performance gains in your React Native project. By leveraging caching and pre-generating SVGs, you can achieve a slick, high-performing UI without compromising on the flexibility of dynamic SVGs.

This approach may add some initial complexity to the setup but greatly enhances the user experience. If you’re facing similar performance issues with dynamic SVGs, consider exploring native SVG rendering as a solution.