NativeScript React — Text View, Time Picker, and Web View

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.

TextView

A textView is a UI component that shows an editable or read-only multiline text container.

For example, we can use it by writing:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <textView text="MultiLine Text" />
        </stackLayout>
      </page>
    </frame>
  );
}

to add some text onto the screen.

The text prop has the text.

We can also add formatted text with:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <textView >
            <formattedString>
              <span text="You can use text attributes such as " />
              <span text="bold, " fontWeight="bold" />
              <span text="italic " fontStyle="italic" />
              <span text="and " />
              <span text="underline." textDecoration="underline" />
            </formattedString>
          </textView>
        </stackLayout>
      </page>
    </frame>
  );
}

We add the formattedString and span components in our text view to add styled text.

We add the styling with various props.

TimePicker

The timePicker component lets us select a time.

For instance, we can use it by writing:

import * as React from "react";

export default function Greeting({ }) {
  const [selectedHour, setSelectedHour] = React.useState(0)
  const [selectedMinute, setSelectedMinute] = React.useState(0)
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <timePicker
            hour={selectedHour}
            minute={selectedMinute}
            onTimeChange={({ value }) => {
              setSelectedHour((value as Date).getHours())
              setSelectedMinute((value as Date).getMinutes())
            }}
          />
        </stackLayout>
      </page>
    </frame>
  );
}

We add the timePicker component with the hour prop to set the hour on the time picker.

minute sets the minute on the time picker.

onTimeChange is a function to set the hour and minute.

We can restrict the values that can be picked with the maxHour , minHour , maxMinute , and minMinute props.

WebView

A webView is a UI component that lets us show web content in our app.

We can write:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <webView src="http://nativescript-vue.org/" />
        </stackLayout>
      </page>
    </frame>
  );
}

to show the content of a given URL.

Also, we can show static HTML:

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <webView src="<div><h1>Some static HTML</h1></div>" />
        </stackLayout>
      </page>
    </frame>
  );
}

And we can display content from a file:

assets/index.html

<p>hello world</p>

components/AppContainer.tsx

import * as React from "react";

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <webView src="~/assets/index.html" />
        </stackLayout>
      </page>
    </frame>
  );
}

Then we see ‘hello world’ displayed.

Conclusion

We can add a web view, text view, and time picker into our app with React NativeScript.