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

Manipulating items in FlatList

Sudhir Kumar
Feb 4, 2019 · 5 min read
Image for post
Image for post
Photo by Max Nelson on Unsplash

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.

Image for post
Image for post

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>
/>

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

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()}
/>
  1. data prop takes data from {this.state.dataSource} and provides us with an array of objects.
  2. ItemSeparatorComponent helps in separating the list items when displayed in a list.
  3. 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.
  4. As we are dealing with an array here, keyExtractor prop provides requires a unique key to handle the list item separately as required.
  5. 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.

Image for post
Image for post
List rendered without ItemSeparator

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

FlatListItemSeparator = () => <View style={styles.line} />;
Image for post
Image for post
List rendered with ItemSeparator

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.

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
});
};
Image for post
Image for post
Selected Items in a list

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.

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.

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.

Image for post
Image for post
Screen with selected and unselected items

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store