How to select multiple items from list in React Native? Code Example

In order to select multiple items from list in React Native, you need to create a state variable which can hold an array of ids of selected items.

In previous article, we saw how to select single item from list. Here we can extend that functionality and use it to store multiple ids instead of one.

Code Example

import React, { useState } from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity } from "react-native";

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
];

const Item = ({ item, onPress, backgroundColor, textColor }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
    <Text style={[styles.title, textColor]}>{item.title}</Text>
  </TouchableOpacity>
);

const App = () => {
  const [selectedIds, setSelectedIds] = useState([]);

  onItemPress = (itemId) => {
    const tempArr = [...selectedIds];

    if(selectedIds.includes(itemId)) 
      tempArr.splice(selectedIds.indexOf(itemId), 1)
    else
      tempArr.push(itemId)

    setSelectedIds(tempArr)
  }

  const renderItem = ({ item }) => {
    const backgroundColor = selectedIds.includes(item.id) ? "#6e3b6e" : "#fff000";
    const color = selectedIds.includes(item.id) ? 'white' : 'black';

    return (
      <Item
        item={item}
        onPress={() => onItemPress(item.id)}
        backgroundColor={{ backgroundColor }}
        textColor={{ color }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedIds}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 18,
  },
});

export default App;

The output will look like this –

In this code we made very few changes in single selection code example to convert that into multi selection –

1. We changed state variable from holding a single value to an array.
2. Created a separate onItemPress() function to remove unselected item from state variable array and push selected item to it.
3. Everywhere, instead of itemId equality with state variable, we are checking if item id exists in state variable array.

Live Demo

Conclusion

In React Native flatlist, we can select multiple items by storing the metadata of all the selected items into a state variable array and changing their visual.