Highlight the Search Text in FlatList - React Native

Question

I have a React Native App and i have a Search Bar and a FlatList. My search logic is as below

handleSearch(text) {
  const newData = _.filter(this.state.temp, (item) => {
    const itemData = item.Desc ? item.Desc.toUpperCase() : ''.toUpperCase();
    const textParts = text.toUpperCase().split(' ');
    let idx = itemData.indexOf(textParts);
    let shouldInclude = true;
    for (let i = 0; i < textParts.length; i++) {
      const part = textParts[i];
      shouldInclude = shouldInclude && (itemData.indexOf(part) > -1);

      if (!shouldInclude) {
        return false;
      }
    }
    return true;
  });

  this.setState({
    notifications: newData,
    value: text
  });
}

SearchBar:

<SearchBar      
  lightTheme    
  value= {value}
  inputStyle={{margin: 0}}
  placeholder="Search here...."            
  onChangeText={(text)=>{this.handleSearch(text,false)}}     
  onTouchStart={()=>{this.renderDropdown(true)}}   
/>

FlatList:

render() {
  return
    <FlatList
      keyExtractor={(item, id) => item.id}
      data={notifications}
      renderItem={this.renderItem.bind(this)}
    />
}

render item:

renderItem({item}) {
    return <Item item={item} 
    onPress = {()=> {this.goToDetails()}
    />
  }

Item Component:

export default class Item extends Component {
  handlePress() {
    return this.props.onPress();
  }

  render() {
      const {
        row,
        textContainer,
        id,
        ordername,
        desc,
        seperator
      } = styles;
      const {
        item
      } = this.props;
      const {
        Id,
        OrderName,
        Desc
      } = item;

      return (
          <View>
            <TouchableOpacity onPress = {
              () => {this.handlePress()>
                <View style = {seperator}>
                </View>
                <View style = {row}>
                  <View style = {textContainer}>
                    <Text style = {id}>{Id}</Text>
                    <Text style = {ordername}>{OrderName}</Text>
                    <Text style = {desc}>{Desc}</Text>
                  </View>
                  <View style = {seperator}>
                  </View>
                </View>
            </TouchableOpacity>
          </View>
      )
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginLeft: 15,
    marginRight: 15,
    backgroundColor: 'white',
    paddingTop: 5,
    paddingBottom: 10
  },
  textContainer: {
    flex: 3,
    paddingLeft: 5,
    fontWeight: 'bold',
    fontSize: 8
  },
  id: {
    flex: 1,
    fontSize: 14,
    color: 'black',
    fontSize: 15
  },
  ordername: {
    flex: 1,
    fontSize: 14,
    color: 'blue',
    fontSize: 15
  },
  desc: {
    flex: 1,
    fontSize: 14,
    color: 'blue',
    fontSize: 15
  },
  seperator: {
    padding: 20
  }
})

I want a Search Filter Highlight like below where as soon as i start typing in the searchBar the text in the FlatList has to be highlighted.

How can i implement this?? React native highlight word? Any function? Please help

please add `renderItem` code to your question – Hagai Harari Apr 28 '20 at 15:19 — Hagai Harari, Apr 28 '20 at 15:19
Updated the question with rendertem code. – grooot Apr 28 '20 at 15:25 — grooot, Apr 28 '20 at 15:25

score 3 · Answer 1 · answered Apr 28 '20 at 15:37

3

it's looks like SearcBar value stored as this.state.value, pass it to Item and use regex to split your text (used Desc as the reference, use it as fit you...)

    renderItem({item}) {
      return <Item 
        item={item} 
        onPress = {()=> {this.goToDetails()}
        value={this.state.value}
       />
     }  




//Item.js

     getHighlightedText = text => {
       const { value } = this.props
       const parts = text.split(new RegExp(`(${value})`, 'gi'));
       return <Text style={desc}>
                {parts.map(part => part.toLowerCase() === value.toLowerCase()
                             ? <View style={{backgroundColor: 'red'}}>{part}</View> 
                             : part)}
             </Text>;
        }

       <View> {this.getHighlightedText(Desc)} </View>

answered Apr 28 '20 at 15:37

Hagai Harari

2,767
3
11
23

Thanks a lot!!! it works fine when I search a complete text. For Example if my flat list has 2 items - "My Dog" and "Her Cat". If my Search Text is "Dog" then Dog is highlighted in red. But if I Search "M Dog" then nothing gets Highlighted. How to detect the whitespace? Please help !!! – grooot Apr 29 '20 at 02:30
RegExp(`(${value}\s)`, gi)) – Hagai Harari Apr 29 '20 at 05:21
const parts = text.split(new RegExp( `(${value}\s)` ,'gi' )); doesn't work. Now even the single text is not getting highlighted. Tried with \\s too. – grooot Apr 29 '20 at 05:35
Is is https://stackoverflow.com/questions/15472764/regular-expression-to-allow-spaces-between-words helpful? – Hagai Harari Apr 29 '20 at 05:43
nooo adding spaces did not work. The issue is that in your code the this.state.value is taken as an entire word. A small deviation from that word will not highlight the text. Any workaround? – grooot Apr 29 '20 at 05:55

Highlight the Search Text in FlatList - React Native

1 Answers1