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 what I had expected. How do you render a text block with transparent background?

Current result

Render function

render: function(){   return (     <View style={styles.container}>       <Image          style={styles.backdrop}          source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>           <Text style={styles.headline}>Headline</Text>       </Image>     </View>   ); ) 

Stylesheet function

var styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'flex-start',     alignItems: 'center',     backgroundColor: '#000000',     width: 320   },   backdrop: {     paddingTop: 60,     width: 320,     height: 120   },   headline: {     fontSize: 20,     textAlign: 'center',     backgroundColor: 'rgba(0,0,0,0)',     color: 'white'   } }); 

Answer 1

PLEASE NOTE: This answer is now vastly out of date. This was applicable the day React Native was open sourced back in 2015. Today this way of doing this is deprecated.

"Using with children is deprecated and will be an error in the near future. Please reconsider the layout or use instead."

See the docs https://reactnative.dev/docs/images#background-image-via-nesting

---

---

---

You can accomplish this by adding a View inside the Image like so:

render: function(){   return (     <View style={styles.container}>       <Image          style={styles.backdrop}          source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>           <View style={styles.backdropView}>             <Text style={styles.headline}>Headline</Text>           </View>       </Image>     </View>   ); ) 

Stylesheet function

var styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'flex-start',     alignItems: 'center',     backgroundColor: '#000000',     width: 320   },   backdrop: {     paddingTop: 60,     width: 320,     height: 120   },   backdropView: {     height: 120,     width: 320,     backgroundColor: 'rgba(0,0,0,0)',   },   headline: {     fontSize: 20,     textAlign: 'center',     backgroundColor: 'rgba(0,0,0,0)',     color: 'white'   } }); 

Answer 2

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)