Menu
react-native : I have one View and the child of View is an Image , I applied opacity: 0.5 for View and opacity: 0.9 for an Image but it doesn't apply for Image ,the parent opacity is applying for child , the child doesn't take independent opacity
266
To set Alpha of an image or view component in React Native based application, style's property opacity is used. Developers can make the shape or image background transparent according to his requirement in a fixed manner; in a fixed percentage, the view is made transparent by setting alpha.
To fix the parent opacity not affecting text issue with React Native, we should try changing the opacity using alpha-value of the background color instead of opacity props. <View style={{ backgroundColor: "rgba(0,0,0,0.5)" }} />; to set the backgroundColor style to "rgba(0,0,0,0.5)" . The last number is the opacity.
Use rgba value for the backgroundColor . This sets it to a grey color with 80% opacity, which is derived from the opacity decimal, 0.8 . This value can be anything from 0.0 to 1.0 .
In order to change the opacity, you should use the style property opacity of the image component. You can change the transparency from 0.0 to 1.0 whereas 1.0 is the maximum i.e. the image becomes opaque. For example, if you want to bring down the transparency to 50 percent you have to use the value 0.5 for opacity.
Try changing the opacity using alpha-value of the background color instead. Then it should be possible applying different opacities for children.
For example:
<View style={{backgroundColor: 'rgba(0,0,0,0.5)'}}/> 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