React Native onPress button in FlatList

Question

Maybe it is a noob problem but I can not make an onPress for FlatList in react native made of an items of array in the separate file popularData and categoriesData. In popularData I have an array with information of it is selected or not boolean type, I just want to get this info of the array, and put it to onPress method to change the selected to true or false if its pressed and change it backgroundColor to another, and further to fetch that data and get it to some variable. Can you please help me ? I've tried with handleClick, navigation but still can't reach that what I want These are the codes: File 1 with the info in array:

const popularData = [
    {
        id: '1',
        image: require('../images/pizza1.png'),
        title: 'Salami Pizza',
        weight: '600 gr',
        rating: '5.0',
        cena: '26,99 zł',
        rozmiarNazwa: 'Średnia',
        rozmiarNumer: '42 cm',
        ciasto: 'Cienkie',
        czasDostawy: '~30 min',
        skladniki: [

            {
                id: '0',
                name: 'Sos pomidorowy',
                image: require('../images/skladniki/sosczerwony.png'),
                selected: true,
            },

            {
                id: '1',
                name: 'Ser',
                image: require('../images/skladniki/ser.png'),
                selected: true,
            },

            {
                id: '2',
                name: 'Salami',
                image: require('../images/skladniki/salamenapoli.png'),
                selected: true,
            },

            {
                id: '3',
                name: 'Oliwki zielone',
                image: require('../images/skladniki/zieloneoliwki.png'),
                selected: true,
            },

            {
                id: '5',
                name: 'Pieczarki',
                image: require('../images/skladniki/pieczarki.png'),
                selected: false,
            },

            {
                id: '6',
                name: 'Tabasco Habanero',
                image: require('../images/skladniki/tabascobordowe.png'),
                selected: false,
            },
        ],
    },
export default popularData;

ANOTHER FILE the app screen

const renderSkladnikiItem = ({ item }) => {
    return (
        
      <View style={[styles.skladnikiItemWrapper, {
          backgroundColor: item.selected ? colors.glowny : colors.tlo,
          marginLeft: item.id === '0' ? 20 : 5, 
      } ]}>
        <Image source={item.image} style={styles.skladnikImage} />
      </View>
    );
    
  };

{/* Skladniki */}
      <View style={styles.skladnikiWrapper}>
        <Text style={styles.skladnikiTytul}>Składniki</Text>
        <View style={styles.sklanikiListaWrapper}>
          <FlatList
            data={item.skladniki}
            renderItem={renderSkladnikiItem}
            keyExtractor={(item) => item.id}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            decelerationRate="normal"
          />
        </View>
      </View>

 

Answer 1

You can enclose your View in TouchableOpacity or TouchbaleHighlight to apply onPress on.

const renderSkladnikiItem = ({ item }) => {
    return (
        <TouchableHighlight
      key={item.key}
      onPress={() => onPress(item)}
        >
      <View style={[styles.skladnikiItemWrapper, {
          backgroundColor: item.selected ? colors.glowny : colors.tlo,
          marginLeft: item.id === '0' ? 20 : 5, 
      } ]}>
        <Image source={item.image} style={styles.skladnikImage} />      
       </View>
      </TouchableHighlight>
    );
    
  };