I tried this way, but this changes color for all items when pressed. How do I change the color of only the one that is pressed? Thanks!

  const interests = [
    { english: 'Swimming', bulgarian2: 'Плуване', id: 1 },
    { english: 'Basketball', bulgarian2: 'Баскетбол', id: 2 },
    { english: 'Running', bulgarian2: 'Бягане', id: 3 },
    { english: 'Shopping', bulgarian2: 'Шопинг', id: 4 },
    { english: 'Drinking', bulgarian2: 'Пиене', id: 5 },

const [pressedItem, setPressedItem] = useState(null);

  const changeColor = useCallback((item) => {
    setPressedItem(item.id);
  }, []);

<FlatGrid data={interests}
 style={tw``}
 spacing={10}
 renderItem={({ item }) => (
   <TouchableWithoutFeedback style={tw``} onPress={() => changeColor(item)}>
   <View style={[{backgroundColor: pressedItem?.id === item.id ? '#8b0000': '#ffc6c4'}, tw`flex justify-center items-center ml-2 -mt-1 rounded-2xl`]}>
     <Text style={tw`text-black`}>{bulgarian && item.bulgarian2}{!bulgarian && item.english}</Text>
     </View>
     </TouchableWithoutFeedback>
 )} />

CodePudding user response：

If your item has some unique identifying ID/name, you can use that to help you track which one is pressed. (You could also just store the full item itself and do object equality but just a simple id/string is more than enough)

const [pressedItem, setPressedItem] = useState(null);

const changeColor = useCallback((item) => {
  setPressedItem(item.id);
}, []);

<FlatList data={data}
 renderItem={({ item }) => (
   <TouchableWithoutFeedback onPress={() => changeColor(item)}>
   <View
     style={backgroundColor: pressedItem?.id === item.id ? '#8b0000': '#ffc6c4'}>
     <Text>{data.text}</Text>
     </View>
     </TouchableWithoutFeedback>
 )} /> 

CodePudding user response：

import { View, Text, TouchableOpacity, Image, TouchableWithoutFeedback, TextInput } from 'react-native';
import React, { useState, useItem, useCallback } from 'react';
import tw from '../lib/tailwind';
import { FlatGrid } from 'react-native-super-grid';
const InterestsScreen = () => {
  const [bulgarian, setBulgarian] = useState(true);
  const changeLanguage = () => {
      setBulgarian(bulgarian => !bulgarian)
  }
  const [pressedItem, setPressedItem] = useState(null);

  const changeColor = useCallback((item) => {
    setPressedItem(item.id);
  }, []);

  // More button
  const [more, setMore] = useState(true);
  const interesi = [
    { english: 'Swimming', bulgarian2: 'Плуване', id: 1, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Basketball', bulgarian2: 'Баскетбол', id: 2, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Running', bulgarian2: 'Бягане', id: 3, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Shopping', bulgarian2: 'Шопинг', id: 4, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Drinking', bulgarian2: 'Пиене', id: 5, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Smoking weed', bulgarian2: 'Пушене на трева', id: 6, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Going out with friends', bulgarian2: 'Излизане с приятели', id: 7, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Studying', bulgarian2: 'Учене', id: 8, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Chemistry', bulgarian2: 'Химия', id: 9, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Biology', bulgarian2: 'Биология', id: 10, first: tw`bg-red-200`, second: tw`bg-green-200` },
    { english: 'Mathematics', bulgarian2: 'Математика', id: 11, first:tw`bg-red-200`, second:tw`bg-green-200`},

  ];
    return (
    <View style={tw`flex-1`}>
  <View style={tw`flex-col h-full w-full justify-between`}>
    <View style={tw`flex-row justify-between h-1/10 top-1/10 w-full`}>
          <Image resizeMode="contain" style={{width: '10%', height: '20%'}} source={require('../Images/back.png')} />
          <TouchableOpacity onPress={changeLanguage}>
      {bulgarian && <Image style={tw`h-10 w-10`} source={require('../Images/bulgarianflag.png')}/>}{!bulgarian && <Image style={tw`w-10 h-10`} source={require('../Images/americanflag.png')}/>}
          </TouchableOpacity>
    </View>
     <View style={tw`h-4/5 w-full`}>
         <FlatGrid data={interesi}
    style={tw``}
    spacing={10}
    renderItem={({ item }) => (
      <TouchableWithoutFeedback onPress={() => changeColor(item)}>
      <View style={ pressedItem?.id === item.id ? item.first : item.second }>
        <Text style={tw`text-black`}>{bulgarian && item.bulgarian2}{!bulgarian && item.english}</Text>
        </View>
        </TouchableWithoutFeedback>
    )} />
            <TouchableOpacity style={tw`flex justify-center items-center ml-2 -mt-1 rounded-2xl bg-red-200`}><Text style={tw`underline font-ComfortaaMed`}>{bulgarian && 'Още интереси'}{!bulgarian && 'More'}</Text></TouchableOpacity>
  </View>
  </View>
  </View>
  )
}

export default InterestsScreen