Touchable opacity not working when clicked on the sides

Question

Touchable opacity is not working when clicked on the edges of the button. It only works when clicked the centre of the button. Why is this behaviour happening?

Code

<TouchableOpacity style={{flexDirection:'row',marginTop:20,alignSelf:'center',alignItems:'center',justifyContent: 'center',width:'80%',height:60,backgroundColor:'#140F79',borderRadius:20}}>
    <Icon name="plus" size={15} color="white"   />
    <Text style={{fontFamily:'Montserrat-Bold',margin:10,fontSize:20,color:'white'}} onPress={()=>showAstro(itemdeets)}>Add to Cart</Text>
</TouchableOpacity>

Answer 1

You should be handling onPress on TouchableOpacity instead of Text. It was detecting presses only on Text.

<TouchableOpacity style={{flexDirection:'row',marginTop:20,alignSelf:'center',alignItems:'center',justifyContent: 'center',width:'80%',height:60,backgroundColor:'#140F79',borderRadius:20}} onPress={()=>showAstro(itemdeets)}>
    <Icon name="plus" size={15} color="white"/>
    <Text style={{fontFamily:'Montserrat-Bold',margin:10,fontSize:20,color:'white'}}>Add to Cart</Text>
</TouchableOpacity>