I am trying to wrap an icon in a button. Like this:
<Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}><Icon style={styles.icon} name="circle-thin" color="#31C283" size={moderateScale(20)} /></Button>... radioButton: { backgroundColor: 'white', borderRadius: 0, borderColor: 'white', }, icon: { paddingTop: moderateScale(12), },
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?