Image becoming transparent when placed within view - react-native

Question

My app has a background image which has a slightly transparent view placed over it to provide a blue tint to the background image. I am now trying to place the app logo on top of these views but when I do so the logo appears to take on the opacity of the view providing the tint.
I am very new to react native but what I basically need is to have: background image > view > logo.
To demonstrate what I mean, the app logo should look like this:
But it currently looks washed out, like this:
App.js
import React, { Component } from 'react';
import { View, Text, ImageBackground } from 'react-native';
import Logo from './Logo';
class App extends Component {
render() {
return (
<ImageBackground
source={require('./images/city.png')}
style={styles.backgroundStyle}
>
<View style={styles.backgroundOverlayStyle}>
<Logo />
</View>
</ImageBackground>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
backgroundColor: '#000000',
width: '100%',
height: '100%'
},
backgroundOverlayStyle: {
flex: 1,
backgroundColor: '#003284',
opacity: 0.5
}
};
export default App;
Logo.js
import React from 'react';
import { View, Image } from 'react-native';
const Logo = () => {
const { logoStyle } = styles;
return (
<View style={styles.container}>
<Image style={logoStyle} source={require('./images/request-first-logo-white.png')} />
</View>
);
};
const styles = {
container: {
alignItems: 'center',
justifyContent: 'center',
opacity: 1,
},
logoStyle: {
width: '70%',
height: '65%',
resizeMode: 'contain',
//backgroundColor: 'blue'
}
};
export default Logo;
Thank you for any help.

Answer 1

you need you define blurRadius for ImageBackground
import React, { Component } from 'react';
import { View, Text, ImageBackground,Image } from 'react-native';
const Logo = () => {
const { logoStyle } = styles;
return (
<View style={styles.container}>
<Image style={logoStyle} source={{uri:'https://www.what-dog.net/Images/faces2/scroll001.jpg'}} />
</View>
);
};
export default class App extends Component {
render() {
return (
<ImageBackground
source={{uri : 'https://pngstocks.com/wp-content/uploads/2018/03/cb-background-10.jpeg'}}
style={styles.backgroundStyle}
blurRadius={30}
>
<Logo />
</ImageBackground>
);
}
}
const styles = {
backgroundStyle: {
flex: 1,
backgroundColor: '#000000',
width: '100%',
height: '100%'
},
backgroundOverlayStyle: {
flex: 1,
backgroundColor: '#003284',
},
container: {
alignItems: 'center',
justifyContent: 'center',
},
logoStyle: {
width: 100,
height: 100,
resizeMode: 'contain',
//backgroundColor: 'blue'
}
};