The <Image> component cannot contain children. If you want to render content on top of the image, consider using absolute positioning
Since react-native 0.50 you can't nest components inside <Image>
tag, rather you have to use <ImageBackground>
for background images. Release Notes for v0.50.0
You are not allowed to put other components inside an image component. You need to wrap a View around your Image and positioned it as absolute.
<View style={{ flex: 1}}>
<Image source={bgImage} style={styles.backgroundContainer} />
<View style={styles.container}>
<Quote quoteText={this.props.text} quoteSource={this.props.source}/>
</View>
</View>
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center',
},
EDIT: Since react-native version 50.0, you can simply use ImageBackground