ImageBackground won't appear

Question

I've been trying to render a background image, and it runs, but nothing appears. I'm running this through Android on Windows. This is the code below:

import React, { Component } from 'react';

import { View, Image, Text, ImageBackground } from 'react-native';

class Background extends Component {
    render() {
        return (
      <ImageBackground
        source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
        style={{flex: 1, width: '100%'}}

      >
        <View >
          <Text>Test</Text>
        </View>
      </ImageBackground>
        );
    }
  }

export default Background;

I'm not sure if the code just isn't properly pulling the image itself or if the styling needs to be adjusted. Thanks for the help!

I may be wrong, but I guess you are missing ```height: '100%'```. in your ```ImageBackground``` component. Can you check it, please? — soutot, May 14 '18 at 17:12

score 15 · Answer 1 · answered May 14 '18 at 17:47

15

Your ImageBackground component needs a height value in your style attribute. RN is picky about that.

answered May 14 '18 at 17:47

vm909

581
3
8

1

Ah, thanks! I didn't realize it was that picky, it now properly appears. – Eric Dulin May 15 '18 at 18:42

score 4 · Answer 2 · answered May 30 '22 at 17:49

4

import { ImageBackground } from 'react-native'

<ImageBackground
source={require('../assets/background.jpg')}
resizeMode={'cover'}
style={{ flex: 1, width: '100%' }}></ImageBackground>

answered May 30 '22 at 17:49

Sir Alidadi

203
2
6

1

Code-only answers are generally considered low-quality answers on Stack Overflow. This answer could be improved with an explanation as to how this solves OP's problem presented in the question. – codewario May 31 '22 at 14:17

score 0 · Answer 3 · answered Dec 27 '21 at 23:18

for me only shows when i use

require()

like this post ImageBackground not working when i call source from state

source={require( 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg')}

(i tried to import image and call inside source but don't appears, even declaring in style height and width, only after use require(), why? i don't know)

score -1 · Answer 4 · answered Jan 08 '20 at 11:12

Wrap your ImageBackground component within a Container component.

class Background extends Component {
    render() {
        return (
      <Container>
        <ImageBackground
        source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
        style={{flex: 1, width: '100%'}}>
         <View >
           <Text>Test</Text>
         </View>
       </ImageBackground>
      </Container>
        );
    }
  }

ImageBackground won't appear

4 Answers4

Linked