Ripple Effect on Buttons about react-native-material-design HOT 6 OPEN

+1 on this.

from react-native-material-design.

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.

from react-native-material-design.

@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 facebook/react-native#5337

from react-native-material-design.

This is now waiting on facebook/react-native#5376 and whenever it's in a release.

from react-native-material-design.

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?

from react-native-material-design.

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>

from react-native-material-design.