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.

<Image resizeMode="contain" ...> <Text>Title</Text> </Image> 

With the following I'm seeing the text appearing above the image.

Is there any way to vertically align the contained image to top ?

Answer 1

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.