Improve Android button appearances (closes #849, #896)

[kherock]

This implements proper behavior for Material Design flat buttons and icon toggles - these buttons ripple as soon as the touch starts. Conveniently, React Native supports masking these ripples to the parent View's border radius. This also fixes a breakage introduced in #808 that closes #896.

This does not completely fix the ripples for regular buttons with rounded corners. However, once React Native actually supports masking bounded ripples (likely if something like react/react-native#6515 is reimplemented) they should be fixed here as well.

This also fixes a bug where if you click on a child of the button, the ripple origin is misplaced (see the gif of the before screen with the block button).

I have a demo repo if you want to see what I've tested so far.

Before:

Proposed:

I've also brought most the button stylings up to MD specs. The way ripple color is determined is as follows:

• Use variables.androidRippleColorDark by default.
• Use the background or androidRippleColor attributes above everything.
• If the transparent prop is true, use the backgroundColor with alpha 0.26 from the styles prop
• If the button is not transparent, use the light ripple color (variables.androidRippleColor) if the contrast ratio between backgroundColor and rgb(0, 0, 0) is less than 3:1.

I still need to test that this doesn't dramatically impact layouts and styles on iOS. I'll update with that here soon.

[kherock]

Ok, I just made a few adjustments and now iOS looks pretty good. I managed to keep it mostly the same.

iOS before:

after:

[shivrajkumar]

@rockmacaca Looks great, but this breaks some of the others components. Like Bordered/Outline Button, left padding of Left Header Button seems more...

[shivrajkumar]

Do check you patch with demo app on NativeBase https://github.com/GeekyAnts/NativeBase-KitchenSink

[shivrajkumar]

Closing this due to breaking changes.
You can resolve the above mentioned issues and submit a new PR

[ludalex]

This is great. I had to remove rippleEffect since with the current implementation the button press feedback feels sluggish. Is there a chance you can reopen the PR with the current master?

[SupriyaKalghatgi]

@ludalex You can ask @specialkk to do so

[kherock]

@ludalex I haven't been very active with the project I was using this for recently, there are also just too many adjustments that have to be done that are potentially breaking changes so I probably won't be doing it any time soon.

Btw, the reason it might feel sluggish is because Android has two separate ripple types: solid buttons show a highlight and then ripple on release, whereas transparent buttons use "borderless" ripples that ripple on the initial touch. Both usually feel ok as long as the highlighted color is clearly visible.