ripple effect leaking at corners as if Pressable button has a borderRadius

Nothing worked for me, So I solved this myself.

• pressable should be wrapped in a view
• view must have margin not padding
• border radius must be on view not on pressable
• pressable component must have padding not margin
• then add ripple by android_ripple={{color: 'black', borderless: true}} to pressable.

<View style={styles.buttonView}>              <Pressable                onPress={() => {}}                android_ripple={{color: 'black', borderless: true}}                style={styles.loginButton}>                <Text style={styles.buttonText}>Login</Text>              </Pressable>            </View>

buttonView: {    alignSelf: 'stretch',    justifyContent: 'center',    borderRadius: 10,    elevation: 25,    margin: 10,  },  loginButton: {    height: 50,    backgroundColor: '#0f4c75',    padding: 10,    alignItems: 'center',    justifyContent: 'center',  },  buttonText: {    color: 'white',    fontSize: 16,    textTransform: 'uppercase',    fontFamily: 'sans-serif-light',  },

You can wrap pressable into View and pass borderRadius:10 and overflow:'hidden' to View style.

<View style={{ borderRadius: 10, overflow: 'hidden' }}>    <Pressable      android_ripple={{ color: 'red', borderless: false, }}      style={{ backgroundColor: 'blue', borderRadius: 10 }}>      <Text style={{ alignSelf: 'center' }}>Button</Text>    </Pressable>  </View>

Turns out the other solution don't cover all edge cases... I needed to wrap the view 2 times to manage elevation and shadow on iOS. (The button is in absolute position also).

export const PNFloatingButton = ({ children, ...props }) => {    return (        <View style={thisStyles.shadow}>            <View style={thisStyles.parentContainer}>                <Pressable style={thisStyles.button}                           android_ripple={{ borderless: false, color: "#0F0" }}>                    <Text>Button</Text>                </PNPressable>            </View>        </View>    )}const thisStyles = StyleSheet.create({    shadow: {        shadowColor: '#000',        shadowOffset: { width: 0, height: 2 },        shadowOpacity: 0.4,        shadowRadius: 4,        width: 56,        height: 56,        position: 'absolute',        elevation: 2,        right: 0,        bottom: 0,    },    button: {        padding: 4,        backgroundColor: "#F00",    },    parentContainer: {        // Pressable has issues with borderRadius on the ripple on android        overflow: "hidden",        borderRadius: 40,    },})