How to Replace a React Native ListView Component with a FlatList Component
Tags: reactnative, react, android, ios
Published: 2019-06-24 20:12:06

---
title: How to Replace a React Native ListView Component with a FlatList Component
published: true
tags: #reactnative, #react, #android, #ios
canonical_url: https://medium.com/@jrapala/how-to-replace-a-react-native-listview-component-with-a-flatlist-component-2fe8eaf2e296
---

![](https://cdn-images-1.medium.com/max/736/1*hkyRPx90XRl61s4Ti5oVBg.png)<figcaption>Look familiar?</figcaption>

`<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. `DataSource`s!).

### 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.

{% gist https://gist.github.com/jrapala/cb234feebd59e0aaffd5c5657a14bfeb.js %}

### Our Options

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

1. [`<FlatList>`](https://facebook.github.io/react-native/docs/flatlist): A component that renders a list, such as a list of components.
2. [`<SectionList>`](https://facebook.github.io/react-native/docs/sectionlist): Same as a <FlatList> but with section support (think of a contact list with section headers labeled A, B, C..)
3. A [`<VirtualizedList>`](https://facebook.github.io/react-native/docs/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:

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

Next, get rid of all of this.   
Really. No more `DataSource`s! 🗑

{% gist https://gist.github.com/jrapala/fb6748d1f1a242cef3d05daaff92b199 %}

Let’s simplify our `renderRefreshControl()` method:

{% gist https://gist.github.com/jrapala/27188869217cda74be1014b3fc9b0b4f %}

Finally, update the rendered component:

{% gist https://gist.github.com/jrapala/86cf999e885e57c51bf10f3c37739820 %}

#### 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:

```javascript
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

{% gist https://gist.github.com/jrapala/c1397359dd0d66400caa7b17a6e77375 %}

Doesn’t that look so much better?  
It’s way more performant too! 🏁

---

👋 Hi! I’m [Juliette](http://www.julietterapala.com). I work at [Eventric](https://www.eventric.com/) as a Software Developer. Come follow me on Twitter at [@Juliette](https://twitter.com/JulietteR).