JAVASCRIPT

border radius not working ios react native

add
overflow: 'hidden'


Using overflow: 'hidden' on the same element that have borderRadius should fix this issue, I guess..

<Text
style={{
       borderRadius: 5,
       overflow: 'hidden',
       ....
      }}
        >

react native border radius not working ios

To anyone having this issue, I fixed It by wrapping the Image on a View component and applying the borderRadius to It instead of directly applying It to the Image.

{....}
<View style={styles.imageContainerIOS}>
	<Image
	     style={{ width: 100, height: 100 }} 
	    source={dummyImage}
	/>
</View>

{...}

imageContainerIOS: {
	borderBottomLeftRadius: 5,
	borderBottomRightRadius: 0,
	borderTopLeftRadius: 5,
	borderTopRightRadius: 0,
	overflow: 'hidden',
	marginRight: 20,
	},
{...}