title: NumberOfLines in FlatList - React Native
body: <p>I have a Native App with a simple FlatList and TextInput.
  When I search any text it gets highlighted in the list as shown below:</p>
  
  <p>Now I set "numberOfLines = 3" (as per our requirement) and now it looks like this:</p>
  
  <p>The requirement is for it to look something like below. (please don't mind its my WhatsApp screenshot) It displays the highlighted text in those 3 lines with "...".</p>
  
  <p><a href="https://i.stack.imgur.com/7H5qC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7H5qC.jpg" alt="enter image description here"></a></p>
  
  <p>I am displaying the data with the below code</p>
  
  <pre><code>&lt;Text numberOfLines={3} style={[subTitle,{fontSize:normalizeFontSize(14),lineHeight:normalizeLineHeight(14)}]}&gt;
  
  {getHighlightedText(alert)}
  
  &lt;/Text&gt;
  
  </code></pre>
  
  <p>highlight function:</p>
  
  <pre><code>getHighlightedText = text =&gt; {
      //search text user inputs
      const {value} = this.props;
      if (value == "" || value == null || value == 0) {
          return &lt;Text&gt; {text} &lt;/Text&gt;
      } else {
          // split the search value
          const words = value.split(/\s+/g).filter(word =&gt; word.length);
          // join if search value has more than 1 word
          const pattern = words.join('|');
          const re = new RegExp(pattern, 'gi')
          const children = [];
  
          let before, highlighted, match, pos = 0;
          // match using RegExp with my text
          const matches = text.match(re);
  
          if (matches != null) {
              // loop all the matches
              for (match of matches) {
                  match = re.exec(text)
                  if (pos &lt; match.index) {
                      // before has all the text before the word that has to highlighted
                      before = text.substring(pos, match.index);
                      if (before.length) {
                          children.push(before)
                      }
                  }
                  highlighted = &lt;Text style={{backgroundColor: 'coral'}}&gt;{match[0]} &lt;/Text&gt;
                  // text is highlighted
                  children.push(highlighted);
  
                  pos = match.index + match[0].length;
              }
          }
          if (pos &lt; text.length) {
              // text after the highlighted part
              const last = text.substring(pos);
              children.push(last);
          }
          // children array will have the entire text
          return &lt;Text&gt;{children} &lt;/Text&gt;
      }
  }
  </code></pre>
  
  <p>Need help from React Native gurus on this. Please be kind I am new to React Native :)</p>