How to Highlight and Multi-Select Items in a FlatList Component- React Native

Manipulating items in FlatList

5 min readFeb 4, 2019

You’ve probably heard about a Flatlist component if you are working in React native and handling lists of various client data and details either from the API or form fields. Basically, Flatlist is a core component designed for efficient display of vertically scrolling lists of changing data. It is a component which came into existence in React native after the 0.43 version. It replaced the ListView component and enhanced the ability of developers to deal with lists more easily.

What is Flatlist? And how can we use it for displaying dynamic or static lists?

FlatList is a simple component introduced to remove the limitations of the ListView component. The basic props required to handle a Flatlist are data and renderItem. For simplicity, data is just a plain array, whereas renderItem renders this data array and provides the developer the metadata like index etc.

<FlatList   
  data={this.state.dataSource}
  renderItem={({item}) => <Text>{item.key}</Text>
 />

Using FlatList to display a list of items

If you are new to React Native, I would recommend you go through this article and try to learn the basic structure. Then come back so you can gain a better understanding of FlatList

React Navigation for Beginners (Advanced version-3)

I started working with react native few months back, and I must say it has been an amazing journey from a full-time…

medium.com

Here is the step by step guide on how to use FlatList to fetch data from a dummy API and use it to display a list of items with an image.

The first step is to import the Flatlist component from the react-native library.

import { FlatList } from "react-native";

Now, as we have imported the component, it’s time to use this component in the render function.

<FlatList 
  data={this.state.dataSource}
  ItemSeparatorComponent={this.FlatListItemSeparator}
  renderItem={item => this.renderItem(item)} 
  keyExtractor={item => item.id.toString()}
/>

Points to ponder

data prop takes data from {this.state.dataSource} and provides us with an array of objects.
ItemSeparatorComponent helps in separating the list items when displayed in a list.
The renderItem method is the most important part of a FlatList. It renders the array data in a manner that it can be developed as per data & design requirements.
As we are dealing with an array here, keyExtractor prop provides requires a unique key to handle the list item separately as required.
There is one more essential prop called extraData which I will describe later in this article.

Now you have the basic understanding of how a Flatlist works. It’s time to implement this knowledge and logic in code. As we are using data from API, I would add an indicator to display a loader till the data loads in the back end. It’s time to fetch the data and render it in a list. If you want to know more about fetching the data from the API, you can read this article.

So far we have handled the data and renderItem method. Now it’s time to explore the remaining methods.

FlatListItemSeparator = () => <View style={styles.line} />;

You can provide the styling as per your design and change this style class. If you want to use my version of styling, you can find the code I used at the end of this article.

Now the key extractor method is basically for the unique ID for the items. It’s better to use the exact code above to handle any warnings.

Now comes the fun part

At some point, you’ll need to select multiple items in a list and highlight them. This is especially true in marketing apps or to-do lists where you need to choose from hundreds of items in a list. Here is the code for selecting an item among various other items.

selectItem = data => {
  data.item.isSelect = !data.item.isSelect;
  data.item.selectedClass = data.item.isSelect
   ? styles.selected: styles.list;
 
const index = this.state.dataSource.findIndex(
   item => data.item.id === item.id
);this.state.dataSource[index] = data.item;
 this.setState({
   dataSource: this.state.dataSource
 });
};

What we have here is a screen with selected items highlighted in a bright color, whereas the other items in the list are set to have default styling. In order to understand the logic more clearly, let’s look into the fetch component.

.then(responseJson => {
 responseJson = responseJson.map(item => {
   item.isSelect = false;
   item.selectedClass = styles.list;
   return item;
 });

Here we have assigned item.isSelect as false and selectedClass is assigned a default style class called list. The reasoning behind this is that now each and every item in our list will have these two props, which can be used to fetch the item uniquely and manipulate it. Now in our selectItem() function, we added a rendering condition as follows:

selectItem = data => {
  data.item.isSelect = !data.item.isSelect;
  data.item.selectedClass = data.item.isSelect
   ? styles.selected: styles.list;

Next, when we click on any item in our FlatList, the selectItem function gets rendered and it changes the styling of that item to a highlighted class such as selected class here and rest of the list items have default styling from the class list.

Here comes the important part

FlatList has a prop called extraData that basically re-renders the FlatList whenever there is any change using state. This feature re-renders our selectItem and renderItem function and highlights the selected items. Otherwise, only one item will be selected as the FlatList is rendered at the beginning of the component loading and remains in the same state even if the state and data change state.

`extraData`

This is a marker property for telling the list to re-render (since it implements PureComponent).

extraData={this.state}

All you have to do is add it in the FlatList component and we are done with highlighting multiple items in a list.

Hope this article is helpful to you and enhances your ability to deal with this requirement easily. I am sharing full code snippet here if you want to use it as an example.