React Native replace parts of string with tagged elements - ios

Question

I have a sentence for example:
"How now brown cow"
I want to find certain words within the sentence, for example 'now' and 'cow' and have them generated with difference tags added around each word. For example:
<Text style={styles.text}>
How <TouchableHighlight><Text>now</Text></TouchableHighlight>brown<TouchableHighlight><Text>cow</Text></TouchableHighlight>
But I can't see how to add these element tags to them. The basic code is below:
render() {
return (
var sentence = "How now brown cow";
<TouchableHighlight onPress={() => this._pressRow(rowID)}>
<View>
<View style={styles.row}>
<Text style={styles.text}>
{sentence}
</Text>
</View>
</View>
</TouchableHighlight>
);
},

Answer 1

Split your sentence using String.prototype.split() at iterate through that array.
Make sure, that you change the flexDirection to row, otherwise the single elements will be positioned in single lines.
I added a space after each word, maybe you could look for a better solution, so that the space won't be added to the last element.
render() {
const sentence = "How now brown cow";
const words = sentence.split(' ');
const wordsToHighlight = ['now', 'cow'];
const renderWord = (word, index) => {
if(wordsToHighlight.indexOf(word) > -1) return (<TouchableHighlight><Text>{word} </Text></TouchableHighlight>);
return (<Text>{word} </Text>);
}
return (<View style={{flexDirection: 'row'}}>{React.Children.map(words, renderWord)}</View>);
}