remove button outline native-base

Question

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?

Answer 1

your button styles are pretty ok, i'd advise this though:

backgroundColor: 'white',
borderRadius: 0,
borderColor: 'transparent', //will make the colour fully opaque, but you could get an even better effect with 'border: none'

i noticed there is a box-shadow property on your button and this is most likely what is creating the border. so you'll need to set your button css as 'box-shadow: none'.

So align your icon in the center you will need to also set your your display as flex and then center your content. So the final button revisions should look like this(plain css)

{
  background-color: white, // could be transparent if you want it to be the same colour as 
the parent background
  border: none //to remove any border properties
  box-shadow: none

  display: flex;
  justify-content: center;
  align-items: center; 


  //NOTE: you might need to set up a width and height for the flex to take effect
}

{
   backgroundColor: 'white' 
   //or backgroundColor: 'transparent'
   borderRadius: 0,
   borderColor: 'white',
   elevation: 0,

   flex : 1,
   flexDirection: "column",
   justifyContent: 'center',
   alignItems: 'center'
}

read up on how to Remove shadows or just use elevation: 0

Answer 2

Maybe try to wrap the Icon and the Text Inside a TouchableOpacity? Or even just the Icon you can wrap that in a TouchableOpacitiy and then you can click it and set onPress Funktions like you would do it to a Button.

Reference: https://reactnative.dev/docs/touchableopacity#docsNav

You can also try other Touchable Wrappers React Native provides.

Answer 3

I would like to suggest you to use TouchableOpacity instead of Button . So you can easily do like this

 <TouchableOpacity style={styles.radioButton} onPress={() => { console.log('hdjwk');}} > <Icon style={styles.icon} name="circle-thin" color="#31C283" size={moderateScale(20)} /> </TouchableOpacity>... radioButton: { backgroundColor: 'white', borderRadius: 0, borderColor: 'white', alignItems: 'center', justifyContent: 'center', },