[Android] TouchableNativeFeedback's ripples aren't affected by borderRadius when useForeground is true

Related issue: https://github.com/facebook/react-native/issues/6480 – this was resolved with useForeground={false}, but borderRadius of parent is not respected when useForeground={true}.

Have you read the Bugs section of the Contributing to React Native Guide?

Yup!

Environment

1. react-native -v: 0.45.1
2. node -v: 7.9.0
3. npm -v: 4.6.1
4. yarn --version (if you use Yarn): 0.24.5

Then, specify:

1. Target Platform (e.g. iOS, Android): Android
2. Development Operating System (e.g. macOS Sierra, Windows 10): macOS
3. Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Unrelated

Steps to Reproduce

See the demo / description below.

Expected Behavior

When using TouchableNativeFeedback with useForeground, I expect the ripple to be clipped when there are rounded corners on the parent container. This is how it works if useForeground={false}.

Actual Behavior

The ripple is not clipped when useForeground is enabled and the parent has a borderRadius.

Reproducible Demo

https://snack.expo.io/BkLe1uSEZ

[waquidvp]

There is a work around in React Native v 0.51 and v 0.50/ Expo v 24.0 and v 23.0, you can set overflow: 'hidden' on the parent view of the <TouchableNativeFeedback >. You can see the example here: https://snack.expo.io/H17_STXXz

[rumax]

+1 The issue is still actual. Can be reproduced with

“react-native”: “^0.47.1”

Meantime the useForeground={false} works as expected.

And according to the documentation useForeground is :

This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.