The Infinite List is a type of ListView – FlatList used to show only fixed number of data on application startup time and user can himself Load More Data if required on Button Click event. The Infinite List can show hundreds of records without lagging and application hanging process because of its quick way process method. It only loads fixed number of data and itself pass a paging parameter with HTTP URL so by using the application developers can tell the server to load new data and the data present on PHP MySQL server. So in this tutorial we would going to implement Infinite List FlatList Pagination to Load More JSON Data dynamically on Button Click Example Tutorial.
Live Screenshot of App:
Contents in this project Infinite List FlatList Pagination to Load More JSON Data dynamically on Button Click Tutorial in React Native:
1. Create new database on your MySQL PhpMyAdmin panel.
2. Create a new table named as Chart with 2 columns id and value. The id is auto increment and as declared as primary key and value is varchar type. Now we would store one to hundred table inside the MySQL database table. After inserting records in table we have 100 records inside the table, Below is the screenshot of table.
3. Creating PHP script to convert MySQL data into JSON :
We are using PHP to convert MySQL database data into JSON form, We would use the Get method of PHP and split all the data into multiple segments(pages), so we have to pass the page number along with the URL and it will show record according to that URL. There is a fixed condition in PHP Code though it will only show 10 Records at a single time.
DBConfig.php file : This file contain all the useful information about your server.
counting_table.php : This file would convert the MySQL data into JSON and show only 10 records at a single time. User need to pass the page number along with URL. The URL of this page should look like this:
|
1
|
https://reactnativecode.000webhostapp.com/counting_table.php?page=1
|
We need to pass the Page number with URL so it will divide the records and show filtered records according to give page number.
Code for DBConfig.php file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php
//Define your host here.
$HostName = “localhost”;
//Define your database name here.
$DatabaseName = “id2070055_reactnativedb”;
//Define your database username here.
$HostUser = “id2070055_reactnativedb_user”;
//Define your database password here.
$HostPass = “1234567890”;
?>
|
Code for counting_table.php file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<?php
include ‘DBConfig.php’;
// Create connection
$con = new mysqli($HostName, $HostUser, $HostPass, $DatabaseName);
// Getting page from URL.
$page = $_GET[‘page’];
// Show data from first row means 0 row.
$start = 0;
// Setting up data items limit, means it will only show only 10 items once.
$stop = 10;
// counting all the items present inside table.
$all_rows = mysqli_num_rows(mysqli_query($con, “SELECT id from Chart”));
$page_limit = $all_rows/$stop;
// If page is more than the limit it will show a error message.
if($page<=$page_limit){
$start = ($page – 1) * $stop;
$sql = “SELECT * from Chart limit $start, $stop”;
$result = mysqli_query($con,$sql);
$res = array();
while($row = mysqli_fetch_array($result)){
array_push($res, array(“id”=>$row[‘id’], “value”=>$row[‘value’]));
}
$json = json_encode($res);
echo $json ;
} else {
echo ‘[{“value”: “No Result Found”}]’ ;
}
$con->close();
?>
|
Screenshot of JSON :
4. Start a new react native project, If you don’t know how to then read my this tutorial.
5. Import StyleSheet, View, Text, Platform, FlatList, TouchableOpacity and ActivityIndicator component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Platform, FlatList, TouchableOpacity, ActivityIndicator } from ‘react-native’;
|
5. Create constructor() in your class, Now we would make 3 states named as isLoading, JSON_from_server and fetching_Status inside constructor(). We would also make a this variable named as this.page.
isLoading : This state is used to show and hide the ActivityIndicator when application start first time.
JSON_from_server : This is a State array used to store the JSON data coming from server.
fetching_Status : This state is used to show and hide the ActivityIndicator which shows inside the Loading Button.
this.page : This is a page parameter pass along with URL.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor()
{
super();
this.state =
{
isLoading: true,
JSON_from_server: [],
fetching_Status: false,
}
this.page = 0
}
|
6. Create componentDidMount() method in your class, This is a inbuilt method and calls every time when application startup. We would call the server URL along with page number inside this function and parse the JSON.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
componentDidMount()
{
this.page = this.page + 1;
fetch(‘https://reactnativecode.000webhostapp.com/counting_table.php?page=’ + this.page)
.then((response) => response.json())
.then((responseJson) =>
{
this.setState({ JSON_from_server: [ ...this.state.JSON_from_server, ...responseJson ], isLoading: false });
})
.catch((error) =>
{
console.error(error);
});
}
|
7. Create fetch_more_data_from_server() function in your class, Inside this function we would again request for Web call and call the next 10 items from server by passing the Page number along with URL.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
fetch_more_data_from_server =()=>
{
this.page = this.page + 1;
this.setState({ fetching_Status: true }, () =>
{
fetch(‘https://reactnativecode.000webhostapp.com/counting_table.php?page=’ + this.page)
.then((response) => response.json())
.then((responseJson) =>
{
this.setState({ JSON_from_server: [ ...this.state.JSON_from_server, ...responseJson ], fetching_Status: false });
})
.catch((error) =>
{
console.error(error);
});
});
}
|
8. Create another function named as c, this function would render a horiontal Separator line between each FlatList item.
|
1
2
3
4
5
6
7
8
9
10
11
|
FlatListItemSeparator =()=> {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
|
9. Create a function named as Render_Footer(), this function is used to render a View at the bottom of FlatList. Inside this view we would make a TouchableOpacity button which shows at the last of FlatList with Loading indicator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
Render_Footer=()=>
{
return (
<View style = { styles.footerStyle }>
<TouchableOpacity
activeOpacity = { 0.7 }
style = { styles.TouchableOpacity_style }
onPress = { this.fetch_more_data_from_server }
>
<Text style = { styles.TouchableOpacity_Inside_Text }>Load More Data From Server</Text>
{
( this.state.fetching_Status )
?
<ActivityIndicator color = “#fff” style = {{ marginLeft: 6 }} />
:
null
}
</TouchableOpacity>
</View>
)
}
|
10. Create a Root View inside render’s return block. Now inside this View we would make the FlatList component.
keyExtractor : Extract the unique key from FlatList.
data : Setting up the JSON data into FlatList.
ItemSeparatorComponent : Calling the ItemSeparatorComponent() function to render the separator line.
renderItem : Rendering the JSON items.
ListFooterComponent : Showing the footer view.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
render()
{
return(
<View style = { styles.MainContainer }>
{
( this.state.isLoading )
?
( <ActivityIndicator size = “large” /> )
:
(
<FlatList
style={{width: ‘100%’}}
keyExtractor = {( item, index ) => index }
data = { this.state.JSON_from_server }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem = {({ item, index }) => <Text style = { styles.flatList_items }> { item.value } </Text>}
ListFooterComponent = { this.Render_Footer }
/>
)
}
</View>
);
}
|
11. Create Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
margin: 5,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
footerStyle:
{
padding: 7,
alignItems: ‘center’,
justifyContent: ‘center’,
borderTopWidth: 2,
borderTopColor: ‘#009688’
},
TouchableOpacity_style:
{
padding: 7,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F44336’,
borderRadius: 5,
},
TouchableOpacity_Inside_Text:
{
textAlign: ‘center’,
color: ‘#fff’,
fontSize: 18
},
flatList_items:
{
fontSize: 20,
color: ‘#000’,
padding: 10
}
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
React Native Show Error Message if Image load failed Not Found on Server
React Native SectionList Component iOS Android Example Tutorial
React Native calculate child view X Y Dimensions dynamically on Button Click iOS Android Example
Border radius for only top left right rounded corners Image View React Native iOS Android Example
Run Test React Native apps in Real Android device using WiFi Network Windows
