Getting Started with Mobile Development 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.