React Native: borderTopLeft(Right)Radius behave differently on iOS and Android

I would like to have a semi-circle as you can see on the right side of the screenshot ( Android ). However, the result looks differently on iOS. Looks like borderTopStartRadius and borderTopEndRadius work differently depending on the platform. The style class is quite simlple and is applied on View component:

logo_semiCircle: {
width: 150,
height: 75,
backgroundColor: "#fff",
borderTopStartRadius: 75,
borderTopEndRadius: 75, 
}

enter image description here

What is the possible work-around for this problem?

>Solution :

Try This Style

footer_logo_semiCircle: {
width: 150,
height: 75,
backgroundColor: "#fff",
borderTopStartRadius: 75,
borderTopEndRadius: 75, 
overflow: 'hidden',
}

I got a reference from here link

Leave a Reply