Ripple Effect on Buttons

[dazziola]

Great work on this, looks fantastic.

The ripple effect on the buttons seems quite slow. Is this using the native Android button styling to create that effect? To achieve visual feedback on the button you have to press and hold for < 1 second. If you tap the button you get no visual cue.

It's not a huge problem merely a styling issue it seems.

[avishayil]

+1 on this.

[Ehesp]

Hey, so the Ripple uses TouchableNativeFeedback if your device supports it, but then defaults to a custom implementation if it doesn't.

On the button it's implemented here: https://github.com/react-native-material-design/react-native-material-design/blob/master/lib/Button.js#L216

Need to figure out how to deal with it, if it's even possible with RNs solution.

[Ehesp]

@dazziola @avishayil Just had a play around with this, and it should be possible, however I'm getting a React Native issue which is blocking it. But my plan is to do this:

1. Add delayPressIn to the touch to 1. This instantly fires the Ripple.
2. Add delayPressOut to the touch with a 300ms delay (or whatever it is in Android).
3. Move the onPress handler into the onPressOut function.

Problem I've having is that delayPressOut doesn't actually seem to work... see issue https://github.com/facebook/react-native/issues/5337

[Ehesp]

This is now waiting on https://github.com/facebook/react-native/pull/5376 and whenever it's in a release.

[efkan]

I've tried to improve the Polyfill Ripple animation here #46 for old Android versions.

On the other hand, -if I'm not mistaken- the above issue appears as released here. But it's not look good on my emulator.

Has anybody tested out it on Android 6.0?

[akash-cp]

I have tested on android 6 and its very slow. My code:

<TouchableNativeFeedback
                     delayPressIn={1}
                     background={TouchableNativeFeedback.Ripple('#777')}
                       onPress={() => this._navigateTo(item.route)}>
</TouchableNativeFeedback>