React Native: Find substring in text, and change style programmatically

Question

Forgive me if I'm missing something standard here, as React isn't my default javascript dev tool. This seems like something that should fairly easily obtainable though so I figured I should ask. Is it possible, and if so how can I find a substring, and then change the style of that substring in React Native?

Example:

render() {
    return (
        <View>
            <Text>
                {this.state.myText}
            </Text>
        </View>
    );
}

componentDidMount() {
    setTimeout(() => {
        let newStr = this.state.myText.replace('green',  '<Text style={{ color: "green" }}>green</Text>');
        this.setState({ myText: newStr });
    },
    3000)
}

But clearly you can't dynamically add a Text component in order to style a substring this way. What is the proper method?

Edit:

I've been looking into this more, and if I'm not mistaken... I have to make an entire array of subcomponents, keep track of the subcomponents, and then dynamically add/remove text components to this array along with the strings if I simply want to change the color of text? Someone please tell me React is not this flawed in this aspect...

Final code used:

render() {
    return (
        <View style={styles.container}>
          <Text>
            {this.state.textItems.map(item => (
              <Text style={{ color: item === 'green' ? 'green' : 'black' }}>{item}</Text>
            ))}
          </Text>
        </View>
    );
}

componentDidMount() {
    setTimeout(() => {
        this.setState({ textItems: this.state.textItems[0].split((/(green)/)) });
    },
    3000)
}

Text modules cannot be parents. Unable to insert text into text module. — hong developer, Sep 05 '19 at 15:42

score 1 · Accepted Answer · answered Sep 05 '19 at 15:56

1

You can define an array which contains strings or objects (if you want to customize it deeper, not only it's color), and then map it into array of Text components. Here is the sample code.

class Sample extends Component {
  // You can manipulate this items array, using setState
  state = {
    items: ['black', 'green', 'red']
  }

  render() {
    return (
      <Text>
        {textItems.map(item => (
          <Text style={{ color: item }}>{item}</Text>
        ))}
      </Text>
    );
  }
}

the result will be like this

answered Sep 05 '19 at 15:56

I Putu Yoga Permana

3,980
29
33

I really don't want to believe that this is what must be done, but everything I've read says it is and this is the **only** way to change a substring's style. Thank you. – Z. Bagley Sep 05 '19 at 16:03
it seems awkward at first, but you will be comfortable with react. You're welcome! @Z.Bagley – I Putu Yoga Permana Sep 05 '19 at 16:05

score 0 · Answer 2 · answered Sep 05 '19 at 15:58

0

You should do this by using styles. There are many ways but this is one:

constructor(){
  this.state = {color: "black", myText: "hello"};
}
render() {
    return (
        <View>
            <Text style={{color: this.state.color}}>
                {this.state.myText}
            </Text>
        </View>
    );
}

componentDidMount() {
    setTimeout(() => {
        this.setState({ color: "green" });
    },
    3000)
}

answered Sep 05 '19 at 15:58

Marc Sloth Eastman

693
1
10
19

Looking to change part of the main string's color on search (substring), not the entire string. – Z. Bagley Sep 05 '19 at 16:04
@Z.Bagley so you have a search box and want to change the color of the text that exactly matches the search box's text? – Marc Sloth Eastman Sep 05 '19 at 16:20
I have text that is pulled dynamically from various locations (imagine a paragraph from a book, or a webpage) and want to identify all occurrences of a specific word (also found programmatically, dynamically). The answer I accepted does what I was looking for, but I'm always open to other suggestions. – Z. Bagley Sep 05 '19 at 16:24
@Z.Bagley forgive me but I don't see how that answer supports dynamic color change depending on other text. I don't have an answer for you but I'm interested to see what you work out – Marc Sloth Eastman Sep 05 '19 at 16:42
Feel free to check out my updated answer for the final code I used. This splits out the 'green' and styles it depending on the text. In my real use case, I will style it depending on more complex logic but the general idea remains. – Z. Bagley Sep 05 '19 at 18:10

React Native: Find substring in text, and change style programmatically

Example:

Edit:

Final code used:

2 Answers2

Linked