Native Tree and Visual Tree

Xamarin Forms app is composed from a tree of visual elements (classes deriving from Element). More precisely any page is the root of a controls tree that describe its UI. For example you could have a ContentPage that contains a ScrollViewer that in turn contains a StackPanel with children and so on. This kind of visual tree structure is pretty common to many other framework or technologies (think to HTML DOM or WPF visual tree just name a few). It's often called "native" visual tree because it represents the lowest layer of abstraction in UI just above pixels on the screen.

Framework like ReactorUI (that is freely inspired to React/Flutter libraries) creates a second higher visual tree (sometimes called "ghost" tree). When you create a page with children in ReactorUI, you're actually creating a visual tree of objects deriving from VisualNode. Often a visual node in ReactorUI pairs with a corresponding native control.

A ReactorUI component is an object that describe its UI in terms of visual nodes. A component itself is a visual node so you can build a tree of components.

A few things happen when component calls its Invalidate method (SetState in components with state) 1) ReactorUI calls its Render method and created a second version of the component ghost tree 2) Previous tree is compared to the new one: new nodes are "mounted", old ones are "unmounted" 3) Any mounted visual node usually creates its paired native control and add it to the native tree in the correct position; any unmounted node is removed from the native tree 4) Any new or preserved node usually updates corresponding properties of the native counterpart

This section of articles or tutorials will essentially show you how create ghost visual nodes for any control you want to use in ReactorUI. This could appear complex at first but you'll see that most of the time is mostly a ripetitive process that consists in creating a few small classes that for more clarity are usually contained in a single c# file.