CODEWITHSUNDEEP
react-nativetouchableopacity
Knevagi
Knevagi

Reputation: 157

Touchable opacity not working when clicked on the sides

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>

Upvotes: 0

Views: 1482

Answers (1)

Harsh Kasodariya
Harsh Kasodariya

Reputation: 901

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>

Upvotes: 3

Related Questions