How To Add Strike Through On Text In React Native ?

Last Updated : 23 Jul, 2024

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

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.

JavaScript

// App.js file

import React from "react";
import {
    Text,
    View,
    StyleSheet,
    Image,
} from "react-native";

function App() {

    // Replace with your image URL
    const imageUrl =
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"; 
    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:

How-To-Add-Strike-Through-On-Text-In-React-Native-Example-1

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.

JavaScript

// 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 =
"https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"; 
    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:

How To Add Strikethrough On Text In ReactJs ?

saurabhkumarsharma05

Improve

Article Tags :