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

Question

I'm using Pressable for buttons after referring this docs pressable docs

Now I want to add ripple effect to the button but it is not working properly.

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

Ripple effect don't have border radius if button has radius. it looks awkward that ripple effect corners go out of the curved radius.

Snack demonstrating the problem: https://snack.expo.dev/6U8dxxzLx

Answer 1

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',
  },

Update:- Floating pressable component with ripple leakage fixed

<View style={{
                position: 'absolute',
                bottom: 250,
                borderRadius: 50,
                overflow: 'hidden',
                alignSelf: 'center'
            }}>
                <Pressable
                    style={{
                        height: 60,
                        width: 60,
                        borderRadius: 50,
                        backgroundColor: 'red',
                        justifyContent: 'center',
                        alignItems: 'center',
                        elevation: 4,
                    }}
                    android_ripple={{
                        color: 'black',
                    }}
                    onPress={() => { console.log('om') }}>
                    <Text>O</Text>
                </Pressable>
            </View>