How can I toggle text items in my flatList?

Question

I want to toggle text items in a flatList, here is what I have so far . The problem is I don't know how to toggle off the previous selection. How can I modify my expo snack example to do that? To be clear, I would like one item to be selected at a time , not multiple, at the moment it is multiple. It's important that my FlatListItem remains separate(in it's own component) from the FlatList container. In my actual project this is the setup, because my FlatListItem contains many if statements, and styles. So to keep things neat I have separated the two, just in case you are wondering why the two are separate.

import * as React from 'react';
import { FlatList, Text, View, StyleSheet, Pressable } from 'react-native';
import FlatListItem from './components/FlatListItem'



export default function App() {
  
const renderItem = ({item}) => <FlatListItem text={item.text} />
    
const data = [
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 0
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 1
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 2
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 3
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 4
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 5
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 6
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 7
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 8
  },
  {
    text:"Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
    key: 9
  },
]

  return (
    <View style={styles.container}>
      <FlatList
      horizontal={false}
      data={data}
      renderItem={renderItem}
      contentContainerStyle={{ marginHorizontal: 10 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
 
});

import * as React from 'react';
import {View, Text, Pressable} from 'react-native';

const flatListItem = (props) => {
const [selectText, setSelectText] = React.useState(false)

const selectionStyle = (isTextSelected) => {
      if (isTextSelected) {
        return { backgroundColor: "red", marginVertical: 10 };
      } else {
        return { marginVertical: 10};
      }
    };

return <Pressable onPress={() => selectText ? setSelectText(false) : setSelectText(true)} >
<Text style={selectionStyle(selectText)}>{props.text}</Text>
</Pressable>
}

export default flatListItem

Answer 1

Since you want it one selection you need to manage the state on parent level, where flat list renders, as we can not rely on the flat list item state for selection. I updated your code a bit, this should work

import * as React from 'react';
import { FlatList, Text, View, StyleSheet, Pressable } from 'react-native';
import FlatListItem from './components/FlatListItem'



export default function App() {
  const [selectedIndex, setSelectedIndex] = React.useState(null);//keep track of selection
  const renderItem = ({ item }) => <FlatListItem selected={selectedIndex === index.key} onSelect={onSelectItem} text={item.text} id={item.key} />
/* We will toggle the selection here */
  const onSelectItem = id => {
    if (id === selectedIndex) return setSelectedIndex(null)
    setSelectedIndex(id)
  }
  const data = [
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 0
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 1
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 2
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 3
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 4
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 5
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 6
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 7
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 8
    },
    {
      text: "Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah ",
      key: 9
    },
  ]

  return (
    <View style={styles.container}>
      <FlatList
        horizontal={false}
        data={data}
        renderItem={renderItem}
        contentContainerStyle={{ marginHorizontal: 10 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },

});

import * as React from 'react';
import { View, Text, Pressable } from 'react-native';

const flatListItem = (props) => {

  const selectionStyle = (isTextSelected) => {
    if (isTextSelected) {
      return { backgroundColor: "red", marginVertical: 10 };
    } else {
      return { marginVertical: 10 };
    }
  };

  return <Pressable onPress={() => props.onSelect(props.id)} >
    <Text style={selectionStyle(props.selected)}>{props.text}</Text>
  </Pressable>
}

export default flatListItem