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!

Answer 1

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

Answer 2

import { ImageBackground } from 'react-native'

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