Filtering simple Flatlist

Question

I want to filter this simple flatlist through a search bar. How do I code it so that whatever I write something on the input text it filters the flatlist? Could you help me completing it?

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {ListItem, SearchBar} from 'react-native-elements';

export default class HomeScreen extends React.Component{
   render() {
       return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerTitle}>Home</Text>
            </View>
            <View style={styles.container1}>
                <Icon name={"ios-search"} style={styles.icon}/>       
                <TextInput style={styles.inputBox}
                          underlineColorAndroid='rgba(0,0,0,0)' 
                          placeholder="Procura aqui"                                                                                                                                                                                                                                                                                              
                          placeholderTextColor = "white"
                          selectionColor="black"
                          keyboardType="default"              
                          />
             </View> 
             <View style={styles.flatlist}>
              <FlatList
                data = {[
                  {key:'Tiago'},
                  {key:'Ricardo'},
                  {key:'Beatriz'},
                  {key:'Miguel'},
                  {key:'Simão'},
                  {key:'David'}
                ]}
                renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
              />
             </View>
    </View>           
    );
}
}

Answer 1

You should have a state value for searchtext and filter the array based on that. the component should be as below.

export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: '',
    };
  }

  render() {
    //Data can be coming from props or any other source as well
    const data = [
      { key: 'Tiago' },
      { key: 'Ricardo' },
      { key: 'Beatriz' },
      { key: 'Miguel' },
      { key: 'Simão' },
      { key: 'David' },
    ];

    const filteredData = this.state.searchText
      ? data.filter(x =>
          x.key.toLowerCase().includes(this.state.searchText.toLowerCase())
        )
      : data;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Home</Text>
        </View>
        <View style={styles.container1}>
          <Icon name={'ios-search'} style={styles.icon} />
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            placeholderTextColor="white"
            selectionColor="black"
            keyboardType="default"
            onChangeText={text => this.setState({ searchText: text })}
            value={this.state.searchText}
          />
        </View>
        <View style={styles.flatlist}>
          <FlatList
            data={filteredData}
            renderItem={({ item }) => (
              <Text style={styles.item}>{item.key}</Text>
            )}
          />
        </View>
      </View>
    );
  }
}

Answer 2

Please provide flatlist data from the state so you can control it while searching. Assuming if you want to bring those results at the top that matches your search text, you can do something like the below code. Firstly add onChangeText prop to the textinput and handle the input like this.

filterItems = (search_text) => {

var items = [...this.state.data];

var filtered = [];

if (search_text.length > 0) {
  filtered = items.sort(
    (a, b) => b.includes(search_text) - a.includes(search_text),
  );

  this.setState({data: filtered});
} else {
  filtered = items.sort((a, b) => b - a);

  this.setState({data: filtered});
}

};