Category: NativeScript React

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.

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.

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.

Install NativeScript

We start by install the nativescript Node package globally by running:

npm install -g nativescript

Create the App Project

Once we installed the package, we create the project by writing:

tns create my-blank-react --react

Then we can run tns run android to run the project after going into the folder.

This should be done as an admin user. Then we can select Configure for Local Build and let it install all the packages that are required to run the project.

If Genymotion is started, then you should see the project.

First App

Once we create the project, then we should see the AppContainer.tsx file.

It is the entry point component for our app.

And it has the following code:

import * as React from "react";
import { Dialogs } from "@nativescript/core";

export default function Greeting({ }) {
  return (
    <gridLayout
      width={"100%"}
      height={"100%"}
      rows={"*, auto, auto, *"}
      columns={"*, 200, *"}
    >
      <label
        row={1}
        col={1}
        className="info"
        textAlignment={"center"}
        fontSize={24}
      >
        <formattedString>
          <span className="fas" text="&#xf135;" />
          <span> Hello World!</span>
        </formattedString>
      </label>
      <button
        row={2}
        col={1}
        fontSize={24}
        textAlignment={"center"}
        onTap={() => Dialogs.alert("Tap received!")}
      >
        Tap me
      </button>
    </gridLayout>
  );
}

We see a button to open a dialog.

The dialog is displayed with the Dialogs.alert method.

AbsoluteLayout

We can add position components on a page with absoluteLayout .

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <absoluteLayout backgroundColor="#3c495e">
      <label text="10,10" left={10} top={10} width={100} height={100} backgroundColor="red" />
      <label text="120,10" left={120} top={10} width={100} height={100} backgroundColor="green" />
      <label text="10,120" left={10} top={120} width={100} height={100} backgroundColor="blue" />
      <label text="120,120" left={120} top={120} width={100} height={100} backgroundColor="yellow" />
    </absoluteLayout>
  );
}

We add the absoluteLayout component to add our layout.

Then we add the label components inside it to show boxes with the given background color, width, and height.

left and top sets the x and y coordinates of the top left corner of the components.

We can add components that overlap with absoluteLayout .

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <absoluteLayout backgroundColor="#3c495e">
      <label text="10,10" left={10} top={10} width={100} height={100} backgroundColor="red" />
      <label text="30,40" left={30} top={40} width={100} height={100} backgroundColor="yellow" />
    </absoluteLayout>
  );
}

We set the left and top props so that the label s overlap each other.

DockLayout

The dockLayout lets us add a layout where the components snap to the left, right, top, or bottom of the screen.

For example, we can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <dockLayout stretchLastChild={false} backgroundColor="#3c495e">
      <label text="left" dock="left" width={40} backgroundColor="red" />
      <label text="top" dock="top" height={40} backgroundColor="green" />
      <label text="right" dock="right" width={40} backgroundColor="blue" />
      <label text="bottom" dock="bottom" height={40} backgroundColor="yellow" />
    </dockLayout>
  );
}

to add label s to the edges of the screen.

The dock prop sets the location that the label s are docked to.

stretchLastChild lets us stretch the last child component to the nearest components if it’s true .

If we set stretchLastChild to true :

import * as React from "react";

export default function Greeting({ }) {
  return (
    <dockLayout stretchLastChild backgroundColor="#3c495e">
      <label text="left" dock="left" width={40} backgroundColor="red" />
      <label text="top" dock="top" height={40} backgroundColor="green" />
      <label text="right" dock="right" width={40} backgroundColor="blue" />
      <label text="bottom" dock="bottom" backgroundColor="yellow" />
    </dockLayout>
  );
}

Then the ‘bottom’ label is stretched to meet the other label s.

Conclusion

We can create a simple mobile app with various layouts in our mobile app with NativeScript React.