Displaying data using lists

The NativeBase List component is useful when you have a large array of objects that you want to render. The ListItem components can also be selected by the user. Let's look at an example. First, we'll add some states for items that we want to render as a list on the screen:

const [items, setItems] = useState(
  new Array(100)
    .fill(null)
    .map((value, index) => ({ name: `Item ${index + 1}`, selected: false }))
);

The items state is an array of objects with a name to display, and a selected Boolean property that defaults to false. Next, we'll define a helper function that returns an event handler for the list item at a given index, which toggles the selected value:

function toggleSelected(index) {
  return () => {
    const newItems = [...items];
    const item = { ...items[index], selected: !items[index].selected };

    newItems[index] = item;

    setItems(newItems);
  };
}

Once the selected property is updated, we can use the setItems() function...