Reinvent the Wheel
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.
#
ImplementationTo 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 โhtmlparser2
libarary:
Below is an overview of the component's render
method invocation:
Line 36 invokes
parseDocument
from โhtmlparser2
which returns the root DOM node of the document.Line 37 returns the mapping of the root's children with the result of
renderNode
method.Line 25, the
renderNode
method returns: the result ofrenderTextNode
when provided with a DOMText
node, the result ofrenderElement
when the provided node is anElement
, andnull
otherwise, such as when the provided node is a comment, script, or stylesheet.
Although the renderTextNode
implementation is pretty straightforward,renderElement
has some conditional logic to render the element either in a React Native โText
or โView
. This is to bypass rendering glitches when embedding โView
inside โText
, such as discussed in more details in the below section (hoisting).
note
We allude to the DOM an DOM nodes while โhtmlparser2
only provides a substet of the DOM API for lightweightness!
#
DiscussionPerhaps 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 custom renderers for specific tags such as โ
<img>
, โ<ul>
...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 whitespace collapsing such as in โ
white-space
CSS property.Support URL resolutions, such as relative URLs, โ
<base>
elements... etc.Support โhoisting. Because React Native โ
View
elements are not well handled inside โText
elements, these should be hoisted up in the tree to be rendered insideViews
.Support complete CSS inheritance. For example, a โ
<div>
element could have a style with text properties such as โcolor
, but a React Native โView
element 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!