How to place a text over image in react native?
You can import ImageBackground
instead of Image
from react-native
and pass the text as children to the ImageBackground
. This does the magic. Please see the code below:
<View style={styles.imageWrapper}>
<ImageBackground style={styles.theImage} source={{uri : item.imageUrl}}>
<Text>Hey</Text>
</ImageBackground>
</View>
const styles = StyleSheet.create({
imageWrapper: {
height: 200,
width: 200,
overflow : "hidden"
},
theImage: {
width: "100%",
height: "100%",
resizeMode: "cover",
}
})
We can use positioning too as stated by many, but I prefer using ImageBackground
.
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>
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>