NativeScript React — Dock and Flexbox 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.

Dock Multiple Children to the Same Side

We can dock multiple child components on the same side.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <dockLayout stretchLastChild backgroundColor="#3c495e">
      <label text="left 1" dock="left" width={40} backgroundColor="red" />
      <label text="left 2" dock="left" width={40} backgroundColor="green" />
      <label text="left 3" dock="left" width={40} backgroundColor="blue" />
      <label text="last child" backgroundColor="yellow" />
    </dockLayout>
  );
}

We set dock to left on the first 3 label s, so we have them display side by side.

FlexboxLayout

We can add a flexboxLayout component to arrange child components with flexbox CSS properties.

For example, we can write:

import * as React from "react";

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

We add the label s and they’ll be displayed side by side.

Also, we can set the flexDirection to 'column' so that we stack the child components:

import * as React from "react";

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

We set the alignItems prop to align the items the way we want in the flexboxLayout container:

import * as React from "react";

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

We set alignItems to flex-start to put the label s side by side in the top left corner.

Also, we can set the order prop by writing:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <flexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
      <label text="first" order={2} width={70} height={70} backgroundColor="red" />
      <label text="second" order={3} width={70} height={70} backgroundColor="green" />
      <label text="third" order={1} width={70} height={70} backgroundColor="blue" />
    </flexboxLayout>
  );
}

This way, we switch the order of the label s.

Rows can be wrapped if we set the flexWrap prop to 'wrap' :

import * as React from "react";

export default function Greeting({ }) {
  return (
    <flexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
      <label text="first" width='30%' backgroundColor="red" />
      <label text="second" width='30%' backgroundColor="green" />
      <label text="third" width='30%' backgroundColor="blue" />
      <label text="fourth" width='30%' backgroundColor="yellow" />
    </flexboxLayout>
  );
}

We set the width of each label to 30%, so the last one will show in the 2nd row.

Conclusion

We can add dock and flex layouts into our mobile app with NativeScript React.