CODEWITHSUNDEEP
reactjsreact-nativeonpresstouchablehighlight
Hossain
Hossain

Reputation: 37

How to add styles in touchableHighlight

I am trying to add style to the touchableHighlight. Whenever I click on the screen, it selects the margin as well. Why is this happening and how may I get rid of it?

Please check out the black box in the image

Also, there is an Icon inside the black box. I want to change the color of that image when I touch it. How may I add that style in touchableHighlight?

enter image description here

Perdon me if this is very silly. I am new to react native.

Upvotes: 0

Views: 1147

Answers (1)

Michael Bahl
Michael Bahl

Reputation: 3649

  1. Use margin instead of padding

  2. You need to use an SVG and set the icon color of the SVG

      <TouchableHighlight
   onPress={()=>{}}
   activeOpacity={0.5}
   underlayColor="#ff00ff"
   style={{margin:50, width: 200, height: 50, justifyContent: 'center', alignItems: 'center'}}>
   <Text>Test</Text>
 </TouchableHighlight>

Upvotes: 2

Related Questions