CODEWITHSUNDEEP
javascriptreactjsreact-nativesearch
grooot
grooot

Reputation: 466

Search option feature - react native

I have a small confusion in incorporating a feature in my React Native App.
TextInput to Search and a Flatlist with data.
When I type something in TextInput the Flatlist filters and displays/highlights the search text.
I typed "announcement" as shown below. I have restricted my text to 3 lines. Click on arrow and we can read the full message.

enter image description here

Now the requirement is when I type "announcement" or any search string the entire text should be displayed (not just 3 lines).

Code: here when "arrowClicked" state is true the message expands and all lines can be seen. When click on it again the message collapses. "value" state has the search string. now when "value" is not empty the message has to be expanded . 

              { arrowClicked === true ? 
              <Text>{value !== "" ? getHighlightedText(alert) : alert}</Text>
              :
              <Text numberOfLines={3}>{value !== "" ? getHighlightedText(alert) : alert}</Text>
              }
              .
              .
              .
              {
                arrowClicked === true ? 
                <Icon type='materialicons' name='arrow-drop-up' size={33} onPress={()=>{this.setFullLength()}}  />
                : 
                <Icon type='materialicons' name='arrow-drop-down' size={33} onPress={()=>{this.setFullLength()}}  />

               }

How do I incorporate this logic??? Please help!!!

Upvotes: 0

Views: 75

Answers (1)

Kubwimana Adrien
Kubwimana Adrien

Reputation: 2531

If value is the search string then you need to set another property like initSearch: true when the search is performed or when setting the value of value then add the new property to the if statement like:

{ arrowClicked === true || initSearch ? 
    <Text>{value !== "" ? getHighlightedText(alert) : alert}</Text>
    :
    <Text numberOfLines={3}>{value !== "" ? getHighlightedText(alert) : alert}</Text>
 }
              .
              .
              .
 { arrowClicked === true || initSearch ? 
      <Icon type='materialicons' name='arrow-drop-up' size={33} onPress={()=>{this.setFullLength()}}  />
      : 
      <Icon type='materialicons' name='arrow-drop-down' size={33} onPress={()=>{this.setFullLength()}}  />

  }

When the collapse is called set initSearch to false.

Upvotes: 2

Related Questions