# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://adospace.gitbook.io/reactorui/native-tree-and-visual-tree.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.