title: React-Native: Change opacity colour of ImageBackground
body: <p>I have been trying to develop screen mentioned below: </p>
  
  <p>For that I have created below component:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {View, Text, StyleSheet, ImageBackground, Image} from 'react-native';
  import Balance from './Balance.js'
  
  class AccountHeader extends React.Component{
      render(){
          return(
              &lt;ImageBackground
                  source={require('../images/lawrance.jpg')}
                  style={styles.container}&gt;
                      &lt;View style={styles.overlay}&gt;&lt;/View&gt;
                      &lt;Text style = {[styles.textStyle, {paddingTop: 10}]} &gt;My Account&lt;/Text&gt;
                      &lt;Image source= {require('../images/lawrance.jpg')}
                          style={styles.avatarStyle}/&gt;
                      &lt;Text style = {styles.textStyle} &gt; Jenifer Lawrance&lt;/Text&gt;
                      &lt;Text style = {styles.textStyle} &gt; +14155552671&lt;/Text&gt;
                      &lt;Balance style= {styles.balanceContainer}/&gt;
              &lt;/ImageBackground&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          backgroundColor:'red',
          opacity: 0.6
      },
      overlay: {
          backgroundColor:'transparent',
          opacity: 0.6
      },
      avatarStyle: {
          width:100, 
          height: 100,
          marginTop: 10,
          borderRadius: 50,
          alignSelf: 'center',
      },
      textStyle: {
          marginTop: 10,
          fontSize: 18,
          color: "#FFFFFF",
          fontWeight: 'bold',
          alignSelf: 'center',
      },
      balanceContainer:{
          padding:10,
      }
    });
  
  export default AccountHeader;
  </code></pre>
  
  <p>Now here are two issues: </p>
  
  <ol>
  <li>Changing the opacity of <code>ImageBackground</code> also change the opacity of its children</li>
  <li>Not able to change the color of opacity</li>
  </ol>
  
  <p>Any help appreciated!</p>
  
  <blockquote>
    <p><strong>Design screen:</strong></p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/YxKd2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YxKd2.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p><strong>Developed Screen</strong></p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/k8HvU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/k8HvU.png" alt="enter image description here"></a></p>