Categories
NativeScript React

NativeScript React — Flexbox and Grid Layouts

Spread the love

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.

Flexbox Layout with Justify Content

We can set the justifyContent prop of a flexboxLayout to add spacing between the child components.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <flexboxLayout
      flexDirection="column-reverse"
      justifyContent="space-around"
      backgroundColor="#3c495e"
    >
      <label text="first" height={70} backgroundColor="red" />
      <label
        text="second"
        alignSelf="center"
        width={70}
        height={70}
        backgroundColor="green"
      />
      <label
        text="thirdnflex-end"
        alignSelf="flex-end"
        width={70}
        height={70}
        backgroundColor="blue"
      />
      <label text="fourth" height={70} backgroundColor="yellow" />
    </flexboxLayout>
  );
}

space-around adds space around the label s.

column-reverse place items in a column, starting from the bottom.

alignSelf changes the position of items across the main axis.

GridLayout

We can use the GridLayout component to place items in a grid.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <gridLayout
      columns="115, 115"
      rows="115, 115"
    >
      <label text="0,0" row={0} col={0} backgroundColor="red" />
      <label text="0,1" row={0} col={1} backgroundColor="green" />
      <label text="1,0" row={1} col={0} backgroundColor="blue" />
      <label text="1,1" row={1} col={1} backgroundColor="yellow" />
    </gridLayout>
  );
}

We add the label s and set their location with the row and col props.

The columns and rows props have the width of the columns and the height of the rows respectively.

Grid Layout with Star Sizing

We can set the star sizing to allot space proportionally to child elements.

For instance, we can write:

import * as React from "react";

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

The columns prop sets the first column to take 1/3 of the screen’s width and the 2nd column takes 2/3.

And the rows prop sets the first column to take 2/5 of the screen’s width and the 2nd column takes 3/5.

Grid Layout with Fixed and Auto-Sizing

We can mix fixed-size items with automatically sized items.

For instance, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <gridLayout
      columns="80, auto"
      rows="80, 80"
      backgroundColor="#3c495e"
    >
      <label text="0,0" row={0} col={0} backgroundColor="red" />
      <label text="0,1" row={0} col={1} backgroundColor="green" />
      <label text="1,0" row={1} col={0} backgroundColor="blue" />
      <label text="1,1" row={1} col={1} backgroundColor="yellow" />
    </gridLayout>
  );
}

We set the columns prop to 80px and automatically sized to fit the content with auto respectively.

And we set both rows to have 80px height respectively.

Conclusion

We can add flexbox and grid layouts into our mobile app with React NativeScript.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *