React Native – Vertical align image with resizeMode “contain”

I was able to simulate CSS backgroundPosition using the following code:

<View style={{ overflow: 'hidden' }}>
  <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} />
</View>

Because of the overflow: ‘hidden’ on the View the heigh of the image can be adjusted without seeing the extra height of the image. You’ll need to user ‘cover’ rather than ‘contain’ for the resize mode as well otherwise you’ll end up with a centered image that isn’t as wide as the View container if you set the height of the image too large.

In the top example below the Image height (blue dotted line) is larger than the bottom example and therefore the center line of the image sits lower in the view. By reducing the height of the image (blue dotted line) in the second example, the center line of the image moves up in the view.

enter image description here

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)