how to position a child view on right-bottom corner of a React-Native image component?

Question

I'm developing an app with React-Native. I want to put an icon on right-bottom corner of an image component, but it always stays on the left-top corner.

Any help? Thank you very much.

Answer 1

<Image source={imageSource} style={{position: "absolute", bottom: 0, right: 0}}/> 

Answer 2

You can use justifyContent: 'flex-end' to achieve this:

const withWatermark = (asset, logo) => (
  <Image style={{ width: 200, height: 200, justifyContent: 'flex-end' }} source={asset}>
    <Image style={{ width: 20, height: 20, alignSelf: 'flex-end' }} source={logo} />
  </Image>
);