React-Native: Change opacity colour of ImageBackground
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} > +14155552671</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:
- Changing the opacity of
ImageBackgroundalso change the opacity of its children - Not able to change the color of opacity
Any help appreciated!
Design screen:
Developed Screen
Try this :
<ImageBackground source={require('./images/backgroundBlue.jpg')} imageStyle=
{{opacity:0.5}}/>
it works
Use this code, it’s working, I just made a minor change
import React, {Component} from 'react';
import {View, Text, StyleSheet, ImageBackground, Image,Dimensions} from 'react-native';
class AccountHeader extends React.Component{
render(){
return(
<ImageBackground
source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
style={styles.container}>
<View style={styles.overlay}>
<Text style = {[styles.textStyle, {paddingTop: 10}]} >My Account</Text>
<Image source= {{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoOVTmb0ILbDI6ggGhPKUkn3v4UKc2dNB-Kjng7aGM14UbvzKY'}}
style={styles.avatarStyle}/>
<Text style = {styles.textStyle} > Jenifer Lawrance</Text>
<Text style = {styles.textStyle} > +14155552671</Text>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
},
overlay: {
backgroundColor:'rgba(255,0,0,0.5)',
},
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;
For me worked just applying some opacity to the ImageBackground component and at the same time a background color like this:
<ImageBackground source={background} style={{ width: window.width, height: window.height - 24, backgroundColor: 'rgb(255,0,0)' }} resizeMode="cover" imageStyle={{opacity: 0.4}} >
</ImageBackground>
Try changing the container’s style to
container: {
backgroundColor: 'rgba(255,0,0,.6)'
},
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
