How to prevent my ImageBackground from resizing in React Native?

Question

Currently, when you click inside of a text field on our login page the ImageBackground resizes or moves. I tried setting resizeMode to all of its potential options but none of them helped. How can I prevent this from happening without using KeyboardAvoidingView? I have tried to use KeyboardAvoidingView and it did not work but also negatively affected the width of my other elements.

<ImageBackground source={require('../../assets/signinBG.jpg')} style={styles.backgroundImage}>

styles:

backgroundImage: {
    flex: 1,
    backgroundColor:'rgba(0,0,0,0.45)',
    width: null,
    height: null
},

Here is a video I made demonstrating this behavior:

https://youtu.be/tVyq7mImecQ

Answer 1

First, you need to absolutely position your background. Make sure it comes first in the render method so that it at the lowest Z-index.

Depending on what how big your background is, you may need to tile it as well, which you can do using the screen dimensions and resizeMode.

Lastly, ImageBackground is used to nest images. If this image is the background of your entire screen, then you should be able to use just <Image/> instead of <ImageBackground/>

Try this:

const d = Dimensions.get("window")

backgroundImage: {
  position: 'absolute'
  flex: 1,
  backgroundColor:'rgba(0,0,0,0.45)',
  width: d.width,
  height: d.height
}

<ImageBackground 
source={require('../../assets/signinBG.jpg')} 
style={styles.backgroundImage}
resizeMode="repeat" // or contain or cover
>