Estou concluindo um tutorial sobre o reagir nativo. Para uma determinada tela, o instrutor recomenda o seguinte código:

<Image source={bgImage} style={styles.backgroundContainer}> 
    <View style={styles.container}>
        <Quote quoteText={this.props.text} quoteSource={this.props.source}/>
    </View>
</Image>

Mas quando eu uso isso, recebo o erro acima.

Eu tentei alternativas para isso, mas quando eu faço, a imagem de fundo nem carrega.

EDITAR: Conforme solicitado abaixo, aqui está o meu código de estilo. O que pretendo é usar uma imagem de gradiente de plano de fundo armazenada localmente no código do aplicativo com texto sobreposto sobre esse plano de fundo. O que recebo atualmente usando a sugestão abaixo é apenas o texto na parte superior da tela e nenhuma imagem de plano de fundo.

const styles = StyleSheet.create({
  backgroundContainer: {
    flex: 1,
    resizeMode: 'cover',
    width: undefined,
    height: undefined,
    backgroundColor: '#889DAD',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
});