Menu
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?
916
Border Radius in React Native The borderRadius property can be set as the style attribute to any element. It takes a value in pixels and assigns that value to the overall border radius of that UI element. By default, the border radius of any element is 0 if you haven't added that style attribute to that element.
create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', }, image: { height: 250, width: 250, opacity: 0.5, }, }); export default Home; The output will be as given in the screenshot below. That's how you increase or reduce transparency of image in react native.
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.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With