NativeScript React — Grid and Stack Layouts

React is an easy to use framework for building front end apps.

NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.

In this article, we’ll look at how to build an app with NativeScript React.

Grid Layout with Mixed Sizing and Merged Cells

We can merge cells with the colSpan and rowSpan props.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <gridLayout
      columns="40, auto, *"
      rows="40, auto, *"
      backgroundColor="#3c495e"
    >
      <label text="0,0" row={0} col={0} backgroundColor="red" />
      <label text="0,1" row={0} col={1} colSpan={2} backgroundColor="green" />
      <label text="1,0" row={1} col={0} rowSpan={2} backgroundColor="blue" />
      <label text="1,1" row={1} col={1} backgroundColor="yellow" />
      <label text="1,2" row={1} col={2} backgroundColor="purple" />
      <label text="2,1" row={2} col={1} backgroundColor="orange" />
      <label text="2,2" row={2} col={2} backgroundColor="white" />
    </gridLayout>
  );
}

We set the colSpan prop to make the label span 2 columns.

And we set the rowSpan to make the label span 2 rows.

StackLayout

The stackLayout component lets us add items that are stacked one on top of another.

For instance, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <stackLayout backgroundColor="#3c495e">
      <label text="first" height={70} backgroundColor="red" />
      <label text="second" height={70} backgroundColor="green" />
      <label text="third" height={70} backgroundColor="blue" />
    </stackLayout>
  );
}

We put the label s in the stackLayout so that they’re stacked on top of each other.

Horizontal Stacking

We can set the orientation to 'horizontal' so that we make the items display side by side.

To do this, we write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <stackLayout orientation="horizontal" backgroundColor="#3c495e">
      <label text="first" height={70} backgroundColor="red" />
      <label text="second" height={70} backgroundColor="green" />
      <label text="third" height={70} backgroundColor="blue" />
    </stackLayout>
  );
}

to do this.

Stack Layout with Horizontally Aligned Children

Child components can be horizontally aligned.

For instance, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <stackLayout backgroundColor="#3c495e">
      <label
        text="left"
        horizontalAlignment="left"
        width={33}
        height={70}
        backgroundColor="red"
      />
      <label
        text="center"
        horizontalAlignment="center"
        width={33}
        height={70}
        backgroundColor="green"
      />
      <label
        text="right"
        horizontalAlignment="right"
        width={33}
        height={70}
        backgroundColor="blue"
      />
      <label
        text="stretch"
        horizontalAlignment="stretch"
        height={70}
        backgroundColor="yellow"
      />
    </stackLayout>
  );
}

We set the horizontalAlignment prop to align them label to where we want them.

Setting the prop to 'stretch' makes it span the whole width of the screen.

Horizontal Stack Layout with Vertically Aligned Children

We can vertically align child items in the stackLayout .

To do this, we write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <stackLayout orientation="horizontal" backgroundColor="#3c495e">
      <label
        text="top"
        verticalAlignment="top"
        width={70}
        height={33}
        backgroundColor="red"
      />
      <label
        text="middle"
        verticalAlignment="middle"
        width={70}
        height={33}
        backgroundColor="green"
      />
      <label
        text="bottom"
        verticalAlignment="bottom"
        width={70}
        height={33}
        backgroundColor="blue"
      />
      <label
        text="stretch"
        verticalAlignment="stretch"
        width={70}
        backgroundColor="yellow" />
    </stackLayout>
  );
}

to set the orientation to 'horizontal' to make the label s align vertically.

verticalAlignment is set to align the item to the position we want.

When it’s set to 'stretch' , it’ll span the whole height of the screen.

Conclusion

We can add a grid and stack layout into our mobile app with React NativeScript.