How to vertically place a text over image in react native? I found this doc. But i can't do like that , I can't add text
tag as a child component of Image
tag.I've tried like the below.
<Card>
<CardSection>
<View style={styles.container}>
<Image source={require('../Images/4.jpg')} style={styles.imageStyl} />
<Text style={styles.userStyle}>
{this.props.cat.name}
</Text>
</View>
</CardSection>
</Card>
const styles= StyleSheet.create({
container:{
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
imageStyl: {
flexGrow:1,
width:"100%",
height:200,
alignItems: 'center',
justifyContent:'center',
},
userStyle:{
fontSize:18,
color:'black',
fontWeight:'bold',
textAlign: 'center'
},
});
How to place the text to the center of image?Getting something like this
You have to use in the "css"
position:'absolute'
And then place your text using the css properties (like top, bottom, right, left)
React Native absolute positioning horizontal centre
Wrap the child you want centered in a View and make the View absolute.
<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text>Centered text</Text>
</View>