0

I'd like to be able to bottom align an image using Image or ImageBackground, but have been unsuccessful in doing so.

<View style={styles.moduleHeader}>
  <ImageBackground
     style={styles.image}
     source={{ uri: image }}
     resizeMode="cover">
     <Text>text</Text>
  </ImageBackground>
</View> 

moduleHeader: {
  height: 200,
},

image: {
  width: Layout.viewport.width, //device width
  height: 200,
  position: "absolute",
  bottom: 0,
},

Other attempts include negative top margin and padding.

I've also messed around with aspect ratio, but that needs to be more of a precise number, and I don't need that level of precision.

The inclusion of absolute and bottom have no effect that I can tell... Basically Id like to mimic the effect background-position: center bottom; has in CSS.
I don't mind if the image is cropped horizontally, just that the bottom of the image is aligned with the bottom of the container.

I haven't been able to find with any certainty that this is even possible in React-Native, so confirmation of that theory would constitute a correct answer.

As always any and all direction is greatly appreciated so thanks in advance!

rpanai
  • 12,515
  • 2
  • 42
  • 64
studiobrain
  • 1,135
  • 2
  • 13
  • 35

2 Answers2

0

You need to remove position and bottom tag from ImageBackground style and add into style of View

Something like this 

moduleHeader: {
  height: 200,
  width:'100%',
  position: "absolute",
  bottom: 0,
},

image: {
  width:'100%', //device width
  height: 200,
  backgroundColor:"#000",
},

Please check this snack expo code

https://snack.expo.io/@vishal7008/again-bottom-ui

Vishal Dhanotiya
  • 2,512
  • 1
  • 13
  • 32
  • Thanks for the answer but unfortunately the issue is not with the placement of the image in its container but its alignment. Basically if the image source is portrait and the container is landscape the bottom half of the image is cropped. In web you can just align the background image and it will crop the top half, in RN I have not found its equivalent. – studiobrain Apr 15 '19 at 13:50
0

I think this may be too old, but I did find this online since I'm in the same boat at this moment object-fit

if that link ever dies, the two properties that seem to matter are object-fit and object-position, I'm trying to tweak how images are clipped for a 2D game I'm making and everything being naturally graphically aligned at the top-left of every image makes it hard, this seems to be helpful in scooting things around until it looks pretty. Idk if it works for your situation (if even still relevant)

sponsky
  • 31
  • 4
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/34339398) – dhj May 12 '23 at 00:19