O'Reilly logo

React Native By Example by Richard Kho

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required