In this article, we will explore two different approaches to adding a strike-through effect to text in React Native. It is also known as crossed-out text used to display the text as cross-marked.
Prerequisites
- Introduction to React Native
- React Native Components
- React Hooks
- Expo CLI
- Node.js and npm
Syntax
<Text style={{ textDecorationLine: 'line-through' }}>Original Price: $50</Text>
Steps to Create React Native Application
Step 1: Create React Native Application With Expo CLI
Create a new React Native project for <<Project Name>>.
npx create-expo-app <<Project Name>>
Step 2: Change the directory to the project folder:
cd <<Project Name>>
Project Structure
Table of Content
Approach 1: Using CSS styling
In this approach, we’ll add a strike-through effect to a product card’s original price using CSS styles.
Example 1: This React Native example showcases an product card that combines fetching an image from a URL. The card rounded corners, a white background, and a shadow. To indicate a discount, the original price is displayed with a striking red strike-through effect, while the sell price is presented in black.
// App.js file import React from "react" ;
import { Text,
View,
StyleSheet,
Image,
} from "react-native" ;
function App() {
// Replace with your image URL
const imageUrl =
return (
<View style={styles.card}>
<Image
source={{ uri: imageUrl }}
style={styles.image}/>
<View style={styles.details}>
<Text style={styles.title}>
Product Name
</Text>
<Text style={styles.price}>
Original Price: $50
</Text>
<Text style={styles.sellprice}>
Sell Price: $40
</Text>
</View>
</View>
);
} const styles = StyleSheet.create({ card: {
margin: 25,
backgroundColor: "#ffffff" ,
borderRadius: 10,
shadowColor: "black" ,
shadowOffset: {
width: 1,
height: 3,
},
shadowOpacity: 1,
shadowRadius: 15,
elevation: 5,
overflow: "hidden" ,
},
image: {
width: "100%" ,
height: 200,
resizeMode: "cover" ,
},
details: {
padding: 16,
},
title: {
fontSize: 20,
fontWeight: "bold" ,
marginBottom: 8,
},
price: {
fontSize: 18,
//Strikethrough
textDecorationLine: "line-through" ,
color: "red" ,
},
sellprice: {
fontSize: 20,
color: "black" ,
padding: 5,
},
}); export default App;
|
Step 3: To launch the React native application, navigate to the terminal or command prompt and execute the necessary command.
npx expo start
- To run on Android:
npx react-native run-android
- To run on iOS:
npx react-native run-ios
Output:
Approach 2: Using useState and Conditional renndering
In this approach, we’ll create a product card, featuring an original price. when the user clicks on a button, , the original price will appear with a visually striking line across it.
Example 1: In this example, we are using the useState hook that to allow us for toggling between displaying an original price and a discounted price. The card consists of an image, the name of the product, and a button that facilitates switching between prices. The image is retrieved from a specified URL, while the card’s appearance is enhanced using features like a white background, rounded corners, shadows, and appropriately formatted text. By pressing the button, users can seamlessly alternate between viewing the original price with a strike-through effect—a feature designed to facilitate easy comparison of prices.
// App.js file import React, { useState } from "react" ;
import { Text,
View,
Button,
StyleSheet,
Image,
} from "react-native" ;
function App() {
const [strikeThrough, setStrikeThrough] =
useState( false );
const toggleStrikeThrough = () => {
setStrikeThrough(!strikeThrough);
};
// Replace with your image URL
const imageUrl =
return (
<View style={styles.card}>
<Image
source={{ uri: imageUrl }}
style={styles.image}/>
<View style={styles.details}>
<Text style={styles.title}>
Product Name
</Text>
<Text
style={
strikeThrough
? styles.strikeThroughPrice
: styles.price}>
{strikeThrough
? "Original Price: $50"
: "Discounted Price: $40" }
</Text>
<Button
title= "See Original Price"
onPress={toggleStrikeThrough}/>
</View>
</View>
);
} const styles = StyleSheet.create({ card: {
backgroundColor: "#ffffff" ,
borderRadius: 10,
shadowColor: "#000" ,
shadowOffset: {
width: 1,
height: 3,
},
shadowOpacity: 1,
shadowRadius: 15,
elevation: 5,
margin: 25,
overflow: "hidden" ,
},
image: {
width: "100%" ,
height: 200,
resizeMode: "cover" ,
},
details: {
padding: 16,
},
title: {
fontSize: 20,
fontWeight: "bold" ,
marginBottom: 8,
},
price: {
fontSize: 18,
color: "black" ,
},
strikeThroughPrice: {
fontSize: 18,
textDecorationLine: "line-through" ,
color: "red" ,
},
}); export default App;
|
Output: