Problem with button using border radius

[brenoo2018]

I'm having this problem on my android emulator.

Code:

<Button
        buttonStyle={styles.buttonStyle}
        style={{ borderRadius: 20 }}
        containerStyle={[{ width: '100%', borderRadius: 20 }]}
        titleStyle={{ fontSize: 16, fontWeight: '600' }}
        icon={{
          type: 'font-awesome',
          name: 'sign-in',
          size: 15,
          color: 'white',
        }}
        title="Login" />

const styles = StyleSheet.create({
buttonStyle: {
    backgroundColor: '#7159c1',
    padding: 10,
    marginTop: 20,
    marginBottom: 20,
    borderRadius: 20,
  }
})

Versions:
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-elements": "^1.2.7",

Image:

---

[flyingcircle]

@brenoo2018 I think I understand what your issue is, but can you please describe what the problem is and what you expect to see?

[brenoo2018]

@flyingcircle See the image I posted I used a button that by default it is a rectangle, but I added the styles for it to have rounded edges and it was as you can see. But when clicking on the button, the background of the click is burst and has passed the button. Repair the top and bottom corners of the button.

[flyingcircle]

I tested it out with 1.2.7 saw the issue, then checked out the next branch and saw that the issue was no longer there in the next branch. This is fixed in the 2.0.0 release.

[brenoo2018]

how do i use this version 2.0.0?

[flyingcircle]

@brenoo2018 it will be releasing soon. Otherwise you can use the next branch for a close approximation.

[brenoo2018]

@flyingcircle thank you. But could you indicate another ui kit for me to use in react native in the meantime?
I saw that you have react native paper and native base. They are good?

[flyingcircle]

@brenoo2018 version 2.0.0 was just released. feel free to try it out.

[billlima]

In ReactNative: 0.65, Elements: 3.4.2 and API 29 this still happens with me, but I found a solution setting overflow:'hidden' on View like this:

    <View style={{
      width:"100%", 
      borderRadius: 30, 
      overflow: 'hidden' 
    }}>
      <Button
        title="Login"
        type="solid"
        buttonStyle={{borderRadius: 30}}
      />
    </View>