How to place a text over image in react native?

Question

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

Answer 1

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>

Answer 2

use this:

<ImageBackground source={require('background image path')} style={{width: '100%', height: '100%'}}>    <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>      <Text>Centered text</Text>    </View> </ImageBackground>