When you consume the
RenderHTML component, you are actually using three distinct components. So this (implicit composite):
is equivalent to this (explicit composite):
You can actually use the explicit composite architecture by importing those components:
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:
Will take all
RenderHTMLprops pertaining to the Transient Render Engine layer such as
classesStyles(all styling props) and DOM related such as
TRenderEngineConfigfor a complete reference.
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.
TPhrasing nodes and
Each renderer will pass styles provided by its underlying
TNode to its React Native wrapper. Children are rendered thanks to the
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
Some tags such as
<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.