title: Create a search bar in a listview
body: <p>I am creating a Search bar in a list view with a list of multiples types of food, this search bar can filter the results.</p>
  
  <p>When I search a specific food and select this food, If I erase the search bar another food is selected.</p>
  
  <p>You can see the problem in this gif:
  <a href="https://giphy.com/gifs/3oKIPpagpRTfnuA9vW" rel="nofollow noreferrer">https://giphy.com/gifs/3oKIPpagpRTfnuA9vW</a></p>
  
  <p>How can I solve this problem?</p>
  
  <p>Code:</p>
  
  <pre><code>class ListFood extends Component {
  
    constructor() {
        super();
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
        this.state = {
          ds: ds,
          dataSource: ds.cloneWithRows(dataDemo),
          rawData: dataDemo,
        };
      }
  
      setSearchText(event) {
       let searchText = event.nativeEvent.text;
       this.setState({searchText});
       data = dataDemo
  
       let filteredData = this.filterNotes(searchText, data);
       ds = this.state.ds;
  
       this.setState({
         dataSource: ds.cloneWithRows(filteredData),
         rawData: data,
       });
  
      }
  
      filterNotes(searchText, notes) {
        let text = searchText.toLowerCase();
  
        return notes.filter((n) =&gt; {
          let note = n.toLowerCase();
          return note.search(text) !== -1;
        });
      }
  
      render() {
        return (
          &lt;View&gt;
            &lt;TextInput
              value={this.state.searchText}
              onChange={this.setSearchText.bind(this)}
            /&gt;
            &lt;ListView
              dataSource={this.state.dataSource}
              renderRow={(data) =&gt; &lt;Row state={this.state.CheckBoxState} data={data} /&gt;}
            /&gt;
          &lt;/View&gt;
  
        );
      }
  }
  </code></pre>
  
  <p>row:</p>
  
  <pre><code>class Row extends Component {
    constructor(props) {
      super(props);
      this.state = { checked: false };
    }
  
    render() {
      return (
        &lt;View´&gt;
          &lt;CheckBox
            onPress={() =&gt; this.setState({
              checked: !this.state.checked
            })}
            checked={this.state.checked}
          /&gt;
          &lt;Text&gt;
            { this.props.data }
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>