How do you add borderRadius to ImageBackground?

Just add the property overflow: 'hidden'

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

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.

Tags:

React Native