TouchableOpacity overwriting other buttons

In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?

          return (<TouchableOpacity onPress= {()=> console.log('Hello')}><View style={styles.item} key={item.id}><Thumbnail                style={styles.thumbnail}                source={{                  uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',                }}></Thumbnail><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View><View style={styles.deleteButtonContainer}><Button                  rounded                  style={styles.deleteButton}                  onPress={() => onDeleteContact(item.id)}><Icon name="trash-o" size={moderateScale(20)} color="black" /></Button></View></View></TouchableOpacity>          );        },