NativeScript React — List Views

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.

ListView

We can add a vertically scrolling list with the ListView component.

For example, we can write:

import * as React from "react";
import { ListView } from "react-nativescript";
import { ItemEventData } from "@nativescript/core";

type MyItem = { text: string };

const items: MyItem[] = [
  { text: 'apple' },
  { text: 'orange' },
  { text: 'grape' },
]

const cellFactory = (item: MyItem) => {
  return <label text={item.text} />;
};

const onItemTap = ({ index }: ItemEventData) => {
  const { text }: MyItem = items[index];
  console.log(`Tapped item index ${index}: "${text}".`);
};

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout justifyContent='center' >
          <ListView
            items={items}
            cellFactory={cellFactory}
            onItemTap={onItemTap}
          />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the ListView with the items prop to add the items we want to display.

cellFactory is a function that returns the component with the row.

And onItemTap is the event handler that’s run when we tap on a row.

In the onItemTap function, we get the index of the item that we tapped on.

So we can get the item from that.

Using ListView with Multiple Templates

We can add ListView with multiple templates.

For example, we can write:

import * as React from "react";
import { ListView } from "react-nativescript";

type MyEvenItem = { textEven: string };
type MyOddItem = { textOdd: string };
type MyItem = MyEvenItem | MyOddItem;

const items: MyItem[] = [{ textEven: "apple" }, { textOdd: "orange" }];

function itemTemplateSelector(index): string {
  return index % 2 === 0 ? "even" : "odd";
}

const evenCellFactory = (item: MyEvenItem) => {
  return <label text={item.textEven} color="green" />;
};

const oddCellFactory = (item: MyOddItem) => {
  return <label text={item.textOdd} color="orange" />;
};

const cellFactories = new Map([
  [
    "odd",
    {
      placeholderItem: {
        text: "some odd text"
      },
      cellFactory: oddCellFactory
    }
  ],

[
    "even",
    {
      placeholderItem: {
        text: "some even text"
      },
      cellFactory: evenCellFactory
    }
  ],
]);

const onItemTap = (args) => {
  const index: number = args.index;
  const item: MyItem = items[index];
  const isEven: boolean = itemTemplateSelector(index) === "even";
  const itemText: string = isEven ?
    (item as MyEvenItem).textEven :
    (item as MyOddItem).textOdd;

console.log(`Tapped item index ${index} (${isEven ? "even" : "odd"}): "${itemText}".`);
};

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout justifyContent='center' >
          <ListView
            items={items}
            itemTemplateSelector={itemTemplateSelector}
            cellFactories={cellFactories}
            onItemTap={onItemTap}
          />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We have the type annotations for the different types of items with the type declarations.

Then we have the itemTemplateSelector function to get the type of item displayed.

Next, we have the eventCellFactory and oddCellFactory functions to return the items that we want to display for the rows for each kind of item.

Then we add a Map to render each kind of item.

Next, we have the onItemTap function to log the item we tapped on.

And in Greeting , we have the ListView with the items prop to set the items we display.

itemTemplateSelector sets the template we want to use.

cellFactories sets the functions we want to use to render the rows.

onItemTap lets us render the rows.

Conclusion

We can add list views to add various kinds of data in our mobile app with React NativeScript.