Ripple effect leeks in android

[alexandredumat]

On android the ripple effect is a square that leeks out rounded buttons.
It should be solved simply by adding a borderlessRipple={ true } somewhere.

[rohinrohin]

Is there a fix for this yet? I am also facing the same issue.

[mastermoo]

Please see issue #146

I will try your suggestion once I have more time. Alternatively, the solution is really that easy, maybe someone can send a PR?!

[alexandredumat]

ok same issue as #146 sorry
I didn't look into your code but something like that should do the trick :

<View style={ roundedButton }>
     <TouchableNativeFeedback
          onPress={ onPressAction }
          background={ TouchableNativeFeedback.Ripple(rippleColor, TRUE) }
      >
          <Ico source={ source } style={ icoStyle }/>
       </TouchableNativeFeedback>
</View>

There might be more views inside to help align elements but the background={ TouchableNativeFeedback.Ripple(rippleColor, TRUE) } should do the trick

[alexandredumat]

I was thinking, when patching this issue it would be nice to add a rippleColor property for each button.

[mastermoo]

holy shit, i just tried this solution, but the result looks horrible. Try it out yourself, then you'll see what i mean.

[poupryc]

This issue is not fixed, the ripple effect look like a square, not a circle

[SudoPlz]

I pushed a Pull Request to fix this, (and a few other issues I had trouble with),
the idea is to pass the fixNativeFeedbackRadius prop, and the Ripple should no longer leak.

Also while at it, I added nativeFeedbackRippleColor prop.

[mastermoo]

merged. see v2.7.0

[likeconan]

Hello, the ripple leak still exists in v2.7.1.
Could you please help fix it, thanks.

[SudoPlz]

@likeconan have you set fixNativeFeedbackRadius to true?

[likeconan]

@SudoPlz I tried and there is another problem like below:

[SudoPlz]

@likeconan that's not a problem, it's just shadows not working the same way on Android as they do on iOS.

Set hideShadow to true and you should be good to go.