react-native flexbox children inner elements - react-native

Question

Using react-native. How to make text show inside (and not bellow) the background image?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import { Navigator } from 'react-native-deprecated-custom-components';
export default class Test extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={require('../img/example.jpg')}
style={styles.backgroundImage}
blurRadius={1} />
<View style={styles.content}>
<Text style={styles.logo}> Example Text </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
backgroundImage: {
flex: 1,
alignSelf: 'stretch',
width: null,
justifyContent: 'center',
},
content: {
alignItems: 'center',
},
logo: {
color: 'white',
fontSize: 40,
fontStyle: 'italic',
fontWeight: 'bold',
textShadowColor: '#252525',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 15,
marginBottom: 20,
}
});
As you can see, in the example above, the Text appears outside the backgroundimage... Maybe is something with the flexbox but im not sure...

Answer 1

try with:
<Image
source={require('../img/example.jpg')}
style={styles.backgroundImage}
blurRadius={1}>
<View style={styles.content}>
<Text style={styles.logo}> Example Text </Text>
</View>
</Image>