CODEWITHSUNDEEP
react-native
Eric Dulin
Eric Dulin

Reputation: 81

ImageBackground won't appear

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!

Upvotes: 8

Views: 15325

Answers (4)

Sir Alidadi
Sir Alidadi

Reputation: 271

import { ImageBackground } from 'react-native'

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

Upvotes: 3

reinaldo
reinaldo

Reputation: 19

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)

Upvotes: 1

Shweta
Shweta

Reputation: 1247

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>
        );
    }
  }

Upvotes: -1

vm909
vm909

Reputation: 581

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

Upvotes: 15

Related Questions