title: Nativescript Pedegree tree view
body: <p>I would like to create a view displaying a pedigree tree, just like the one used as an example by the OP of this SO question: <a href="https://stackoverflow.com/questions/35108125/adding-siblings-to-nodes-in-a-family-tree">Adding siblings to nodes in a family tree</a>.</p>
  <p>I am using Nativescript v8 with angular v13. And being completely new to Nativescript, I am quite lost and couldn't find anything fancy in the documentation.</p>
  <p>What I've come up with so far is a very basic tree as follows. But it's obviously far from being fancy or anything:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;StackLayout orientation="vertical"&gt;
    &lt;StackLayout class="parents-layer"
                 orientation="horizontal"
                 horizontalAlignment="center"&gt;
      &lt;individual [individual]="family.father"&gt;&lt;/individual&gt;
      &lt;individual [individual]="family.mother"&gt;&lt;/individual&gt;
    &lt;/StackLayout&gt;
  
    &lt;Scrollview orientation="horizontal"&gt;
      &lt;StackLayout class="children-layer"
                   orientation="horizontal"
                   horizontalAlignment="center"
                   &gt;
        &lt;individual *ngFor="let sibling of family.siblings" [individual]="sibling"&gt;&lt;/individual&gt;
      &lt;/StackLayout&gt;
    &lt;/Scrollview&gt;
  &lt;/StackLayout&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>individual.component.html is as follows:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;StackLayout class="individual" orientation="vertical"&gt;
      &lt;Label class="name" text="{{individual.name}}" textWrap="true"&gt;&lt;/Label&gt;
      &lt;Label class="name" text="{{individual.surname}}" textWrap="true"&gt;&lt;/Label&gt;
      &lt;Label class="pivot-life-infos" text="{{individual.birth?.date}}, {{individual.death?.date}}"&gt;&lt;/Label&gt;
  &lt;/StackLayout&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I come from an angular html/css background and I am quite comfortable with that, but as I understood, we cannot really use that in Nativescript, am I right?
  If anybody could at least direct me to some literature on the topic of doing customized and complex interfaces, would be very grateful. Cheers</p>