React Native By Example

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']) ...