Text Overlay Image with Darkened Opacity React Native : <p>I am attempting to overlay a title over an image - with the image darkened with a lower opacity. However, the opacity effect is changing the overlaying text as well - making it dim. Any fix to this? Here is what is looks like:</p>

<p><a href="https://i.stack.imgur.com/1HzD7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1HzD7.png" alt="enter image description here"></a></p>

<p>And here is my code for the custom component (article preview - which the above image is a row of article preview components): </p>

<pre><code>//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var {
  View, 
  StyleSheet, 
  Text, 
  Image, 
  TouchableHighlight, 
} = React;

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');

//additional libraries

module.exports = React.createClass({
  //onPress function that triggers when button pressed
  //this.props.text is property that can be dynamically filled within button 
  /* following props:
    - source={this.props.source}
    - onPress={this.props.onPress}
    - {this.props.text}
    - {this.props.heartText}
    - key={this.props.key} 
    - text={this.props.category} 
    - this.props.selected
  */
  render: function() {
    return (
      &lt;TouchableHighlight 
        underlayColor={'transparent'}
        onPress={this.props.onPress} &gt;
          &lt;Image 
            source={this.props.source} 
            style={[styles.articlePreview, this.border('red')]}&gt;
                  &lt;View style={[styles.container, this.border('organge')]}&gt;
                      &lt;View style={[styles.header, this.border('blue')]}&gt;
                          &lt;Text style={[styles.previewText]}&gt;{this.props.text}&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={[styles.footer, this.border('white')]}&gt;
                        &lt;View style={[styles.heartRow, this.border('black')]}&gt;
                          &lt;ImageButton
                              style={[styles.heartBtn, , this.border('red')]}
                              resizeMode={'contain'}
                              onPress={this.onHeartPress}
                              source={require('../../img/heart_btn.png')} /&gt;
                          &lt;Text style={[styles.heartText]}&gt;{this.props.heartText + ' favorites'}&lt;/Text&gt;
                        &lt;/View&gt;
                          &lt;KeywordBox 
                              style={[styles.category, this.border('blue')]}
                              key={this.props.key} 
                              text={this.props.category} 
                              onPress={this.props.categoryPress}
                              selected={this.props.selected} /&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
          &lt;/Image&gt;
      &lt;/TouchableHighlight&gt;
    );
  }, 
  onHeartPress: function() {
    //will move this function to a general module
  }, 
  border: function(color) {
      return {
        //borderColor: color, 
        //borderWidth: 4,
      } 
   },
});

var styles = StyleSheet.create({
  heartText: {
    color: 'white', 
    fontSize: 12, 
    fontWeight: 'bold',
    alignSelf: 'center', 
    marginLeft: 5, 
    fontFamily: 'SFCompactText-Medium'
  }, 
  heartRow: {
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignSelf: 'center', 
    justifyContent: 'center', 
  }, 
  heartBtn: {
    height: (92/97)*(window.width/13), 
    width: window.width/13, 
    alignSelf:'center', 
  }, 
  category: {
    fontFamily: 'Bebas Neue', 
    fontSize: 10,
    fontWeight: 'bold'
  }, 
  header: {
    flex: 3, 
    alignItems: 'center', 
    justifyContent: 'space-around', 
    marginTop: window.height/30,
  }, 
  footer: {
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    margin: window.height/50,
  }, 
  container: {
    flex: 1, 
    backgroundColor: 'black', 
    opacity: 0.6, 
  }, 
  articlePreview: {
    flex: 1, 
    height: window.height/3.2, 
    width: window.width, 
    flexDirection: 'column'
  }, 
  previewText: {
    fontFamily: 'Bebas Neue', 
    fontSize: 23,
    color: 'white', 
    alignSelf: 'center', 
    textAlign: 'center', 
    margin: 5, 
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  }, 

});
</code></pre>
