CODEWITHSUNDEEP
react-native
FairyQueen
FairyQueen

Reputation: 2373

How to prevent my ImageBackground from resizing in React Native?

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

Upvotes: 7

Views: 4892

Answers (3)

Jeremy
Jeremy

Reputation: 3728

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
>

Upvotes: 6

Furkan KAYA
Furkan KAYA

Reputation: 83

Sorry, I will tell you better now. Nothing is going to be in Image tag. For example lets create a login screen with a background image.

<Image 
source={require('your_image_path')}
style={{ position: 'absolute', zIndex: -1, width: 300, height: 640 }}
/>
<TextInput value={username} onTextChange={() => someFunction} />
<TextInput value={password} onTextChange={() => someFunction2} />

You can set height and width as screen width and height. The important thing is position absolute and zIndex -1. zIndex -1 is gonna make image backward and position absolute will let us put our textinputs (or any element) on image.

And also if I couldn't tell well, I'm not so good at English. Sorry about that.

Upvotes: 0

Furkan KAYA
Furkan KAYA

Reputation: 83

I'm not sure if you like it but i didnt have any problems. You can use your background image as just an image but with "position: absolute" and "zIndex: -2". By this it will not move or resize and it will looo like background.

Upvotes: 0

Related Questions