javascript - TouchableOpacity e onPress para Ícones

Estou tentando usar onPress para ícones. Para isso, pensei em usar TouchableOpacity, mas nada acontece quando clico no ícone. Não vejo nenhum log no console.

Eu também tentei envolver o ícone em uma View adicional, mas isso também não funciona.

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

Ele parece assim e eu clico no meio do ícone do círculo.

O que mais eu posso tentar?

Resposta #1

Eu acho que o ícone está sobrescrevendo o componente touchable. Não há altura e largura fornecidas para o TouchableOpacity. Então ele está escondido atrás do ícone. Forneça alguma altura e largura nos estilos do TouchableOpacity. Isso deve funcionar.

Adicione alguma cor de fundo ao TouchableOpacity enquanto estiver depurando, para que você tenha uma visão clara do layout do TouchableOpacity.

Resposta #2

Tente isto... está funcionando para mim... Eu apenas mudei o console para alert e algum 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",
  },
});