1

I'm trying to position an image similar to how you would with web's backgroundPosition: top. Meaning, if the dimensions of the image are greater than the height and width of the style I'm applying to the image, then it will make sure that the portion of the image shown, starts at the top.

I'm trying to do this in React Native but not having luck figuring it out. Other StackOverflow questions point towards absolute positioning ImageBackground, but I'm not having any luck with it.

Here's what I'm working with so far:

<ImageBackground
    // resizeMethod={'contain'}
    source={{ uri: item.image }}
    style={{
        width: "100%",
        height: 120,
        backgroundColor:'#000',
        padding: 20,
        paddingVertical: 40,
        position: 'absolute',
        bottom:0
      }}
      imageStyle={{
      resizeMode: "cover",
      alignSelf: "flex-start"
  }}>
    <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>

I don't need the filler text, if it's possible to do it without ImageBackground, would be great too.

Thingamajig
  • 4,107
  • 7
  • 33
  • 61
  • Are you need to show image on top or bottom with login text??? – Vishal Dhanotiya Sep 08 '19 at 05:08
  • I am not understand meaning of thid line **if the image is taller than the height I'm displaying** can you explain little bit more about height means??? – Vishal Dhanotiya Sep 08 '19 at 05:10
  • If the dimensions of the image are 1000 x 1000 and I'm only displaying the image as 200 x 100, then it should accommodate by showing full width and the top portion of the image, rather than the middle of the image. – Thingamajig Sep 08 '19 at 15:53
  • No need for the text, can be just an image. Nothing needs to be on top of the image. – Thingamajig Sep 08 '19 at 15:58

0 Answers0