Opacity layer not following borderRadius on button press

Hi guys,

Sorry I’m opening this again, I know this issue has appeared a lot here, I have read #328, #535, #1035, #581, however I cannot make it work…

Description

1. I have a button with borderRadius

<Button 
        title='LOG IN'
        style={{ borderRadius: 50 }}
        borderRadius={25}
        buttonStyle={{ 
               width: 260,
               backgroundColor: '#58D7B5',
               borderWidth: 1,
               borderColor: '#fff',
               alignSelf: 'center',
               margin: 16,
               elevation: 0, 
               borderRadius: 25 }}
         containerViewStyle={{borderRadius:25}}
         // containerStyle={ {elevation: 0, borderRadius: 25}}
 />

1. I am expecting to see the border radius applied to the opacity layer when pressing the button.
2. But is just a rectangle instead.

I am using “react-native-elements”: “^1.0.0-beta4”

Reproduction Steps and Sample Code

Snack example:

https://snack.expo.io/HyUL9T3if

Any help would be much appreciate 🙏 Thanks!

[monkeykingblack]

@xavier-villelegier i use 1.0.0-beta5 now, and this still appear me

[xavier-villelegier]

Hey @carmenchapa,

You’re right, in the v1.0.0-beta4 we forgot to handle this case in the new refactored Button.

In the meantime, you can use this as a workaround:

let background
if (Platform.Version >= 21) {
  background = TouchableNativeFeedback.Ripple(
    'ThemeAttrAndroid',
    true
  );
} else {
  background = TouchableNativeFeedback.SelectableBackground();
}

<Button
  background={background}
  title='LOG IN'
  buttonStyle={{ 
    backgroundColor: '#58D7B5',
    borderRadius: 25,
    elevation: 0,
  }}
  containerStyle={{
    width: 260,
    borderWidth: 1,
    borderColor: '#fff',
    margin: 16,
    borderRadius: 25,
  }}
/>

Here is a snack example