Navigate back to the homepage

Text decoration line in React Native

Infinitbility
Style
May 6th, 2021 · 1 min read
Text decoration line in React Native

Hi Devs’,

Welcome to infinitbility,

This article help you to use textDecorationLine in react native with their output example.

React Native provide textDecorationLine style props to make horizontal line with yout text like underline, line through, and both.

let’s start today topic textDecorationLine in React Native Or how to use textDecorationLine in react native

textDecorationLine default value is none use if developer not defined textDecorationLine for text.

Table of contents

  1. textDecorationLine Props
  2. textDecorationLine underline
  3. textDecorationLine line-through
  4. textDecorationLine underline line-through

textDecorationLine Props

add underline, and line-through (cut text). By default textDecorationLine is none.

TypeDefault
enum(none, underline, line-through, underline line-through)none

textDecorationLine underline example

Using textDecorationLine underline property you will make text with underline like below example.

textDecorationLineUnderline.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 textContainer: {
14 flex: 1,
15 padding: 20,
16 alignItems: 'center',
17 justifyContent: 'center',
18 },
19 text: {
20 fontSize: 10,
21 textDecorationLine: 'underline'
22 }
23});
24
25export default LotsOfStyles;

output

react native textDecorationLine underline

textDecorationLine line-through example

Using textDecorationLine line-through property you will make text with line-through ( cut text or wrong text ) like below example.

textDecorationLineLineThrough.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 textContainer: {
14 flex: 1,
15 padding: 20,
16 alignItems: 'center',
17 justifyContent: 'center',
18 },
19 text: {
20 fontSize: 10,
21 textDecorationLine: 'line-through'
22 }
23});
24
25export default LotsOfStyles;

output

react native textDecorationLine line-through

textDecorationLine underline line-through example

Using textDecorationLine underline line-through property you will make text with line-through ( cut text or wrong text ) and under line both like below example.

textDecorationLineUnderlineLineThrough.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5 return (
6 <View style={styles.textContainer}>
7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
8 </View>
9 );
10};
11
12const styles = StyleSheet.create({
13 textContainer: {
14 flex: 1,
15 padding: 20,
16 alignItems: 'center',
17 justifyContent: 'center',
18 },
19 text: {
20 fontSize: 10,
21 textDecorationLine: 'line-through'
22 }
23});
24
25export default LotsOfStyles;

Output

react native textDecorationLine underline line-through

Thanks For Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

More articles from Infinitbility

Line height in React Native

Line height in React Native

React Native Tutorial - lineHeight in React Native

May 5th, 2021 · 1 min read
Letter spacing in React Native

Letter spacing in React Native

React Native Tutorial - letterSpacing in React Native

May 4th, 2021 · 1 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]