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

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.

---

---

---

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

render: function(){
  return (
    
      
          
            Headline
          
      
    
  );
)

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'
  }
});