ListView

While looking at the documentation for React Native's components, you may note a component named ListView. This is a core component that is meant to display vertically scrolling lists of data.

Here's how ListView works. We will create a data source, fill it up with an array of data blobs, create a ListView component with that array as its data source, and pass it some JSX in its renderRow callback, which will take the data and render a row for each blob within the data source.

On a high level, here is how it looks:

class TasksList extends Component {   constructor (props) {     super (props);     const ds = new ListView.DataSource({       rowHasChanged: (r1, r2) => r1 !== r2 });     this.state = {  dataSource: ds.cloneWithRows(['row 1', 'row 2']) ...

Get React Native By Example now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.