title: Search Filter with React Native on FlatList
body: <p>I am trying to search through a flatlist based on a search bar text. The problem I am running into is that when the user mistypes...say they wanted to type "burger" but typed "burget" by mistake then it returns nothing as it should. When the user deletes the "t" then it should re-render the flatlist again with the last text matching the "burge" part.</p>
  
  <p>note: using react-native-elements search bar which allows me to call the text with just e or event.</p>
  
  <p>What I have so far in the Main.js file:</p>
  
  <pre><code>searchText = (e) =&gt; {
      let text = e.toLowerCase();
      let trucks = this.state.data;
  
      // search by food truck name
      let filteredName = trucks.filter((truck) =&gt; {
        return truck.name.toLowerCase().match(text); 
      });
  
      // if no match and text is empty
      if(!text || text === '') {
        console.log('change state');
          this.setState({
            data: initial
          });
        }
      // if no name matches to text output
      else if(!Array.isArray(filteredName) &amp;&amp; !filteredName.length) {
        console.log("not name");
        this.setState({
          data: [],
        });
      }
      // if name matches then display
      else if(Array.isArray(filteredName)) {
        console.log('Name');
        this.setState({
          data: filteredName,
        });
      }
     };
  
  &lt;View style={styles.container}&gt;
    &lt;SearchBar
      round
      lightTheme
      containerStyle={styles.search}
      ref="search"
      textInputRef="searchText"
      onChangeText={this.searchText.bind(this)}
      placeholder='Search by Truck Name...'
     /&gt;
     &lt;TruckList getTruck={(truck) =&gt; this.setTruck(truck)} truckScreen={this.truckScreen} data={this.state.data}/&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>then the TruckList.JS:</p>
  
  <pre><code>export default class TruckList extends Component {
      // rendering truck screen
      renderTruckScreen = (item) =&gt; {
          this.props.truckScreen();
          this.props.getTruck(item);
      }
  
      render() {
          return(
              &lt;List style={styles.list}&gt;
                  &lt;FlatList
                      data={this.props.data}
                      renderItem={({ item }) =&gt; (
                          &lt;ListItem
                              roundAvatar
                              avatar={{uri: item.pic1}}
                              avatarStyle={styles.avatar}
                              title={item.name}
                              titleStyle={styles.title}
                              subtitle={
                                  &lt;View style={styles.subtitleView}&gt;
                                      &lt;Text style={styles.subtitleFood}&gt;{item.food}&lt;/Text&gt;
                                      &lt;View style={styles.subtitleInfo}&gt;
                                          &lt;Icon 
                                              name="favorite"
                                              size={20}
                                              color={"#f44336"}
                                              style={styles.subtitleFavorite}
                                          /&gt;
                                          &lt;Text style={styles.subtitleFavoriteText}&gt;{item.favorited} favorited&lt;/Text&gt;
                                      &lt;/View&gt;
                                  &lt;/View&gt;
                              }
                              onPress={() =&gt; this.renderTruckScreen(item)}
                          /&gt;
                      )}
                      keyExtractor={(item) =&gt; item.uid}
                      ListFooterComponent={this.footer}
                  /&gt;
              &lt;/List&gt;
          )
        }
      }
  </code></pre>
  
  <p>I have tried a few other ways to no avail. Also the only solutions I have seen working for React Native are with ListView which will be depreciated in time. So I am trying to do this with the new FlatList Component.</p>
  
  <p>Thanks for your help!</p>