Geek Answers Handbook

How to place an image on top of another image in a React Native book?

I placed the image as the root of the node to make it the background for my view. But it seems that all other images are becoming invisible ... Is it possible to place the image on top of the background using the built-in components without any plug-ins?
The following code example uses landing-background as the background, my logo image is displayed, but only if the background is removed.
Text displayed on top of the background without any problems ...

  <View style={styles.container}> <Image source = {require('./img/landing-background.jpg')} resizeMode = 'cover' style = {styles.backdrop}> <View style = {styles.overlay}> <Text style = {styles.headline}>It should appear in front of the Background Image</Text> <Image style = {styles.logo} source = {require('./img/logo.png')} /> </View> </Image> </View> var styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', }, overlay: { opacity: 0.5, backgroundColor: '#000000' }, logo: { backgroundColor: 'rgba(0,0,0,0)', width: 160, height: 52 }, backdrop: { flex:1, flexDirection: 'column' }, headline: { fontSize: 18, textAlign: 'center', backgroundColor: 'rgba(0,0,0,0)', color: 'white' } });
+6
source share
1 answer

Instead of wrapping your content in <Image> , I think you would be better off wrapping it in an absolute ly element that will stretch to cover the screen.

 <View style={styles.container}> <View style = {styles.backgroundContainer}> <Image source = {require('./img/landing-background.jpg')} resizeMode = 'cover' style = {styles.backdrop} /> </View> <View style = {styles.overlay}> <Text style = {styles.headline}>It should appear in front of the Background Image</Text> <Image style = {styles.logo} source = {require('./img/logo.png')} /> </View> </View> var styles = StyleSheet.create({ backgroundContainer: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, }, container: { flex: 1, alignItems: 'center', }, overlay: { opacity: 0.5, backgroundColor: '#000000' }, logo: { backgroundColor: 'rgba(0,0,0,0)', width: 160, height: 52 }, backdrop: { flex:1, flexDirection: 'column' }, headline: { fontSize: 18, textAlign: 'center', backgroundColor: 'black', color: 'white' } });
+10
source

More articles:


All Articles