Rendering data collections

Lists are the most common way to display a lot of information: for example, you can display your friend list, messages, and news. Many apps contain lists with data collections, and React Native provides the tools to create these components.

Let’s start with an example. The React Native component you’ll use to render lists is FlatList, which works the same way on iOS and Android. List views accept a data property, which is an array of objects. These objects can have any properties you like, but they do require a key property. If you don’t have a key property, you can pass the keyExtractor prop to the Flatlist component and instruct what to use instead of key. The key property is similar to the requirement for rendering the <li> elements inside of a <ul> element. This helps the list to efficiently render when changes are made to list data.

Let’s implement a basic list now. Here’s the code to render a basic...