27

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.

3 Answers 3

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

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>
);
1
  • com.facebook.react.common.JavascriptException: Error: The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning. Feb 9, 2021 at 6:09
1

You can do something like this... Use this : position: "absolute", bottom: 0, alignSelf: "flex-end"

<ImageBackground
    source={require("../assets/homeAssets/3.jpg")}
       style={{
         height: 140,
         width: 140,
         resizeMode: "contain",
         alignItems: "center"
          }}
         imageStyle={{ borderRadius: 70 }}
        >
         <View
          style={{
          height: 50,
          width: 50,
          borderRadius: 25,
          backgroundColor: "#99AAAB",
          alignItems: "center",
          justifyContent: "center",
          position: "absolute", //Here is the trick
          bottom: 0,
          alignSelf: "flex-end"
          }}
         >
          <Entypo name="camera" size={25} color="#FFF" />
        </View>
  </ImageBackground>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.