TouchableOpacity And OnPress For Icons

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 wrappin

Solution 1:

I think the icon is overwriting the touchable component. There is no height and width provided to the touchable opacity. So it has hidden behind the icon. Provide some height and width in the styles of the TouchableOpacity. It should work.

Add some background color to the TouchableOpacity while debugging, so that you will get a clear view on the TouchableOpacity layout.

Solution 2:

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",
  },
});