Estoy completando un tutorial sobre reaccionar nativo. Para una pantalla determinada, el instructor recomienda el siguiente código:

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

Pero cuando uso esto, obtengo el error anterior.

He intentado alternativas a esto, pero cuando lo hago, la imagen de fondo ni siquiera se carga.

EDITAR: Como se solicita a continuación, aquí está mi código de estilo. Lo que voy a hacer es usar una imagen de gradiente de fondo almacenada localmente en el código de la aplicación con texto superpuesto sobre ese fondo. Lo que actualmente obtengo al usar la sugerencia a continuación es solo el texto en la parte superior de la pantalla y ninguna imagen de fondo.

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