How to add styles in touchableHighlight

Question

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?

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?

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

Answer 1

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>