Image nested views inherit backgroundColor style from Image

[aliaksandr-kazarez]

In following code snippet, if i set backgroundColor for Image, Text inherits it's value and covers section of image

var view = React.createClass({
 render: function() {
 return (
 <Image
 source={require("image!image")}
 style={{width: 300, height: 400, backgroundColor: "#FFDDCC"}}
 >
 <Text>TSDGFSDF</Text>
 </Image>
 )
 }
});

"react-native": "~0.3.8"

[brentvatne]

@kozorezal - What is the expected behaviour? What happens if you do this for an <img> tag in the browser?

[aliaksandr-kazarez]

@brentvatne initial issue was renamed, since it's related to style inheritance.

Answering your question, in browser I use background-image instead of nesting html inside image tag.

[frantic]

For performance, instead of having all elements background color transparent, we propagate it from parent to child. I think you can explicitly set background color on <Text>. cc @sahrens

[aliaksandr-kazarez]

Thanks @frantic your answer helped, besides it's possible to wrap <Image> with <View> and set backgroundColor: "#FFDDCC" to it and "transparent" to <Image>

[mtrabelsi]

So reading the some bugs here and there and checking CSS doc again, then yeah react-native advertise that it supporting CSS but that is not true, this is different implementation :
In the standard https://developer.mozilla.org/en-US/docs/Web/CSS/background-color it is NOT inheritable by child - and W3C did that decision for a reason ;)
React native did another implementation and this is quite annoying to manually reset the child background to avoid any unwanted inheritance :)