Does “react-native-render-html” render SVGs !?

As of the last update in 2023, the react-native-render-html library does not natively support rendering SVG elements directly within HTML content. However, there are workarounds to render SVGs in React Native applications, including using additional libraries or custom implementations.

Workarounds to Render SVGs in React Native

Let’s start by using react-native-svg: This is a popular library for rendering SVGs in React Native. You can parse the SVG content and render it using components provided by react-native-svg.

Code sample:

import React from 'react';
import { SvgXml } from 'react-native-svg';

const MySvgComponent = () => {
  const svgMarkup = `
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="50" fill="blue" />
    </svg>
  `;
  return <SvgXml xml={svgMarkup} width="100" height="100" />;
};

export default MySvgComponent;

Now, combining react-native-render-html with react-native-svg: If you need to render SVGs as part of the HTML content, you can use a combination of react-native-render-html and react-native-svg. You would need to parse the HTML and extract SVG elements, then render those elements using react-native-svg.

Code sample:

import React from 'react';
import RenderHtml from 'react-native-render-html';
import { SvgXml } from 'react-native-svg';
import { View, Text…