Skip to main content

Rendering

Composite Rendering Architecture#

When you consume the ​RenderHTML component, you are actually using three distinct components. So this (implicit composite):

<RenderHTML source={{ html }} />

is equivalent to this (explicit composite):

<TRenderEngineProvider>
<RenderHTMLConfigProvider>
<RenderHTMLSource source={{ html }} />
</RenderHTMLConfigProvider>
</TRenderEngineProvider>

You can actually use the explicit composite architecture by importing those components:

import {
TRenderEngineProvider,
RenderHTMLConfigProvider,
RenderHTMLSource
} from 'react-native-render-html';
tip

The great benefit of using explicitly this composite rendering architecture is that the engine and configuration can be put near the top of your App to factor the cost of instantiating the engine. This is especially usefull for apps which will render hundreds to thousands of small snippets such as chat apps.

Note that props of the ​RenderHTML component are split between the three layers of the rendering architecture:

​TRenderEngineProvider

Will take all ​RenderHTML props pertaining to the ​Transient Render Engine layer such as ​customHTMLElementModels, ​classesStyles (all styling props) and DOM related such as ​domVisitors, ​selectDomRoot... See ​TRenderEngineConfig for a complete reference.

​RenderHTMLConfigProvider

Will take all ​RenderHTML props pertaining to the ​Rendering layer such as ​renderers, ​renderersProps, ​computeEmbeddedMaxWidth, ... See ​RenderHTMLConfig for a complete reference.

​RenderHTMLSource

Will take all ​RenderHTML props pertaining to the document such as ​source, ​onTTreeChange, ​contentWidth. See ​RenderHTMLSourceProps for a complete reference.

Default TNode Renderers#

Each node of the ​TRT is translated to a React component in the TNodeRenderer component. Internally, TNodeRenderer will map each type of TNode to its dedicated component. TDocumentRenderer for TDocument nodes, TBlockRenderer for ​TBlock nodes, TPhrasingRenderer for ​TPhrasing nodes and TTextRenderer for ​TText nodes.

Under the hood, TPhrasingRenderer and TTextRenderer use React Native ​Text wrapper component, while TBlockRenderer and TDocumentRenderer use React Native ​View wrapper component.

Each renderer will pass styles provided by its underlying TNode to its React Native wrapper. Children are rendered thanks to the TChildrenRenderer component.

Custom Renderers#

Custom renderers are components defined for specific tags. They can be specified with the ​renderers prop, which is a mapping of tags with the corresponding components. See the ​Custom Rendering page. Also note that props targeting those renderers can be passed to a custom renderer via the ​renderersProps prop, which is a mapping of tag names with its corresponding props. Those props can be consumed from the custom renderer via useRendererProps hook.

Internal Renderers#

Some tags such as ​<img>, ​<ol>, ​<ul> and ​<a> are handled by special renderers, namely internal renderers. Those renderers can be thought of as "internal custom renderers". See the ​Images, ​Lists and ​Anchors corresponding pages.