NativeScript React — HTML, Images, and Text

Photo by Olivier Collet 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.

HtmlView

We can add the HtmlView component to display static HTML content.

For instance, we can write:

import * as React from "react";
export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout justifyContent='center' >
          <htmlView html="<div><h1>hello world</h1></div>" />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We set the html prop to the HTML string we want to render.

Then it’ll be displayed in our app.

Image

We can display images with the image component.

For instance, we can write:

import * as React from "react";
export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout…