react native TouchableOpacity not working with icon inside

I have a project in which I want to add a button with the icon "+", but the touchable opacity is not working as a button, I click on it, and doesn't makes the opacity, and I console.log(), to see if the button is working and only the opacity feedback is the issue, but is not working as well.

This is my render:

render() {
    if (this.props.onNetwork)
        return (<Loader />);

    const navigate = this.props.navigation.navigate;
    const { solicitacoes } = this.props.solicitacoesStore;

    return (
        <View style={styles.container}>

            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <H2 style={styles.header2}>PROJETOS</H2>
              <TouchableOpacity onPress={() => { console.log('puff') }}>
                <Icon style={styles.icon} name='add' />
              </TouchableOpacity>
            </View>
            <Divider color='black'/>

            <ListaItens solicitacoes={solicitacoes} onPress={ this.goToDescritivo }/>
        </View>
    )
}

    const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingHorizontal: metrics.width * 0.05,
    paddingTop: metrics.height * 0.03
},

icon: {
    fontSize: fonts.superbig * 1.5,
    flex:1
},
divider: {
    paddingHorizontal: 10
},
header2: {
    fontWeight: 'bold',
    marginVertical: 5,
    flex: 1
},
});