How to set `ImageBackground` image position in react native. Like in css `background-postion: bottom`?

Question

So I'm setting a background image in react native but I need the position of the background image to be set to bottom. So if anyone knows how to achieve this.

I have tried adding backgroundPosition but it seems it is not supported

<ImageBackground
  source={require("../assets/img/bg-top.png")}
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    padding: 20,
    paddingVertical: 40,
    backgroundPosition: "bottom" // not working
  }}
  imageStyle={{
    resizeMode: "cover",
    alignSelf: "flex-end"
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>;

I expect the image alignment should start from the bottom rather it starts from the top

Answer 1

React native provided bottom and position tag to set UI at bottom. Please replace backgroundPosition tag from image style into

position: 'absolute', bottom:0

 <ImageBackground
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    backgroundColor:'#000',
    padding: 20,
    paddingVertical: 40,
    position: 'absolute',
  bottom:0
  }}
  imageStyle={{
    resizeMode: "cover",
    alignSelf: "flex-end"
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>

Please check snack expo

https://snack.expo.io/@vishal7008/bottom-ui

Answer 2

The image inside ImageBackground has the default style:

position: 'absolute'
top: 0
bottom: 0
right: 0
left: 0

So, we can just remove the top: 0 by setting

top: undefined

together we have

<ImageBackground
  source={require("../assets/img/bg-top.png")}
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    padding: 20,
    paddingVertical: 40,
    overflow: 'hidden' // prevent image overflow the container
  }}
  imageStyle={{
    resizeMode: "cover",
    height: 200, // the image height
    top: undefined
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>