NativeScript React — WrapLayout, Activity Indicator, and Action Bar

Photo by Filip Mroz on Unsplash

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.

WrapLayout

The wrapLayout component is a layout container that lets us position items in rows or columns.

For instance, we can write:

import * as React from "react";
export default function Greeting({ }) {
  return (
    <wrapLayout backgroundColor="#3c495e">
      <label
        text="first"
        width="30%"
        height="30%"
        backgroundColor="red"
      />
      <label
        text="second"
        width="30%"
        height="30%"
        backgroundColor="green"
      />
      <label
        text="third"
        width="30%"
        height="30%"
        backgroundColor="blue"
      />
      <label
        text="fourth"
        width="30%"
        height="30%"
        backgroundColor="yellow"
      />
    </wrapLayout>
  );
}

We add the label s inside the wrapLayout .

Then the 4th label will be displayed in the 2nd row since it overflows the first row.