React Native - Vertical align image with resizeMode “contain”

Question

When an image has a resize mode \"contain\" it seems to align/justify the actual image in the center, the image content however is aligned/justified at flex start.

Answer 1

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

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.

Hope this makes sense and I hope it works for your use case; it did for mine :D