CODEWITHSUNDEEP
react-nativeflexbox
Morton
Morton

Reputation: 5760

How to let a image cover another image?

I want the crown icon cover the photo image, so I use bottom. to change the position.

<View style={{ alignItems: 'center' }}>
  <Image
    source={CrownIcon}
    style={{ width: 28, height: 18, bottom: -7 }}
  />
  <Image
    source={{uri: image}}
    style={{ width: 28, height: 28 }}
  />
</View>

But the result is the photo image cover the crown icon.

enter image description here

So I try to add <View /> and use position: 'absolute'

<View style={{ alignItems: 'center' }}>
  <View style={{ position: 'absolute', bottom: 32 }}>
    <Image
      source={CrownIcon}
      style={{ width: 28, height: 18 }}
    />
  </View>
  <Image
    source={{uri: image}}
    style={{ width: 28, height: 28 }}
  />
</View>

The photo image still cover the crown icon.

enter image description here

How do I let the crown icon cover the photo image ?

Upvotes: 0

Views: 38

Answers (2)

sia
sia

Reputation: 613

You can use ImageBackground

.e.g.

<ImageBackground
    source={{uri: image}}
    style={your-style}
>
    <Image
        source={{uri: image}}
        style={your-style}
    />
</ImageBackground>

Upvotes: 1

Prakash Karena
Prakash Karena

Reputation: 2595

Here problem is with overlapping image

Just add zIndex : 5 to your image 

 <View style={{ alignItems: 'center' }}>
      <View style={{ position: 'absolute', bottom: 32 , zIndex: 5 }}> 
        <Image
          source={CrownIcon}
          style={{ width: 28, height: 18 }}
        />
      </View>
      <Image
        source={{uri: image}}
        style={{ width: 28, height: 28 }}
      />
    </View>

Upvotes: 1

Related Questions