How to create Strike Through Text Component in React Native

Text is one of the most important components in react native. In this blog post, let’s see how to add strikethrough text in react native.

To create a strikethrough text you have to style the text with the props textDecorationLine and textDecorationStyle. Following is the example react native code snippet.

<Text style={{textDecorationLine: 'line-through', 
textDecorationStyle: 'solid'}}>
Strike through text react native
</Text>

Following is the complete react native strike through text example.

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

const Home = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text
        style={{
          textDecorationLine: 'line-through',
          textDecorationStyle: 'solid',
        }}>
        Strike through text react native
      </Text>
    </View>
  );
};

export default Home;

Following is the output of this react native tutorial.

You can go through this link to know more about the style properties of the Text component.

That’s how you add strike through text in react native.