React Native Add Search Bar Filter on JSON Listview Example

Search Bar Filter is a real time filtering technique used in almost all Android and iOS applications to filter the JSON data in FlatList and ListView by typing text in TextInput component. It will filter the ListView according to user typed value and set the newly filter result again in ListView. So in this tutorial we would going to make a react native app with Real TimeĀ Search Bar Filter on JSON Parsing ListView. So let’s get started šŸ™‚ .

Contents in this projectĀ Add Search Bar Filter on JSON Listview Android iOS Tutorial :

1. Read my previous tutorial about JSON Parsing FlatList. Because we are using same JSON in current tutorial as i was used in this tutorial. So reading this tutorial is must to understand, how we are converting the MySQL data to JSON.

JSON Screenshot:

2. ImportĀ Text, StyleSheet, View, ListView, TextInput, ActivityIndicator and Alert component in your project.

3. Create constructor() in your class. Now make 2 State variables named asĀ isLoading and text. isLoading state is used to show and hide theĀ ActivityIndicator and text state is used to set text insideĀ TextInput. Now we would make a Global Array named asĀ arrayholder=[] .We would use this Array Array to Filter the ListView.

4. Create Fetch() API inĀ componentDidMount() method. The Fetch() Web API is used in this project to Parse JSON from given HTTP URL. We would also store the Parsed JSON insideĀ arrayholder Array.

5. Create function named as GetListViewItem() for retrieve selected ListView item and show inside Alert message.

6. CreateĀ SearchFilterFunction() and pass Text inside it as argument. Now we would filter the JSON array according to given value pass as argument. After filtering data we would set the newly data inĀ dataSource state.

7. CreateĀ ListViewItemSeparator() function to show a horizontal line between each ListView element .

8. Add IF condition in render’s block, which is used to Show and Hide theĀ ActivityIndicator component after parsing the JSON.

9. Now create a Root View in render’s return block.

10. Create a TextInputĀ and ListView component in root view. This is used to get search input from user.

11. Create Style classes :

12. Complete source code forĀ App.jsĀ File :

Screenshot in Android device :

Search Bar FilterScreenshot in iOS Application :

45 Comments

  1. Hi there!
    Thanks for your tutorial!

    here’s a question,
    the search bar within my application would need to search for different fields e.g. person’s name; person’s address
    is it possible to return more than one field in searchfilterfunction ?

  2. does it work in FlatList ?
    I have tried it, but error

  3. How do i make a search bar like google or Facebook app which is in centre of the app screen but as we click or typing to search it gets at top position of the app and background is also visible.

  4. Hi there!

    hereā€™s a question,
    the search bar within my application would need to search for different fields e.g. personā€™s name; personā€™s address
    is it possible to return more than one field in searchfilterfunction ?

  5. Hi admin,you have done a wonderful job!Thanks.What to know if i can upload file from mobile(react native) to web server (mysql).if yes,how?

    • Aruna i have not tried yet uploading code but soon i will upload new tutorial regarding to uploading content online to server šŸ™‚ .

  6. Hi, I have followed your tutorial step by step, but it constantly gives me an error that I can not identify. I am using my own API in laravel that returns the data in json format.
    My apk uploads all the data to me at the beginning. The problem is that when I write in the TextInput it returns “undefined is not a function (evaluating ‘this.arrayholder.filter”). Thank you for your attention.

    • Gilbe just create SearchFilterFunction() inside your class and check that you have created arrayholder=[] array in constructor.

      • I solved the problem. My json return the array on a variable.

        {“my_fruits”:[{“id”:1,”fruit_name”:”Apple”},{“id”:2,”fruit_name”:”Apricot”},
        {“id”:3,”fruit_name”:”Avocado”},{“id”:4,”fruit_name”:”Banana”}]}

        I add the name on the line:

        this.arrayholder=responseJson.my_fruits.

        Thanks

  7. good tutorial man, thank you

  8. How to show the list only after something has been typed in TextInput.

  9. Hello sir, when I am trying to apply the same filtering with flatlist then it is working properly but when i clear back the last character in the search inputtext the app will crash….Why so??

    • Sangeeta you need to put a condition and check it the search box is empty then set the dataSource value is null or empty .

  10. Hello, firstly thank you for tutorial. I have a question, when I run code, keyboard won’t open, can you please help me?
    Regards

  11. Hi bro
    when I use it with FlatList instead ListView I take an Error:”undefined is not a function (evaluating this.state.datasource.cloneWith….).

  12. Hi Bro,
    Thanks a lot for your tutorial. It helps me a lot.
    I want one more favor from you if you could please help me out.

    I have an array of dictionaries and each dictionary has a key with one more array and this array has a key with one more array within.

    So for example:
    mainArray = [
    {
    key1: [{
    key2: [{
    key3: value
    }]
    }]
    }]

    How could I perform search for this kind of nested arrays in a single function? My need is, if I type in any character then it should be searched in all arrays i.e. mainArray, key1 subArray and key2 subArray simultaneously.

    I know it’s very tough task to complete but could you please help me to get it work?

    Thanks a lot in advance.

  13. Hi bro
    I am trying to apply the same filtering with ListView and it is working properly but when i clear characters by pressing back arrow button of keyboard in the search input text the app is crashing with an Error:ā€undefined is not an object (evaluating ‘this.state.dataSource.cloneWithRows’)”.

    I’m setting my array in constructor of my class like below:

    constructor(props)
    {
    super(props);

    this.state = {
    width: Dimensions.get(‘window’).width,
    height: Dimensions.get(‘window’).height,
    isLoading: true,
    searchText: ”,
    }

    // global variables
    this.iDeviceWidth = Dimensions.get(‘window’).width
    this.myData = [];
    }

  14. yeahhh, worked for me.
    But couldnot type in simulator ( I-Phone -8), for that goto Hardware> Keyboard>connect hardware keyboard and works fluently fine. Thanks šŸ˜‰

  15. Thank you so much for this .. you have no idea how much i needed it. i have one question please, what if i want to fetch the json file from the app directory instead of the web.. the same file you scereenshoted .. how can i fetch it locally?
    fetch(‘./jsonfile.php’) doesnt work
    it creates an error.
    (attempt to invoke string.equals(object) on a null ref)

  16. Thanks a lot Jonathan you have saved my time.

  17. No not at all he means to say .json file saved in local system

  18. can you please tell how to perform this same functionality on flatlist instead of listview..I think listView is deprecated now….

  19. is it possible to return more than one field in searchfilterfunction ?

Leave a Reply

Your email address will not be published. Required fields are marked *