Open dazziola opened 8 years ago
+1 on this.
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.
@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:
delayPressIn
to the touch to 1
. This instantly fires the Ripple.delayPressOut
to the touch with a 300
ms delay (or whatever it is in Android).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
This is now waiting on https://github.com/facebook/react-native/pull/5376 and whenever it's in a release.
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?
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>
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.