React Native Apply Filter on JSON ListView Data Using PHP MySQL

Real time filter functionality is recommended for every dynamic react native application who wish to Filter the custom JSON ListView. So in this tutorial we would going to create a react native application with JSON data ListView and filter that data using PHP script. So let’s get started ūüôā .

What we are doing in this project ( Project Description РMust Read ) : 

We are creating a react native app with 2 activities classes using React Navigation Library. First activity name is MainActivity and Second activity name is SecondActivity. The MainActivity class is used to show only the Name of students from JSON fetching from MySQL database. Now we would add the onPress event on ListView and get the selected ListView item ID. After that using the React Navigation inbuilt method this.props.navigation.navigate we would open the SecondActivity and send the Selected Item ID along with it. Now we would receive the Item ID using this.props.navigation.state.params in SecondActivitySecondActivity and run a real time web call to server using Fetch() method. It would send the Item ID on server and on server we are using the PHP script to Get ID and fetch only given ID record from MySQL database. After successfully fetching the only selected record it would return us in JSON form, which we would receive and show inside Text component.

Contents in this project Apply Filter on JSON ListView Data Using PHP MySQL Android iOS Tutorial :

1. Create a fresh MySQL database on your Local / Online hosting server.

2. Create a table inside your MySQL database named as Student_Info_Table with 5 columns id, name, semester, department, phone_number like i did in below screenshot.

3. After successfully creating the MySQL table insert some records inside it like i did  in below screenshot.

4. Create 3 PHP Script files :

DBConfig.php : The DBConfig.php file contains all the server information like Database Host Name, Database name, Database username and Database Password.

CollegeStudentsList.php : This file would fetch all the records from MySQL database and covert them into JSON.

Filter.php : This is used to filter the received ID from react native application and return the only given ID record object of single student.

Code for DBConfig.php file :

Code for CollegeStudentsList.php file :

Screenshot of JSON after running the CollegeStudentsList.php file on web browser :

Code for Filter.php file :

Now the server side coding part is complete ūüôā . Next step is to Start the app coding .

5. Start a fresh React Native project. If you don’t know how then read my this tutorial.

6. Download and Install the React Navigation library inside your react native project by opening your project name folder into command prompt / terminal and execute the below command. The React  Navigation library is used to add multiple activities in react native project.

Screenshot after installing the library :

7. Open your project’s App.js file and import¬†StyleSheet, Text, View, ListView and ActivityIndicator component.

8. Import the Stack Navigator module from react navigation library.

9. Create the first class named as MainActivity that extends the component. This would be our First main activity class.

10. Create navigationOptions inside MainActivity. The navigationOptions is used to set the activity Title which would show inside the Action Title bar of application.

11. Now create constructor inside MainActivity and inside constructor make a State named as isLoading. This State is used to show and hide the ActivityIndicator component.

12. Create a function named as OpenSecondActivity() and pass id as argument inside it. This function is used to Open SecondActivity and with it we would also send the selected id to next activity using ListViewClickItemHolder object.

13. Create componentDidMount() method. This is a pre define inbuilt method, which would call automatically on application starting time. Now define the fetch() web api inside componentDidMount() method. This would parse the complete JSON.

14. Create a function named as ListViewItemSeparator(). This is used to show a divider line between each ListView item in MainActivity.

15. Set a IF condition inside render’s block and using the State check and hide the ActivityIndicator after done loading JSON data.

16. Create a ListView component inside render’s return block in MainActivity . We are only showing the Student name from JSON data.

dataSource : Set the JSON ListView data source.

renderSeparator : Call the ListViewItemSeparator() method which would display item separator line.

renderRow : Render the Row data from Data source.

onPress : Call the OpenSecondActivity() function and pass the ID inside it using argument.

17. Complete Source code for MainActivity class :

Screenshot of MainActivity :

Filter18. Now create the SecondActivity Class. This would be our Filter record class.

19. Set activity Title using navigationOptions .

20. Create constructor and make 5 state variables named as IdHolder, NameHolder, SemesterHolder, DepartmentHolder and PhoneNumberHolder.

21. Create componentDidMount() method inside SecondActivity and call the Fetch() Web API. Now receive the sent id using this.props.navigation.state.params.ListViewClickItemHolder and pass it with id object. Now after come the response into responseJson array, we would pop up the records and store into each State .

22. Create 5 Text component inside render’s return block. Each component is used to display a Filtered Record.

23. Complete Source code for SecondActivity Class :

Screenshot of Second Activity with record :

24. Now create the StackNavigator method which would tell the project about present classes and which class is call first. This step is very important.

25. Create Custom Style sheet for all the Views and Text.

26. Complete source code for App.js File :

Screenshots in android mobile phone application :

Filter

Screenshot in iOS mobile application :

27 Comments

  1. bro how i will make dropdown items when clicked and fetch data from mysql ??

  2. bro how to import import StyleSheet, Text, View, ListView and ActivityIndicator component. iam new to react native kindly guide me

    • Just use the below lines to import the component in your project, NOW IN in the second line just type the component name in the curly bracket block.

      import React, { Component } from ‘react’;

      import { StyleSheet, Text, View, ListView, ActivityIndicator } from ‘react-native’;

  3. Hello,
    Can you please explain , How to perform Same CRUD Operations with Asp.Net C# and Ms Sql Server?

  4. amigo una pregunta como hago si tengo una tabla y adentro otras dos tablas por ejemplo Student_Info_Table y adentro de esta tabla tengo dos mas que se llaman “id” y “nombre” y adentro de nombre esta la informacion que yo quiero mostrar, como hago para mostrarla?

  5. friend a question as I do if I have a table and in other two tables for example Student_Info_Table and inside this table I have two more that are called “id” and “name” and inside the name is the information that I want to show, as I do for show it?

    • Angle yes you can show it easily but please explain your question more briefly ? So i can help in right way .

      • ok, thanks for responding, what I want to do is put two functions with different php files and call them in different ListView to show me the columns of the two files. since with its code I can only reference or call a single php file

        • Angel you want to load two listview and each with different PHP file so that’s very easy just make PHP files and get data from same table in both then use that file to parse JSON.

  6. Hi, it get very very slow when it try to fetch a huge json file which contain at least 1000++ record. So is there any way can speed up the speed to retrieve all the json data?

  7. sir um failing display images only getting any thing l can use to filter images as well

  8. Hi.How we list user information when textinput enters a user id?

    • You need to send the user ID on server using fetch() API then on server we would use the ID to filter and and select the current record after selecting the record we would return the record details to application.

  9. sir how to display images with mysql from listview selected…….thanks

  10. how do i fetch from api when user is searching by a string .

  11. I want to print some content besides name in the main activity [on the left side].
    How can I do it/

  12. Hi! If there’s no data to show in the list, I want to show text “No Data” in the app. What should i do in the php and react native code? because using your code if there’s no data it will error like this [SyntaxError: JSON Parse error: Unexpected identifier “No”]. Thankyou

    • Farah you can put a condition at the end of react native code that check the data is == null or == ” then it will show a alert message.

  13. hi bro . thanks for this education. i have this data in my database :
    [{“id”:”1″,”tmb”:”23\/5\/96″,”name”:”ehsan”,”family”:”kharaman”},{“id”:”5″,”tmb”:”32\/12\/3333″,”name”:”mani”,”family”:”kharad”}]

    this data show in consol chrom , now i would get only name:mani in second object and show in my app. but i cant it. my code is :
    import React, {Component} from ‘react’;
    import {View, Text} from ‘react-native’;

    class App extends Component {
    state = {
    data: [”],
    };
    componentDidMount = () => {
    fetch(‘http://192.168.1.34/karbar/select.php’, {
    method: ‘GET’,
    })
    .then(response => response.json())
    .then(responseJson => {
    console.log(responseJson);
    this.setState({
    data: responseJson,
    });
    })
    .catch(error => {
    console.error(error);
    });
    };
    render() {
    return (

    {this.state.data[0].family}

    );
    }
    }
    export default App;

    please help me for solve this problem bro.thanks

Leave a Reply

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