How to place an Image on top of other Image in React Native?

Question

I placed an Image as a root node in order to make it a background for my View. But it appears that all others image become invisible... Is it any way to place an image on top of the background using built-in components, without any plugins?
In the following code sample landing-background is used as a background, my logo image is visible, but only if background is removed.
Text is showing on top of the background without any concerns...

    <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'       }     }); 

Answer 1

Rather than wrapping your content in the <Image>, I think you would be better off wrapping that in an absolutely positioned element and having that 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'   } }); 

Answer 2

I have the same issue, I used an <ImageBackground>

<View style={{height: 55,width: 55,justifyContent: 'center',alignItems: 'center'}}>     <ImageBackground  source={{uri:this.state.image1}} style={{height: 50,width: 50}}>              <View style={{flex: 1,justifyContent: 'flex-end',alignItems: 'flex-start'}}> //here you can change position of image with justifyContent and alignItems                  <Image                   source={ {uri:this.state.image2}}                   style={{width: 20 , height: 20 ,alignItems: 'center',justifyContent: 'center',borderWidth: 1,borderColor: '#fff',borderRadius: 30}} />             </View>      </ImageBackground>  </View>