Architecture

important

Consumers of this library can benefit greatly from understanding the basic data flow model to leverage its capabilities. Features such as props will touch on different areas of this data flow.

Hello World!#

Let's start with a simple example:

Minimal working example

JSX Source
HTML Snippet
TRT Snapshot

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `
<p style='text-align:center;'>
  Hello World!
</p>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
    />
  );
}

This card shows the result of rendering a simple HTML code snippet.

Press on the button below to show how this code renders on your device.

This looks pretty simple. But what exactly is happening under the hood? As laid out in the Reinvent the Wheel page, we need some logic to translate the DOM into a structure easily translatable into native elements and support all the features mentioned in the referred page. This data structure is called the Transient Render Tree (TRE), see figure below.

Data Flow#

Data Flow Diagram

Depiction of data transformations involved in the rendering of an HTML snippet.

We can roughly split the transformations from an HTML string to a React tree in 3 steps:

HTML parsing. In this step, the HTML code is parsed to form a DOM tree. This step is performed by the htmlparser2 library.
TRT Construction. In this step, the DOM tree is transformed in a TRT. Each node of this tree is referred to as a Transient Node (TNode) which has React-Native compatible styles. This step is performed by @native-html/transient-render-engine module.
Transient Render Tree Rendering. In this step, the TRT is transformed in a React render tree (VDOM). TNodes are passed to internal and custom renderers.

For more information on TRT construction, see Transient Render Engine and CSS Processing pages.