Filtering simple Flatlist

user_12648686 0
Viewed 3775

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>           
    );
}
}
react-native-flatlist react-native reactjs search
2 Answers

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>
    );
  }
}
user_14357220

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});
}

};

user_66991200
Related