How to select single item from list in React Native? Code Example

First of all we need to know what “selecting an item” means. It comprises of two properties –

1. Change of visual of selected item from non-selected items.
2. Keeping track of selected item by storing it’s metadata in some variable.

In this article we will write a code to select an item from flatlist in React Native.

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 [selectedId, setSelectedId] = useState(null);

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

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

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        extraData={selectedId}
      />
    </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 –

As I mentioned in the beginning of the article, a selected item can be implemented by a strategy for visual and storing metadata.

To make items pressable for selection, we are using <TouchableOpacity> component. On the press of an item, we are storing it’s id using a state variable, selectedId and change background & text colors.

If you are creating a single choice list where user can select a list item and later you could pass the value to next page, then you can simply use the state variable value.

Another important thing to notice is that we are using extraData props in FlatList at line 48. This holds any value like array, string, number etc. The purpose is to indicate flatlist that a re-render is required.

FlatList is a PureComponent which needs to know when to re-render. Since our data is not changing with selection, so flatlist won’t re-render. Hence extraData props is provided. If the value of this props changes, the list re-renders. That’s why we are passing the selected element’s id to it.

Live Demo

Conclusion

So we saw how a single item selection works in flatlist in React Native. In the next article we will use this technique to select multiple items in the list.