reactjsreact-nativeonpresstouchablehighlight

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.

Solution

    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>