Реагировать родной TouchableOpacity не работает с иконкой внутри

Question

У меня есть проект, в котором я хочу добавить кнопку со значком "+", но непрозрачная непрозрачность не работает как кнопка, я нажимаю на нее и не создает непрозрачность, и я console.log(), чтобы увидеть, если кнопка работает, и только обратная связь непрозрачности является проблемой, но не работает также.

Это мой рендер:

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