'Position of an ImageBackground with resizeMode='contain' in React Native

I'm new to React-native and I've a very simple(at least i think so) problem.

I've an ImageBackground with resizeMode='contain', now I would like to have the background positioned to the top of the container...

<ImageBackground style={styles.imageBackground} source={backgroundImage} resizeMode='contain'> 
... some content 
</ImageBackground>

The image is rendered in the right way, but the problem is that it is vertically centered, instead I would like to have it top aligned...

This is an example of the result of my ImageBackground

This is an example of the result with the bottom added to ImageStyle

react-native

Solution 1:^[1]

In the ImageBackground component, the image isn't vertically centered, rather it is positioned absolutely to fill the container. You can check the source here. The reason it's appearing vertically centered is probably because of the resizeMode contain. To top align it, you can make user of the prop imageStyle that you can set to something like this:

<ImageBackground
    imageStyle={{
        bottom: 40 // Whatever offset you want from the bottom
    }}
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nagender Singh

'Position of an ImageBackground with resizeMode='contain' in React Native

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]