CODEWITHSUNDEEP
react-native
Kelvin
Kelvin

Reputation: 2288

Remove textDecorationLine from nested text components for React Native

Hi I have a nested text components to display results for a search with highlighted text. I would like to underline the highlighted query text but I am unable to remove the the textDecorationLine for childs of that text components. I need to nest the text components because I want the text to wrap.

Here's the code:

  <Text style={styles.text}>
      Normal Text
        <Text style={styles.highlighted}>
          Highlighted Text
        <Text style={styles.text}>
          Normal Text
        </Text>
      </Text> 
  </Text>

const styles = StyleSheet.create({
  snippet: {
    textDecorationLine: 'none',
    textDecorationColor: 'orange',
  },
  highlight: {
    textDecorationLine: 'underline',
    textDecorationColor: 'orange',
  },
});

Expected Behavior:

Normal Text (underlined)Highlight Text(underlined) Normal Text

Result:

Normal Text (underlined)Highlight Text Normal Text(underlined)

Upvotes: 0

Views: 925

Answers (5)

Sebastian Duran
Sebastian Duran

Reputation: 115

textDecorationLines: "none"

Upvotes: 0

Tim
Tim

Reputation: 10719

You can overcome this issue by setting the textDecorationColor to transparent for the child text:

Edit

textDecorationColor is a iOS-only prop.

Code: 

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.snippet}>
      Normal Text
        <Text style={styles.highlight}>
          Highlighted Text
        <Text style={{textDecorationColor: 'transparent'}}>
          Normal Text
        </Text>
      </Text> 
      </Text>
      </View>
    );
  }
}

Demo:

Important! Make sure to select iOS tab on snack. The web tab does not behave like a real react-native project.

https://snack.expo.io/@tim1717/courageous-peach

Upvotes: 2

Sham Gir
Sham Gir

Reputation: 324

you can try this : 

<Text style={styles.snippet}>
  Normal Text
  <Text style={styles.highlight}>
    Highlighted Text
    </Text>
    <Text style={styles.snippet}>Normal Text</Text>
</Text>

Upvotes: 0

VilleKoo
VilleKoo

Reputation: 2854

You could get away just by giving the same textDecorationColor as the background color where you wanna hide the underline.

Here's a demo for you

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

class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <Text style={styles.text}>Normal Text
          <Text style={styles.highlighted}> Highlighted Text </Text>
          <Text>Normal Text</Text>
        </Text> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  app: {
    backgroundColor: 'white'
  },
  text: {
    textDecorationLine: 'underline',
    textDecorationColor: 'orange',
  },
  highlighted: {
    textDecorationLine: 'underline',
    textDecorationColor: 'white',
  }
});

export default App;

Upvotes: 1

Mehran Khan
Mehran Khan

Reputation: 3636

You could close the "highlight" text view to achieve this behaviour

Complete Code 

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


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          Normal Text 
          <Text style={styles.highlight}> Highlighted Text</Text>
          <Text> Noraml Text</Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 16,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  highlight: {
    textDecorationLine: 'underline',
    textDecorationColor: 'orange',
  },
});

enter image description here

Snack Link : https://snack.expo.io/@mehran.khan/underlinetext

Upvotes: 0

Related Questions