NativeScript React — Nav Buttons, Progress Bar, Scroll View, and Search Box

Photo by Bench Accounting 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.

NavigationButton

We can add a navigationButton component to the actionBar to add a button into the top bar.

For example, we can write:

import * as React from "react";
export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
          <navigationButton
            nodeRole="navigationButton"
            text="Go back"
            android={{
              position: undefined,
              systemIcon: "ic_menu_back"
            }}
            onTap={() => { }}
          />
        </actionBar>
        <flexboxLayout justifyContent='center' >
        </flexboxLayout>
      </page>
    </frame>
  );
}

to add the button.

We add the onTap prop to add a function to run when we tap on the button.

Page