NOTE! You are browsing legacy documentation. For latest visit docs.nativescript.org.

NativeScript Core

Layouts

NativeScript provides a recursive layout system that sizes and positions views on the screen. Layout is the base class for all views that provide positioning of child elements. We can use the various layout containers to position elements. They evaluate the base properties of view such as width, height, minWidth and alignments, and expose additional properties for positioning child views (such as padding). Depending on the way they arrange the children, there are six types of layouts - AbsoluteLayout, DockLayout, GridLayout, StackLayout, FlexboxLayout and WrapLayout.

Absolute Layout

The AbsoluteLayout is the simplest layout in NativeScript. It uses absolute left-top (x/y) coordinates to position its children and the place of each of them depends on its Top, Left, Width and Height properties. The AbsoluteLayout will not enforce any layout constraints on its elements and will not resize them at runtime when its size changes.

Basic usage and definition of AbsoluteLayout and the properties left and top to position its children views within the layout. 

<AbsoluteLayout>
    <Button text="Left: 10, Top: 5" left="10" top="5"/>
    <Button text="Left: 30, Top: 80" left="30" top="80"/>
    <Button text="Left: 150, Top: 25" left="150" top="25"/>
    <Button text="Left: 70, Top: 150" left="70" top="150"/>
</AbsoluteLayout>

Importing the module from tns-core-modules/ui/layouts/absolute-layout. 

const AbsoluteLayout = require("tns-core-modules/ui/layouts/absolute-layout").AbsoluteLayout;

import { AbsoluteLayout } from "tns-core-modules/ui/layouts/absolute-layout";

Dynamic creating of AbsoluteLayout via code-behind. 

const absoluteLayout = new AbsoluteLayout();

absoluteLayout.addChild(button1);
absoluteLayout.addChild(button2);
absoluteLayout.addChild(button3);
absoluteLayout.addChild(button4);

AbsoluteLayout.setLeft(button1, 10);
AbsoluteLayout.setTop(button1, 5);
AbsoluteLayout.setLeft(button2, 30);
AbsoluteLayout.setTop(button2, 80);
AbsoluteLayout.setLeft(button3, 150);
AbsoluteLayout.setTop(button3, 25);
AbsoluteLayout.setLeft(button4, 70);
AbsoluteLayout.setTop(button4, 150);

const absoluteLayout = new AbsoluteLayout();

absoluteLayout.addChild(button1);
absoluteLayout.addChild(button2);
absoluteLayout.addChild(button3);
absoluteLayout.addChild(button4);

AbsoluteLayout.setLeft(button1, 10);
AbsoluteLayout.setTop(button1, 5);
AbsoluteLayout.setLeft(button2, 30);
AbsoluteLayout.setTop(button2, 80);
AbsoluteLayout.setLeft(button3, 150);
AbsoluteLayout.setTop(button3, 25);
AbsoluteLayout.setLeft(button4, 70);
AbsoluteLayout.setTop(button4, 150);

Dock Layout

The DockLayout is a layout that arranges its children at its own outer edges (top, bottom, left and right or center). To define the docking side of a child element, use its dock property. To dock a child element to the center of the DockLayout, it must be the last child of the DockLayout and the stretchLastChild property of the DockLayout must be set to true. 

<DockLayout stretchLastChild="true">
    <Button dock="Left" text="left"/>
    <Button dock="Right" text="right"/>
    <Button dock="Bottom" text="bottom"/>
    <Button dock="Top" text="top"/>
    <Button text="Fill"/>
</DockLayout>

Importing the module from tns-core-modules/ui/layouts/dock-layout. 

const DockLayout = require("tns-core-modules/ui/layouts/dock-layout").DockLayout;

import { DockLayout } from "tns-core-modules/ui/layouts/dock-layout";

Dynamic creating of DockLayout via code-behind. 

const myDockLayout = new DockLayout();
myDockLayout.addChild(button1);
myDockLayout.addChild(button2);
myDockLayout.addChild(button3);
myDockLayout.addChild(button4);
myDockLayout.addChild(button5);
myDockLayout.stretchLastChild = true;

// const DockLayout = require("tns-core-modules/ui/layouts/dock-layout").DockLayout;
DockLayout.setDock(button1, "left");
DockLayout.setDock(button2, "right");
DockLayout.setDock(button3, "top");
DockLayout.setDock(button4, "bottom");

const myDockLayout = new DockLayout();
myDockLayout.addChild(button1);
myDockLayout.addChild(button2);
myDockLayout.addChild(button3);
myDockLayout.addChild(button4);
myDockLayout.addChild(button5);
myDockLayout.stretchLastChild = true;

DockLayout.setDock(button1, "left");
DockLayout.setDock(button2, "right");
DockLayout.setDock(button3, "top");
DockLayout.setDock(button4, "bottom");

Flexbox Layout

The FlexboxLayout is the NativeScript's abstraction of the known Flexbox from the Web development.

Directions

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. 

<!-- Reverse the natural flow of items -->
<FlexboxLayout flexDirection="row-reverse">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>
<FlexboxLayout flexDirection="column-reverse">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>
<FlexboxLayout flexDirection="row">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>
<FlexboxLayout flexDirection="column">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="1" backgroundColor="#EEEEEE"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="2" backgroundColor="#DDDDDD"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="3" backgroundColor="#CCCCCC"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="4" backgroundColor="#BBBBBB"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="5" backgroundColor="#AAAAAA"/>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" text="6" backgroundColor="#999999"/>
</FlexboxLayout>

Wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.

Child related properties

  • flex-wrap-before: Non-spec property controlling item wrapping, setting to true on flexbox child will force it to wrap on a new line

wrap

multi-line / left to right in ltr; right to left in rtl

<FlexboxLayout flexWrap="wrap" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <!-- Use flexWrapBefore to control explicit line wrapping -->
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <!-- Use flexWrapBefore to control explicit line wrapping -->
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

wrap-reverse

multi-line / right to left in ltr; left to right in rtl

<!-- flexWrap: wrap-reverse; alignContent: flex-start -->
<Label text="wrap-reverse" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap-reverse" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

Justify Content

This defines the alignment along the main axis. It helps to distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

flex-end

Items are packed toward end line

<!-- justifyContent: flex-end; flexWrap: wrap  -->
<Label text="justifyContent: flex-end" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap" justifyContent="flex-end" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

space-between

Items are evenly distributed in the line; first item is on the start line, last item on the end line 

<!-- justifyContent: space-between; flexWrap: wrap  -->
<Label text="justifyContent: space-between" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap" justifyContent="space-between" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

space-around

Items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. 

<!-- justifyContent: space-around; flexWrap: wrap -->
<Label text="justifyContent: space-around" class="h4 p-t-15 p-l-15 p-r-15" textWrap="true"/>
<FlexboxLayout flexWrap="wrap" justifyContent="space-around" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label flexWrapBefore="true" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="Nullam" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T:Question" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S:Medium" borderRadius="5" backgroundColor="#FFD900"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="duplicate" borderRadius="5" backgroundColor="#A6BBC8"/>
</FlexboxLayout>

Multiple settings example

<!-- flexDirection; column; flexWrap: wrap-reverse; alignContent: flex-start + items w/ alignSelf options -->
<Label text="flexDirection; column; flexWrap: wrap-reverse; alignContent: flex-start + items w/ alignSelf options" class="h4 p-t-15 p-l-15 p-r-15"
    textWrap="true"/>
<FlexboxLayout flexDirection="column" flexWrap="nowrap" alignContent="flex-start" class="p-15" backgroundColor="lightgray">
    <Label class="h3 p-15" text="Gihub issue labels:"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822" color="white"/>
    <Label alignSelf="auto" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Feature" borderRadius="5" backgroundColor="green"
        color="white"/>
    <Label alignSelf="center" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="3 - In Progress" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label alignSelf="stretch" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: Ullamcorper" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label alignSelf="flex-end" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Vulputate" borderRadius="5" backgroundColor="green"
        color="white"/>
    <Label alignSelf="flex-start" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="2 - Egestas magna" borderRadius="5" backgroundColor="#A6BBC8"/>
    <Label alignSelf="baseline" class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="S: High" borderRadius="5" backgroundColor="#F93822"
        color="white"/>
    <Label class="p-5 m-l-15 m-r-15 m-b-15 text-center" text="T: Phasellus" borderRadius="5" backgroundColor="green" color="white"/>
</FlexboxLayout>

Flexbox (order and shrink)

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). 

<FlexboxLayout flexDirection="row" class="p-15" color="white">
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#965251" text="Item"/>
    <!-- Set flexGrow to 1 accomodate into any extra space -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Flex-Grow 1"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#F69256" text="Item"/>
</FlexboxLayout>

Flex order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. 

<FlexboxLayout flexDirection="row" class="p-15" color="white">
    <!-- Control the order in which elements appear in the flex container -->
    <Label order="3" class="p-15 text-center font-weight-bold" backgroundColor="#965251" text="First"/>
    <Label order="2" class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Second"/>
    <Label order="1" class="p-15 text-center font-weight-bold" backgroundColor="#F69256" text="Third"/>
</FlexboxLayout>

Flex shrink

This defines the ability for a flex item to shrink if necessary 

<FlexboxLayout flexDirection="row" class="p-15" color="white" width="300">
    <!-- flexShrink this defines the ability for a flex item to shrink if necessary. Default shrink = 1 -->
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
    <Label flexShrink="0" class="p-15 text-center font-weight-bold" backgroundColor="#F69256" text="Shrink 0"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
    <Label class="p-15 text-center font-weight-bold" backgroundColor="#d2b29b" text="Shrink 1"/>
</FlexboxLayout>

Grid Layout

The GridLayout is a layout that arranges its child elements in a table structure of rows and columns. A cell can contain multiple child elements. Each one can span over multiple rows and columns, and even overlap the others. The GridLayout has one column and one row by default. To add additional columns and rows, you have to specify column definition items (separated by commas) to the columns property and row definition items (separated by commas) to the rows property of the GridLayout. The width of a column and the height of a row can be specified as an absolute amount of device independent pixels (e.g. rows="100, 50") of the available space or automatically (e.g. rows="*, *, auto).

Note: While percentage values are not supported for creating rows and columns, you can use the start sign (*) to take space based on relative percentage. For example, let's assume that we have the following setup rows="*, 2*, 2*". The GridLayout will take all the available space (meaning the space given by its parent or the space set via the height property), will create three rows and will divide the space to 5 equal parts (as we have a total of 5*). The first row will take one part (*), while the second and the third rows will take two parts (2*) meaning they will be twice as big compared to the first row. The setup would be equal to setting 20%, 40%, 40%. 

<GridLayout rows="*, *, *, *" columns="100, *, auto">
    <Button text="1" row="0" col="0" />
    <Button text="2" row="0" col="1" />
    <Button text="3" row="0" rowSpan="2" col="2" />
    <Button text="4" row="1" rowSpan="2" col="0" colSpan="2" />
    <Button text="5" row="2" col="2" />
    <Button text="6" row="3" col="0" colSpan="3" />
</GridLayout>

Importing the module from tns-core-modules/ui/layouts/grid-layout. 

import { GridLayout, ItemSpec } from "tns-core-modules/ui/layouts/grid-layout";

Creating GridLayout programmatically.

const myGrid = new GridLayout();
// Add views to grid layout
myGrid.addChild(button1);
myGrid.addChild(button2);
myGrid.addChild(button3);
myGrid.addChild(button4);
myGrid.addChild(button5);
myGrid.addChild(button6);

// Set row property on views
GridLayout.setRow(button1, 0);
GridLayout.setRow(button2, 0);
GridLayout.setRow(button3, 0);
GridLayout.setRow(button4, 1);
GridLayout.setRow(button5, 2);
GridLayout.setRow(button6, 3);

// Set rowSpan property on views
GridLayout.setRowSpan(button3, 2);
GridLayout.setRowSpan(button4, 2);

// Set column property on views
GridLayout.setColumn(button1, 0);
GridLayout.setColumn(button2, 1);
GridLayout.setColumn(button3, 2);
GridLayout.setColumn(button4, 0);
GridLayout.setColumn(button5, 2);
GridLayout.setColumn(button6, 0);

// Set colSpan property on views
GridLayout.setColumnSpan(button4, 2);
GridLayout.setColumnSpan(button6, 3);

// Create columns specification (e.g. columns=""100, *, auto"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstColumn = new ItemSpec(100, "pixel");
const secondColumn = new ItemSpec(1, "star");
const thirdColumn = new ItemSpec(1, "auto");

// Create rows specification (e.g. rows=""*, *, *, *"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstRow = new ItemSpec(1, "star");
const secondRow = new ItemSpec(1, "star");
const thirdRow = new ItemSpec(1, "star");
const forthRowq = new ItemSpec(1, "star");

myGrid.addColumn(firstColumn);
myGrid.addColumn(secondColumn);
myGrid.addColumn(thirdColumn);

myGrid.addRow(firstRow);
myGrid.addRow(secondRow);
myGrid.addRow(thirdRow);
myGrid.addRow(forthRowq);

const myGrid = new GridLayout();
// Add views to grid layout
myGrid.addChild(button1);
myGrid.addChild(button2);
myGrid.addChild(button3);
myGrid.addChild(button4);
myGrid.addChild(button5);
myGrid.addChild(button6);

// Set row property on views
GridLayout.setRow(button1, 0);
GridLayout.setRow(button2, 0);
GridLayout.setRow(button3, 0);
GridLayout.setRow(button4, 1);
GridLayout.setRow(button5, 2);
GridLayout.setRow(button6, 3);

// Set rowSpan property on views
GridLayout.setRowSpan(button3, 2);
GridLayout.setRowSpan(button4, 2);

// Set column property on views
GridLayout.setColumn(button1, 0);
GridLayout.setColumn(button2, 1);
GridLayout.setColumn(button3, 2);
GridLayout.setColumn(button4, 0);
GridLayout.setColumn(button5, 2);
GridLayout.setColumn(button6, 0);

// Set colSpan property on views
GridLayout.setColumnSpan(button4, 2);
GridLayout.setColumnSpan(button6, 3);

// Create columns specification (e.g. columns=""100, *, auto"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstColumn = new ItemSpec(100, "pixel");
const secondColumn = new ItemSpec(1, "star");
const thirdColumn = new ItemSpec(1, "auto");

// Create rows specification (e.g. rows=""*, *, *, *"")
// ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
const firstRow = new ItemSpec(1, "star");
const secondRow = new ItemSpec(1, "star");
const thirdRow = new ItemSpec(1, "star");
const forthRowq = new ItemSpec(1, "star");

myGrid.addColumn(firstColumn);
myGrid.addColumn(secondColumn);
myGrid.addColumn(thirdColumn);

myGrid.addRow(firstRow);
myGrid.addRow(secondRow);
myGrid.addRow(thirdRow);
myGrid.addRow(forthRowq);

Stack Layout

The StackLayout arranges the elements one next to the other either vertically (from top to bottom) or horizontally (from left to right). The direction depends on the value of the orientation property (accepts horizontal or vertical values). 

<StackLayout orientation="vertical">
    <Button text="Button 1" backgroundColor="#0099CC" width="100" margin="8"></Button>
    <Button text="Button 2" backgroundColor="#CCFFFF" width="100" margin="8"></Button>
    <Button text="Button 3" backgroundColor="#8C489F" width="100" margin="8"></Button>
</StackLayout>

Importing the module from tns-core-modules/ui/layouts/stack-layout. 

const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;

import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";

Creating StackLayout programmatically.

const myStack = new StackLayout();
// Set the orientation property
myStack.orientation = "horizontal";

// Add views to stack layout
myStack.addChild(button1);
myStack.addChild(button2);
myStack.addChild(button3);

const myStack = new StackLayout();
// Set the orientation property
myStack.orientation = "horizontal";

// Add views to stack layout
myStack.addChild(button1);
myStack.addChild(button2);
myStack.addChild(button3);

Wrap Layout

The WrapLayout is similar to the StackLayout, but it does not just stack all child elements to one column/row, it wraps them to new columns/rows if no space is left. The WrapLayout is often used with items of the same size, but this is not a requirement. 

<WrapLayout>
    <Button text="1" width="150" height="100" backgroundColor="#0099CC"></Button>
    <Button text="2" width="100" height="150" backgroundColor="#FFFF66"></Button>
    <Button text="3" width="200" height="120" backgroundColor="#8C489F"></Button>
    <Button text="4" width="100" height="50"  backgroundColor="#CCFFFF"></Button>
    <Button text="5" width="250" height="100" backgroundColor="#AA0078"></Button>
</WrapLayout>

Importing the module from tns-core-modules/ui/layouts/wrap-layout. 

const WrapLayout = require("tns-core-modules/ui/layouts/wrap-layout").WrapLayout;

import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";

Creating WrapLayout programmatically.

const myWrap = new WrapLayout();

// Add views to wrap layout
myWrap.addChild(button1);
myWrap.addChild(button2);
myWrap.addChild(button3);
myWrap.addChild(button4);
myWrap.addChild(button5);
Ask the community