TouchableOpacity and onPress for Icons

Question

I am trying to use onPress for icons. For this, I thought of using TouchableOpacity but nothing happens when I click on the icon. I don't see any console logs.

I also tried wrapping the icon in an additional View but that doesn't work either.

const criteriaList = [
    "Nur Frauen",
    "Freunde Zweiten Grades",
]


export const FilterCriteriaList: React.FunctionComponent = () => {
  return (
      <View style={styles.container}>
          <View style={styles.horizontalLine} />
          {criteriaList.map((item: string) => (
        <View key={item}>
            <View style={styles.criteriaRow}>
                <TouchableOpacity style={styles.iconContainer} onPress={()=>console.log('dhjksds')}>
            <Icon style={styles.icon} name="circle-thin" color="#31C283" size={moderateScale(20)}/>
            </TouchableOpacity>
              <Text style={styles.text}>{item}</Text>
              </View>
              <View style={styles.horizontalLine} />
         </View>
      ))}
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  criteriaRow: {
      flexDirection: 'row',
      paddingLeft: moderateScale(25),
  },
  horizontalLine: {
    width: '100%',
    height: moderateScale(1),
    backgroundColor: '#E0E0E0',
  },
  text: {
    paddingLeft: moderateScale(15),
    paddingBottom: moderateScale(15),
    marginBottom: moderateScale(15),
    paddingTop: moderateScale(15),
  },
  icon: {
      paddingTop: moderateScale(12),
  },
  iconContainer: {
      backgroundColor: 'red',
  }
});

It looks like this and I click in the middle of the circle icon.

What else can I try?

Answer 1

Try this... woking for me.. I've just changed console to alert and some css

return (
    <View style={styles.container}>
      <View style={styles.horizontalLine} />
      {criteriaList.map((item, index) => (
        <View key={index}>
          <View style={styles.criteriaRow}>
            <TouchableOpacity
              style={styles.iconContainer}
              onPress={() => alert("ff")}
            >
              <Icon
            style={styles.icon}
            name="circle-thin"
            color="#31C283"
            size={20}
          />
            </TouchableOpacity>
            <Text style={styles.text}>{item}</Text>
          </View>
          <View style={styles.horizontalLine} />
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  criteriaRow: {
    flexDirection: "row",
    padding: 25,
    alignItems: "center",
  },
  horizontalLine: {
    width: "100%",
    height: 1,
    backgroundColor: "#E0E0E0",
  },
  text: {
    paddingLeft: 15,
    paddingBottom: 15,
    marginBottom: 15,
    paddingTop: 15,
  },
  icon: {
    padding: 12,
  },
  iconContainer: {
    backgroundColor: "red",
  },
});