TouchableRipple effect not working when using non-transparent view inside it on Android

Hey! I’m not sure if this exactly is a bug, but I’ve been trying to crawl through documentation and library source code to figure out the cause without success. At least there is not any mention that this is the expected behavior.

See comments below for further investigation

Current behaviour

Ripple effect does not work when using Surface component. If Surface is commented out from the following code snippet, and Text is the first child element of TouchableRipple, ripple effect works as expected.

Expected behaviour

Ripple effect should work with Surface too.

Code sample

Here is a snack:

https://snack.expo.io/SBjEtFbhc

When creating the Snack, I realized that the Snack is actually working as expected in the web review. However, if you run it on an Android device (tried on my OnePlus 6T with Android 10) it’s not working. So this might actually be issue related to Android.

One funny thing that I also noticed is that if you uncomment the margin thing from the snack, a ripple effect is actually appearing where the margin is but not on the content itself. Weird 😄

What have you tried

Extensive debugging, basically everything that I’ve come up with. It seems that the Surface component is the problem here, but I have no idea why.

Your Environment

software	version
ios or android	Android 10
react-native	0.62.2
react-native-paper	^3.10.1
node	v12.16.2
npm or yarn	yarn
expo sdk	not used

[Nabeeldev20]

Why this is closed. Have the same issue.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.