NativeScript React — Updating List Views and List Pickers

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.

Updating the List of Items in the ListView

We can push more items to the array when we pull down the list view.

For example, we can write:

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

type MyItem = { text: string };

const itemsToLoad: number = 100;
const items: ObservableArray<MyItem> = new ObservableArray(
  [...Array(itemsToLoad).keys()]
    .map((value: number) => ({ text: `Item ${value.toString()}` }))
);

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({ }) {
  const loadMoreRef = React.useRef(true);
  const loadMoreTimeoutRef = React.useRef(undefined);

  React.useEffect(() => {
    clearTimeout(loadMoreTimeoutRef.current!);
  }, []);

  const onLoadMoreItems = (args: ItemEventData) => {
    if (!loadMoreRef.current) {
      console.log(`[onLoadMoreItems] debouncing.`);
      return;
    }

    console.log(`[onLoadMoreItems] permitted.`);

    loadMoreTimeoutRef.current = setTimeout(
      () => {
        const itemsToPush: MyItem[] = [];

        for (let i = items.length; i < + items.length + itemsToLoad; i++) {
          const lastValueIncremented: number = i;

          itemsToPush.push({
            text: `Item ${lastValueIncremented.toString()}`
          });
        }

    items.push(itemsToPush);
        loadMoreRef.current = true;
      },
      750
    );

    loadMoreRef.current = false;
  };

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

The items array is an ObservableArray , which we can listen to changes for.

We have the cellFactory function to return the row we render.

Then in the Greeting component, we have the the useRef hook for storing our timer.

We assign the timer in the onLoadMoreItem function.

When loadMoreRef.current is true , we call itemsToPush.push to load more data.

Then once we created the timer, we set loadMoreRef.current to false so we stop loading the data in the next render cycle.

In the ListView , we add the onLoadMoreItems prop to run the onLoadMoreItems function.

ListPicker

The ListPicker component lets us select a value from a preconfigured list.

For example, we can write:

import * as React from "react";
import { EventData, ListPicker } from "@nativescript/core";

const listOfItems = ['apple', 'orange', 'grape']

export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="Default Page Title" />
        <flexboxLayout justifyContent='center' >
          <listPicker
            items={listOfItems}
            selectedIndex={0}
            onSelectedIndexChange={(args: EventData) => {
              const listPicker: ListPicker = args.object as ListPicker;
              const { selectedIndex } = listPicker;
              const item = listPicker.items[selectedIndex];
              console.log(item)
            }}
          />
        </flexboxLayout>
      </page>
    </frame>
  );
}

We add the listPicker component with the items prop to set the items we can pick.

selectedIndex sets the index of the item that’s selected by default.

onSelectedIndexChange has a function to get the item that’s chosen.

Conclusion

We can add a list picker and load more items as we pull down a list view with React NativeScript