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.