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
- textDecorationLine Props
- textDecorationLine underline
- textDecorationLine line-through
- textDecorationLine underline line-through
textDecorationLine Props
add underline, and line-through (cut text). By default textDecorationLine is none.
Type | Default |
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';34const LotsOfStyles = () => {5 return (6 <View style={styles.textContainer}>7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>8 </View>9 );10};1112const 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});2425export default LotsOfStyles;
output

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';34const LotsOfStyles = () => {5 return (6 <View style={styles.textContainer}>7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>8 </View>9 );10};1112const 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});2425export default LotsOfStyles;
output

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';34const LotsOfStyles = () => {5 return (6 <View style={styles.textContainer}>7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>8 </View>9 );10};1112const 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});2425export default LotsOfStyles;
Output

Thanks For Reading…