How to overlay text on card Image in React Native? - reactjs

Question

I want to add text on Card Image and want to control the text position over the image of the Card.
When i use featuredSubtitle={"Helo"} that give the text over image but i cant control the position.
Here is the sample image from food Panda app. How can i add Flat 50 etc on my Card Image
<Card featuredSubtitle={"Helo"} image={{uri: 'https://www.papajohns.com.pk/binary_resources/10484676'}}>
<Text style={{ fontSize: 20,fontWeight: 'bold'}}>
{"Papa Jhon's - Johar Town"}
</Text>
<Text style={{}}>
{"$$$, Italian, Panda Picks, Thin Crust Pizza, Take Away"}
</Text>
<Text style={{textShadowColor: 'red', textShadowRadius: 3, textDecorationLine: 'line-through'}}>
{"Rs: 390 | Rs: 50 Delivery"}
</Text>
<Text style={{textShadowColor: '#88f549', textShadowRadius: 3,}}>
{"Rs: 290 minimum | Free Delivery"}
</Text>
</Card>

Answer 1

You can achieve it by absolute position. You specifically asked for Card component. but this approach works on all views. Here you can refer this snack. I built this with card component using react-native-card
import * as React from 'react';
import {
Text,
View,
StyleSheet,
Image,
Dimensions,
ImageBackground,
} from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card style={{ width: '100%', height: '50%', borderRadius: 10 }}>
<ImageBackground
style={{
width: '100%',
height: '80%',
resizeMode: 'contain',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}
source={{
uri:'https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80',
}}
/>
{/** top-right corner */}
<View style={{ position: 'absolute', top: 0, right: 0 }}>
<Text
style={{
fontSize: 20,
color: 'black',
backgroundColor: 'white',
}}>
35 mins
</Text>
</View>
{/** top -left */}
<View style={{ position: 'absolute', top: 10, left: 0 }}>
<Text
style={{ fontSize: 20, color: 'white', backgroundColor: 'red' }}>
Flat 50%
</Text>
</View>
<View style={{ position: 'absolute', top: 40, left: 0 }}>
<Text
style={{ fontSize: 20, color: 'white', backgroundColor: 'red' }}>
Free delivery
</Text>
</View>
{/**Card text */}
<Text style={{ fontSize: 20, fontWeight: 'bold', paddingLeft: 8 }}>
Papa's john town
</Text>
<Text />
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});

Answer 2

You can overlay your text using absolute position
import React, { Component } from "react";
import { Text, ImageBackground } from "react-native";
class App extends Component {
render() {
return (
<ImageBackground
source={{
uri:
"https://www.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg"
}}
style={{
height: 100,
width: 100,
position: "relative", // because it's parent
top: 2,
left: 2
}}
>
<Text
style={{
fontWeight: "bold",
color: "white",
position: "absolute", // child
bottom: 0, // position where you want
left: 0
}}
>
Hello World
</Text>
</ImageBackground>
);
}
}
export default App;

Answer 3

I solve this By position. Here is the Code
<Text style={{position: 'absolute', top: -150, right: 0 ,backgroundColor: '#fff', fontSize: 15}}>
{" 35 mins "}
</Text>
<Text style={{ position: 'absolute', top: -130, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
{" 30% OFF "}
</Text>
<Text style={{ position: 'absolute', top: -100, left: 0 ,backgroundColor: '#D60E64', fontSize: 15, color: '#fff'}}>
{" FREE DELIVERY "}
</Text>