CODEWITHSUNDEEP
javascriptcssreactjstypescriptreact-native
user13101751
user13101751

Reputation:

remove button outline native-base

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?

enter image description here

Upvotes: 4

Views: 2985

Answers (3)

TripleM
TripleM

Reputation: 1252

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',
  },

Upvotes: 0

Yoshy
Yoshy

Reputation: 182

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

Upvotes: 2

yesIamFaded
yesIamFaded

Reputation: 2068

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.

Upvotes: 0

Related Questions