Touchable opacity not working when clicked on the sides-CodePudding

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>

CodePudding user response：

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>