Friday, July 26, 2019

React Native Strikethrough Text Using the StyleSheet

This tutorial explains how To create Strikethrough text in react native app using css stylesheet. This kind of Strikethrough text widely used in shopping website to display discounts on particular product  and for that we need to perform some modification in stylesheet design. textDecorationLine: 'line-through' style property of Text component is used to create Strikethrough Text in both Android and iOS react native application.

React Native Strikethrough Text Using the StyleSheet


How to Create Strike Through Text in React Native

Lets see the below steps that helps to create Strikethrough text in react native app using css stylesheet

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';

Step 4: Implement render method inside the App class and wrapped the below layout design inside the root View component.
export default class App extends Component {

  render() {
    return (
      <View style={styles.container} >
        <View style={styles.MainContainer}>
          <Text style={styles.TextStyle} >Sample Text Component Text</Text>
        </View>
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 
const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    TextStyle: {
      fontSize: 25,
      textDecorationLine: 'line-through',
      textAlign: 'center',
      color: "blue"
    }
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create Strikethrough text in react native app using css stylesheet in React Native.

import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container} >
        <View style={styles.MainContainer}>
          <Text style={styles.TextStyle} >Sample Text Component Text</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    TextStyle: {
      fontSize: 25,
      textDecorationLine: 'line-through',
      textAlign: 'center',
      color: "blue"
    }
  });

Screenshot : 

React Native Strikethrough Text Using the StyleSheet

This is all about React Native Strikethrough Text Using the StyleSheet. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


No comments:

Post a Comment