APSL/react-native-button

Solution for hiding a disabled button

Gys opened this issue · 4 comments

Gys commented

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 commented

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

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

Gys commented

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).

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