I am completing a tutorial on react native. For a certain screen, the instructor recommends the following code:

<Image source={bgImage} style={styles.backgroundContainer}> 

    <View style={styles.container}>

        <Quote quoteText={this.props.text} quoteSource={this.props.source}/>

    </View>

</Image>

But when I use this, I get the above error.

I've tried alternatives to this, but when I do, the background image doesn't even load.

EDIT: As requested below, here's my styling code. What I'm going for is using a background gradient image stored locally to the app code with text overlayed over that background. What I currently get by using the suggestion below is just the text at the very top of the screen and no background image.

const styles = StyleSheet.create({

  backgroundContainer: {

    flex: 1,

    resizeMode: 'cover',

    width: undefined,

    height: undefined,

    backgroundColor: '#889DAD',

  },

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: 'transparent',

  },

});