ripple effect renders wrong in buttons with borderRadius

[fermmm]

Environment

react-native-paper: 2.16.0

Description

Apply a borderRadious to a button and the ripple effect will render outside the button:

I could not find a way to apply a border radius to the ripple effect

[Ashkan-Oliaie]

I'm still having this issue on TouchableRipple on 3.8.0

[NathanC]

@Trancever This issue still seems to be present. I set the border radius to 0, but the ripple is still the same rounded shape. Is there any workaround?

[NathanC]

@iyadthayyil I looked through your associated PR that fixed this. I'm using 5.0.0-rc.6, and it's not working-- it appears your changes are still live though. Do you think something regressed or the way border radius works on TouchableRipple changed?

[NathanC]

For anyone seeing this, there's a new related issue in the latest v5 release candidate: #3387

It's inverted though, the ripple is showing inside the button (not filling it), as opposed to this issue where the ripple was outside of the button. Very similar though.

[BojanHribernik]

I am still having this issue with react-native-paper@5.10.3

Screencast.from.2023-08-30.00-25-17.webm

This is my component. It works with borderRadius, but not with borderTopLeftRadius etc ...

import { StyleSheet, Text } from 'react-native'
import { Button, ButtonProps } from 'react-native-paper'

export type PrimaryButtonProps = Omit<ButtonProps, 'mode'>

export function PrimaryButton({
  children,
  style,
  ...props
}: PrimaryButtonProps) {
  return (
    <Button
      {...props}
      mode="contained"
      rippleColor={'red'}
      contentStyle={styles.buttonContent}
      style={[styles.button, style]}
    >
      <Text style={styles.text}>{children}</Text>
    </Button>
  )
}

const styles = StyleSheet.create({
  button: {
    minWidth: 200,
    //borderRadius: 0,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 15,
  },
  buttonContent: {
    //borderRadius: 0,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 0,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 15,
  },
  text: {
    color: 'white',
    textTransform: 'uppercase',
    fontWeight: '700',
  },
})