react-native-button icon indicating copy to clipboard operation
react-native-button copied to clipboard

Solution for hiding a disabled button

Open Gys opened this issue 8 years ago • 4 comments

Maybe this is useful to others as well. Its a style that I use to hide buttons that are disabled. I use it for disabledStyle. The hidden button will still take a little space though. Not sure why.

    buttonDisabled: {
      width: 1, 
      height: 1,
      margin: 0, 
      borderColor: 'rgba(0,0,0,0)', // transparent
      backgroundColor: 'rgba(0,0,0,0)'
    }

Gys avatar Jan 13 '17 11:01 Gys

Adding bottomMargin: -2 solves the problem with spacing. The button will be completely gone.

Gys avatar Jan 13 '17 12:01 Gys

@Gys i dont think negative margins work on android, so you might be careful about using that if you are targeting both platforms

stonepreston avatar Jan 14 '17 02:01 stonepreston

Thanks for the warning. So I just now tested it on a android 6.0 phone and it worked as expected (so exactly as on ios latest).

Gys avatar Jan 14 '17 11:01 Gys

Well, your button take a little space because you set its dimensions to 1x1. Proper way to hide it would be:

display: 'none',
borderWidth: 0 // if necessary

or, at last

position: absolute,
top: -1000

andretf avatar Oct 06 '18 17:10 andretf