React-Native: Change opacity colour of ImageBackground

Question

I have been trying to develop screen mentioned below:

For that I have created below component:

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(
            <ImageBackground
                source={require('../images/lawrance.jpg')}
                style={styles.container}>
                    <View style={styles.overlay}></View>
                    <Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
                    <Image source= {require('../images/lawrance.jpg')}
                        style={styles.avatarStyle}/>
                    <Text style = {styles.textStyle} > Jenifer Lawrance</Text>
                    <Text style = {styles.textStyle} > [phone]</Text>
                    <Balance style= {styles.balanceContainer}/>
            </ImageBackground>
        );
    }
}

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;

Now here are two issues:

1. Changing the opacity of ImageBackground also change the opacity of its children
2. Not able to change the color of opacity

Any help appreciated!

Design screen:

Developed Screen

Answer 1

Try this :

<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle= 
{{opacity:0.5}}/> 

it works