How do you add borderRadius to ImageBackground?

^{This took some digging so posting Q&A for others to find.}

ImageBackground is basically a <View> wrapping an <Image>.
The style prop only passes height and width to the <Image>.

To pass other style props use imageStyle.

<ImageBackground
  style={{height: 100, width: 100}}
  imageStyle={{ borderRadius: 6}}
  source={{ uri: 'www.imageislocatedhere.com }}
>

The details are documented in the source code.

Just add the property overflow: 'hidden'

<ImageBackground
  style={{height: 100, width: 100, borderRadius: 6, overflow: 'hidden'}}
  source={{ uri: 'www.imageislocatedhere.com }}>

If you are planning to add content inside the ImageBackground item, then you should use J.C. Gras's answer.

Just add the property overflow: 'hidden'

The reason is that if you use the imageStyle property as GollyJer recommended, then the content inside the ImageBackground won't respect the borderRadius, so it will loll out at the edges.

How do you add borderRadius to ImageBackground?

Related

Recent Posts