Opacity layer not following borderRadius on button press

[mohitkc71]

Hi Team,

we are using version "react-native-elements": "^0.19.1"
But when I set borderRadius to the button then border radius is not applied to the opacity layer when pressing the button.

I have read #328, #535, #1035, #581, #1102, however I cannot make it work..

Please suggest.

[xavier-villelegier]

Hey @mohitkc71, could you update to v1.1.0, and tell us if you still have this issue ?

If so, could you reproduce it on https://snack.expo.io/ ?

[danielidt]

@xavier-villelegier I'm not OP but im on 1.1.0 and still seeing the same issue despite following the "workarounds" suggested in the other threads. This is the snack

https://snack.expo.io/ryt4eDWcN

just a bare button with a borderRadius applied to buttonStyle, containerStyle, and the button itself.
I'm using it in my project as a themed button, but the issue is present when applying the style directly to the button as shown in the snack.

[Cono52]

a fix could be to go into the node_modules/react-native-elements/src/buttons/Buttons.js
and flip the false to true as done in this commit 4c0a2cf

It's weird that this is set to false 2 months ago when one of the suggestions was to copy that conditional statement
i.e

if (Platform.Version >= 21) {
  attributes.background = TouchableNativeFeedback.Ripple(
    'ThemeAttrAndroid',
     true
  );
.....

into your own code and alter it there

[iRoachie]

Closing as inactive. Feel free to message or create a new issue if this is still a concern.

[rshchpkn]

Hi @iRoachie, The issue is still present in version 1.1.0. The bug appears only for Android.
Are there any suggestions regarding this issue? Thanks in advance
Button code:

<Button
  title={'Testing Button'}
  titleStyle={{
    fontSize: FontSizeVariables.semiSmall,
    fontFamily: FontFamilyVariables.medium,
    letterSpacing: 0.5,
    color: ColorVariables.textWhite,
  }}
  containerStyle={{ borderRadius: 25 }}
  buttonStyle={{
    borderRadius: 25,
    height: 50,
    paddingHorizontal: 25,
    backgroundColor: ColorVariables.orange,
  }}
/>

Screenshot:

[iRoachie]

It's an upstream issue in react-native. See https://github.com/react-native-training/react-native-elements/issues/1847

[Shikartoos]

I added overflow:'hidden' to the containerStyle and it seems to work for me. It might be a workaround for the moment.