How to set `ImageBackground` image position in react native. Like in css `background-postion: bottom`?
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
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>