How to implement Searchable FlatList in react native

When list become long its difficult to find items on list. So in this blog we will learn how to implement searchable FlatList in react native.

Import all required component as below.

 import React, {Component} from 'react';
 import {
   SafeAreaView,
   View,StyleSheet,
   TouchableOpacity,
   Text,
   FlatList,
   Alert} from 'react-native';
 import Constants from 'expo-constants';
 import {SearchBar} from 'react-native-elements';

Here SearchBar component using from 'react-native-elements' .

Lets first define an array of list for our FlatList

const data=[
  {key:"1",title:"Android"},
  {key:"2",title:"IOS"},
  {key:"3",title:"React"},
  {key:"4",title:"Node JS"},
  {key:"5",title:"Java"},
  {key:"6",title:"PHP"},
  {key:"7",title:"Javascript"},
  
];

Now lets initialize some state variable which will be use later.

  constructor(){
        super()
        this.state={
            data:data,
            search:""
        }
    }

Now, we need to add a search bar for FlatList so user can search the list . FlatList has a prop to add any custom component to its header which is useful as we’ll be adding a search component there.

      renderHeader=()=>{
      const { search } = this.state;
        return(
            <SearchBar
             placeholder="Search Here"
             lightTheme   
             onChangeText={text=>this.searchAction(text)}
             autoCorrect={false}
             value={search}
            />
        )
    }
    searchAction=(text)=>{
        const newData=data.filter(item=>{
            const itemData=`${item.title.toUpperCase()}`;
            const textData=text.toUpperCase();
            return itemData.indexOf(textData) > -1;

        });
        this.setState({
            data:newData,
            search:text
        });
    }

In the above code snippet, seachAction function which will filter our existing list user input on seacrbar

So our flatList component will look like

  <FlatList
      data={this.state.data}
      renderItem={({item})=>this.renderItem(item)}
      keyExtractor={item=>item.key}
      ListHeaderComponent={this.renderHeader}
       >
   FlatList>

Here ListHeaderComponet is the property to add seacrh bar at top of the FlatList.

So our complete component will be as bellow

  import React, {Component} from 'react';
  import {
    SafeAreaView,
    View,StyleSheet,
    TouchableOpacity,
    Text,
    FlatList,
    Alert} from 'react-native';
  import Constants from 'expo-constants';
  import {SearchBar} from 'react-native-elements';
  const data=[
    {key:"1",title:"Android"},
    {key:"2",title:"IOS"},
    {key:"3",title:"React"},
    {key:"4",title:"Node JS"},
    {key:"5",title:"Java"},
    {key:"6",title:"PHP"},
    {key:"7",title:"Javascript"},
    
  ];
  class FlatListWithSearch extends Component {
      constructor(){
          super()
          this.state={
              data:data,
              search:""
          }
      }
    showItem=(data)=>{
      Alert.alert(data);
    }

      renderHeader=()=>{
        const { search } = this.state;
          return(
              <SearchBar
              placeholder="Search Here"
              lightTheme   
              onChangeText={text=>this.searchAction(text)}
              autoCorrect={false}
              value={search}
              />
          )
      }
      searchAction=(text)=>{
          const newData=data.filter(item=>{
              const itemData=`${item.title.toUpperCase()}`;
              const textData=text.toUpperCase();
              return itemData.indexOf(textData) > -1;

          });
          this.setState({
              data:newData,
              search:text
          });
      }
    

      renderItem=(item)=>{
        return(
        <View key={item.key} style={styles.item}>
          <TouchableOpacity onPress={()=>this.showItem(item.title)}>
            <Text>{item.title}Text>
          TouchableOpacity>
        View>
        )
      }
      render(){
          return(
              <SafeAreaView style={styles.container}>
                  <FlatList
                  data={this.state.data}
                  renderItem={({item})=>this.renderItem(item)}
                  keyExtractor={item=>item.key}
                  ListHeaderComponent={this.renderHeader}
                  >
                  FlatList>
              SafeAreaView>         
              
          )
      }
  }
  export default FlatListWithSearch;

  const styles =StyleSheet.create({
      container: {
          flex: 1,
          marginTop: Constants.statusBarHeight,
          padding:10
        },
        item:{
          padding:10,
          borderWidth:1,
          borderRadius:5,
          borderColor:"#c1dec5", 
          marginBottom:10},
  })