How to Replace a React Native ListView Component with a FlatList Component

<ListView> was officially deprecated in React Native 0.48. Sometimes, we ignore deprecation warnings (guilty! 🙈) and don't deal with things until they're officially removed. Do yourself a favor and replace your <ListView>s now. It's easy, will improve your app performance, and will clean up your code ( Read: No. More. DataSources!).

My <ListView> Component (Puppies! 🐶)

Here’s a simple class component named <PuppyLitter> that we will need to update. It takes two props:

1. puppies: An array of objects, one for each puppy in a litter. For example: [{id: 1, name: 'Winky', age: 2}, {id: 2, name: 'Floofy', age: 1} ]
2. getPuppies(): A function that fetches an updated puppies array.

It renders a <ListView> full of <PuppyInfo> components, one for each puppy in the array. A <PuppyInfo> will render things such as the puppy's name and date of birth.

Our Options

A <ListView> can be replaced by any of the following:

1. <FlatList>: A component that renders a list, such as a list of components.
2. <SectionList>: Same as a but with section support (think of a contact list with section headers labeled A, B, C..)
3. A <VirtualizedList>: Simple. Very performant. Great for immutable arrays. Not great for an array of objects with property values that change.

To keep things simple, I’ll replace the <ListView> with a <FlatList>. I have no need for sections. I just want a list of puppies. The list may change though. Sometimes I'm indecisive and like to rename my puppies.

Converting to a <FlatList>

First, let’s change our imports:

// import { ListView, RefreshControl, View } from "react-native"
import { FlatList, RefreshControl, View } from "react-native"

Next, get rid of all of this.

Really. No more DataSources! 🗑

Let’s simplify our renderRefreshControl() method:

Finally, update the rendered component:

Some things to note about <FlatList>

• data replaces your dataStore prop. This is where you pass in your array.
• renderItem replaces renderRow.

IMPORTANT : renderItem passes an item, 🐶, from the data array, [🐶, 🐶, 🐶], within an object. Your puppy will be the value of an item property within this object: {item: 🐶} . If you wish to keep your renderRow() method as is, pass in the item instead.

Another option:

renderItem={({item: puppy}) _=>_ this.renderRow(puppy)}

• Keys have been added to each rendered item by using the keyExtractor prop. We'll use the id of the puppy object.
• The new this.renderRefreshControl() function needs to be bound to the component in onRefresh
• pageSize does not exist here. Use initialNumToRender to communicate home many rows to render in the initial batch (approximately how many will fit in the screen at once)

My Final Component

Doesn’t that look so much better?

It’s way more performant too! 🏁

👋 Hi! I’m Juliette. I work at Eventric as a Software Developer. Come follow me on Twitter at @Juliette.