ImageBackground repeat on Android not filling up the screen

Question

I am building an app using react native and I want to achieve a background image with repeat resize mode like this.

        <View 
            style   = {style.container}>
            <ImageBackground 
                source={require('../../assets/images/background.png')}
                resizeMode="repeat"
                style={style.imageBackground}
                >
                    ...
            </ImageBackground>
        </View>

Styles:

imageBackground: {
    width: '100%', 
    height: '100%', 
    resizeMode: 'repeat',
    justifyContent:'center'
},
container: {
    marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 30,
    flex: 1,
    backgroundColor: COLORS.BACKGROUND,
    justifyContent: 'center',
},

On iOS it works perfectly. But when I open Android it looks like this:

What am I doing wrong?

Add a viewport height to your body for mobile like this: imageBackground:(max-width: 768px) { body { height:100vh; } } — VikaS GuttE, Feb 21 '19 at 18:06
I got it! I was setting resizeMode two times: with a tag prop and on style file. Removing from styles and leaving in ImageBackground resolved this bug. :) — Caio Oliveira, Feb 21 '19 at 18:16

score 0 · Answer 1 · answered Nov 03 '22 at 11:51

0

Your image has been cached, rename the static file or add query string to dynamic file:

source={require('../../assets/images/background_new.png')}

source={{uri: "link/image.jpg?v=1.1" }}

answered Nov 03 '22 at 11:51

Mohamad

36
4

ImageBackground repeat on Android not filling up the screen

1 Answers1