How do you add borderRadius to ImageBackground?

The React Native ImageBackground component is supposed to accept the same prop signature as Image. However, it doesn't seem to accept borderRadius.

This has no affect.

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

How do you change the border radius of an 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.