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

Juliette Rapala
Jun 21 · 2 min read
Look familiar?

<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 Original Component

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 <FlatList> 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! 🗑

Delete it ALL!

Let’s simplify our renderRefreshControl() method:

Simple Refresh

Finally, update the rendered component:

Our New FlatList

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

Our Updated 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.

Juliette Rapala

Written by

React & React Native Developer. Building awesome things @Eventric.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade