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.
Let's start with a simple example:
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.
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
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
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.