How it works...

In step 5, we created the data source and added data to the state. The ListView.DataSource class implements performance data processing for the ListView component. The rowHasChanged property is required, and it should be a function to compare the next element. In our case, if the changes are different from the current data, which is represented as (r1, r2) => r1 !== r2, then React Native will know to respond and re-render the UI.

When filling up the data source with data, we need to call the cloneWithRows method and send an array of records.

If we want to add more data, we should call the cloneWithRows method again with an array containing the previous and new data. The data source will make sure to compute the differences and re-render the list as necessary.

In step 7, we define the JSX to render the list. Only two properties are required for the list: the data source we already have from step 6 and renderRow.

The renderRow property accepts a function as a value. This function needs to return the JSX for each row.