To understand how this library works, we propose a teeny, tiny implementation of an HTML renderer in just about 40 lines of code. Of course, it has many limitations that are overcomed by
react-native-render-html, but it will give you a good glimpse at how things work internally.
To do so, we will need an HTML parsing library which will give us some sort of proxy DOM representation of the HTML source. In this very example, we will use
Below is an overview of the component's
render method invocation:
Line 36 invokes
htmlparser2which returns the root DOM node of the document.
Line 37 returns the mapping of the root's children with the result of
Line 25, the
renderNodemethod returns: the result of
renderTextNodewhen provided with a DOM
Textnode, the result of
renderElementwhen the provided node is an
nullotherwise, such as when the provided node is a comment, script, or stylesheet.
renderTextNode implementation is pretty straightforward,
renderElement has some conditional logic to render the element either in a React Native
View. This is to bypass rendering glitches when embedding
Text, such as discussed in more details in the below section (hoisting).
We allude to the DOM an DOM nodes while
htmlparser2 only provides a substet of the DOM API for lightweightness!
Perhaps your requirements are so simple that this might actually be sufficient for your use-case. You could try to extend this naive implementation with the below, easy to implement features:
Add styles for specific tags and classes.
However, you will get involved in a much substantial and complex task if you have requirements such as:
Support inline styles. You would need to transform those styles into React Native compatible styles. Beware that unsupported styles on the native side could easily crash your app.
Support complete CSS inheritance. For example, a
<div>element could have a style with text properties such as
color, but a React Native
Viewelement which is the default mapping for
<div>will not support such style property. See CSS Processing page.
react-native-render-html overcomes all of those caveats and more out of the box!