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 needed to do the same thing. The best way I found to accomplish this was to explicitly give the height or width of the image. Then, by wrapping your image in an other component, you can use justifyContent to have full control on the position of the image.

It's true that you might not always have the width or height of the image. However, quite often (especially is using resizeMode: 'contain') you want to set the height or width relative to something. I wanted the height to be equal to the width of the viewport. Here is the solution that I used:

The vw is a helper function that comes from this answer.