Render text box with transparent background on top of image in React Native iOS

Question

I\'m trying to render a block with white text on top of an image in my testing of React Native. But instead i get a black block on top of my image with white text in it. Not wha

Answer 1

backgroundColor: 'transparent' This actually is a performance optimization and it is rather aggressive.

"< Text > elements inherit the background color of their parent < View > but this behavior causes more annoyance that helps in my opinion. A simple example is an < Image > with nested < Text >. The text nodes will take the background color or the parent views instead and will hide the image. Then we have to set backgroundColor: 'transparent' on the text nodes to fix it.

This behavior also doesn't happen on Android, the < Text > nodes always have a transparent background by default. This causes a few surprises when developing something on Android then testing it on iOS." - https://github.com/janicduplessis

This is from a discussion where users raised it as an issue. Read it more here - https://github.com/facebook/react-native/issues/7964

The easiest way like Colin said above is to set the backgroundColor of the container to rgba(0,0,0,0)