Rendering data collections

Let's start with a basic example. The React Native component you'll use to render lists is ListView, which works the same way on iOS and Android. List views take a data source property, which must be a ListView.DataSource instance. Don't worry; it's really just a wrapper around an array in most cases. The reason that the ListView component expects this type of data source is so that it can perform efficient rendering. Lists can be long and updating them frequently can cause performance issues.

So, let's implement a basic list now, shall we? Here's the code to render a basic 100-item list:

import React from 'react'; 
import { 
  AppRegistry, 
  Text, 
  View, 
  ListView, 
} from 'react-native'; 
 
import styles from './styles'; 
 
// You always need a comparator function that's 
// used to determine whether or not a row has 
// changed. Even in simple cases like this, where 
// strict inequality is...