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

Using resizeMethod="resize"

I've found a solution that doesn't requires any extra tags or tricks. Just one single prop.

Lore

I had the same issue because my image on remote is @3x the regular size. And once loaded on the phone with { height: 100, width: 300, resizeMode: 'contain' } styling values, it centered automatically.

Example

To fix it, I've just added the prop resizeMethod like the following :

Hope it helps!