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

Sahebul Islam

1 Comments

Vincent

March 09, 2026 at 11:37 Reply

Nice explanation of cross-platform development benefits. Experienced React Native developers can help businesses reduce development costs while maintaining high app quality. Understanding these advantages helps companies plan better digital solutions. Also found this useful resource: https://mobisoftinfotech.com/services/hire-react-native-developers

Your email address will be private. Required fields are marked with *

Name *

Email *

Website