I work with the 'react-native-super-grid' library and I trying to figure out how to do the following 2 situations:

1. Displays a different icon for each item in the grid for example : the PinIcon will be for the 'qq' and the CatIcon will be for the 'ww'.

2. How to make the items clickable with 'pressable' or 'TouchableOpacity'

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { FlatGrid } from 'react-native-super-grid';
import PinIcon from '../src/assets/PinIcon.svg';
import CatIcon from '../src/assets/CatIcon.svg';

  const HomeComponent = () => {
  const [items, setItems] = React.useState([
    { name: 'qq', code: 'white' },
    { name: 'ww', code: 'white' },
    { name: `ee`, code: 'white' },
    { name: 'rr', code: 'white' },
    { name: 'tt', code: 'white' },
    { name: 'yy', code: 'white' },
    { name: 'uu', code: 'white' },
  ]);

  return (
    <FlatGrid
      itemDimension={130}
      data={items}
      style={styles.gridView}
      spacing={10}
      renderItem={({ item }) => (
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
          <PinIcon />
          <CatIcon />
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
    />
  );
};

CodePudding user response：

Set the icon to items as icon props initially and to make the icon touchable, wrap icon with Pressable or TouchableOpacity and pass the function in onPress props like below

...
  const [items, setItems] = React.useState([
    { name: 'qq', code: 'white', icon: <PinIcon/> },
    { name: 'ww', code: 'white', icon: <CatIcon/> },
    { name: `ee`, code: 'white', icon: <DogIcon/> },
    ...
  ]);
...
  renderItem={({ item, index }) => (
    <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
      <Pressable onPress={()=>onPressFunctionHere()}>
      {item.icon}
      </Pressable>
      <Text style={styles.itemName}>{item.name}</Text>
      <Text style={styles.itemCode}>{item.code}</Text>
    </View>
  )}