Javatpoint Logo
Javatpoint Logo

React Native ListView

React Native ListView is a view component which contains the group of items and displays in a vertical scrollable list. ListView.DataSource is a minimal API to create a list view. It populates a simple array of data blobs, and instantiate a ListView component with data source and a renderRow callback. The renderRow takes a blob from data array and returns a renderable component.

React Native ListView Example 1

Let's create an example of ListView component. In this example, we create a data source, and fill it with an array of data blobs. Create a ListView component using that array as its data source, and pass it in its renderRow callback. The renderRow callback takes the data and renders a row for each blob within the data source.

Output:

React Native ListView

In the above code, in the constructor, we create an instance of ListViewDataSource. The ListViewDataSource is a parameter and accept an argument that can contain any of these four:

  • getRowData(dataBlob, sectionID, rowID)
  • getSectionHeaderData(dataBlob, sectionID)
  • rowHasChanged(previousRowData, nextRowData)
  • sectionHeaderHasChanged(previousSectionData, nextSectionData)

Add separation and perform action on ListView items

Separation is added to provide a separate block and for better display of list items. The props renderSeparator of ListView is used to add separate between the items (data) of ListView.

Additionally, implement onPress props to the Text for performing an action on clicking the list items. Here, we generate an alert message and display the list items on which a user click.

Output:

React Native ListView React Native ListView

Note: The ListView component has deprecated. To implement the list component use new list components FlatList or SectionList.






Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA