title: remove button outline native-base
body: <p>I am trying to wrap an icon in a button. Like this:</p>
  <pre><code>            &lt;Button
                style={styles.radioButton}
                onPress={() =&gt; {
                  console.log('hdjwk');
                }}&gt;
                &lt;Icon
                  style={styles.icon}
                  name=&quot;circle-thin&quot;
                  color=&quot;#31C283&quot;
                  size={moderateScale(20)}
                /&gt;
              &lt;/Button&gt;
  
  ...
    radioButton: {
      backgroundColor: 'white',
      borderRadius: 0,
      borderColor: 'white',
    },
    icon: {
      paddingTop: moderateScale(12),
    },
  </code></pre>
  <p>However, when I wrap my icon with the button, the icon is pushed downwards and an outline starts to appear even though I have set the borderRadius as 0. How can I fix this such that it looks natural and there's no distinction between the background screen and the icon?</p>
  <p><a href="https://i.stack.imgur.com/yPTsA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yPTsA.png" alt="enter image description here" /></a></p>