CODEWITHSUNDEEP
javascriptandroidiosreact-nativeflexbox
Bruno Brugger
Bruno Brugger

Reputation: 111

How to properly highlight text in React Native?

I would like to highlight a multiline text in a React Native app by changing the text's background color. The problem is that the background color changes in the whole text area, not just under the words.

class Example extends Component {
  render() {
    const text = '...';

    return (
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>
          {text}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 200,
  },
  textStyle: {
    backgroundColor: 'red',
  },
});

The code above results in something that looks like this: current output

But I would like it to look like this: expected output

I can get that result by splitting the text and adding the background color to the individual words:

class Example extends Component {
  render() {
    const text = '...';

    const brokenText = text.split(' ').map(word => (
      <Text style={styles.textStyle}>{word} </Text>
    ));

    return (
      <View style={styles.textContainer}>
        {brokenText}
      </View>
    );
  }
}

But splitting the text into individual words doesn't seem like the best solution, and has a huge performance cost. Is there any cleaner way to do it?

Upvotes: 11

Views: 19968

Answers (5)

U.A
U.A

Reputation: 3373

This simple function with Lodash

  const highLightWord = (word, highlight) => {
    const match = _.words(word, RegExp(highlight)); // "Aku"
    const notMatch = _.replace(word, match, ""); // "rana"
    return (
      <View style={{ flexDirection: "row" }}>
        <Text style={{ backgroundColor: "yellow" }}>{match}</Text>
        <Text>{notMatch}</Text>
      </View>
    );
  };

return (
 {highListSearch("Akurana", "Aku")}
)

Upvotes: 0

adesurirey
adesurirey

Reputation: 2620

This is still not proper but I had it rendering as you expect by adding an invisible character (no-width space here) between each word, so the text breaks on it which has no background color. Here is the code : 

const NO_WIDTH_SPACE = '​'; // This is a special char you should copy and paste, not an empty string!

const Example = () => {
  const highlight = string =>
    string.split(' ').map((word, i) => (
      <Text key={i}>
        <Text style={styles.highlighted}>{word} </Text>
        {NO_WIDTH_SPACE}
      </Text>
    ));

  return (
    <Text>
      Some regular text {highlight('with some properly highlighted text')}
    </Text>
  );
}

const styles = StyleSheet.create({
  highlighted: {
    backgroundColor: 'yellow',
  },
});

Here is a Snack where you can see the result and play with it : https://snack.expo.io/@adesurirey/properly-highlight-text-with-react-native Snack preview

It can surely be improved, I'll be happy to have feedback.

Upvotes: 6

Manoj Perumarath
Manoj Perumarath

Reputation: 10194

Try using

react-highlight-words library which can meet your need or use react-native-highlight-words library.

Both of these libraries are derived from the node package highlight-words-core

Upvotes: 1

Dinesh Katwal
Dinesh Katwal

Reputation: 960

Here i have done you can look.

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

export default class App extends Component {
  render() {
    const array =["Change code in the editor and watch it change on your phone! and fine."];
    return (
      <View style={styles.container}>
        <Text>
        {array.map(t=> (
            <Text style={styles.paragraph}>{t}</Text>))}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  paragraph: {
    backgroundColor: 'red'
  },
});

Upvotes: 1

alexhernandez
alexhernandez

Reputation: 1

I believe the issues is the display css property on your component.

Your component seems to be rendering with display: block; instead of display: inline;

See example: https://jsfiddle.net/oorangecchicken/2qkey6o9/

Upvotes: -3

Related Questions