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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Text, StyleSheet, View, ListView, TextInput, ActivityIndicator, Alert } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: ”,
}
this.arrayholder = [] ;
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/FruitsList.php’)
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson),
}, function() {
// In this block you can do something with new state.
this.arrayholder = responseJson ;
});
})
.catch((error) => {
console.error(error);
});
}
|
5. Create function named as GetListViewItem() for retrieve selected ListView item and show inside Alert message.
|
1
2
3
4
5
|
GetListViewItem (fruit_name) {
Alert.alert(fruit_name);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.fruit_name.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > –1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
|
7. Create ListViewItemSeparator() function to show a horizontal line between each ListView element .
|
1
2
3
4
5
6
7
8
9
10
11
|
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
8. Add IF condition in render’s block, which is used to Show and Hide the ActivityIndicator component after parsing the JSON.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
);
}
|
9. Now create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
</View>
);
}
|
10. Create a TextInput and ListView component in root view. This is used to get search input from user.
|
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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid=‘transparent’
placeholder=“Search Here”
/>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) => <Text style={styles.rowViewContainer}
onPress={this.GetListViewItem.bind(this, rowData.fruit_name)} >{rowData.fruit_name}</Text>}
enableEmptySections={true}
style={{marginTop: 10}}
/>
</View>
);
}
|
11. Create Style classes :
|
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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 7,
},
rowViewContainer: {
fontSize: 17,
padding: 10
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 40,
borderWidth: 1,
borderColor: ‘#009688’,
borderRadius: 7 ,
backgroundColor : “#FFFFFF”
}
});
|
12. Complete source code for App.js 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
import React, { Component } from ‘react’;
import { Text, StyleSheet, View, ListView, TextInput, ActivityIndicator, Alert } from ‘react-native’;
export default class MyProject extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: ”,
}
this.arrayholder = [] ;
}
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/FruitsList.php’)
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson),
}, function() {
// In this block you can do something with new state.
this.arrayholder = responseJson ;
});
})
.catch((error) => {
console.error(error);
});
}
GetListViewItem (fruit_name) {
Alert.alert(fruit_name);
}
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.fruit_name.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > –1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid=‘transparent’
placeholder=“Search Here”
/>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) => <Text style={styles.rowViewContainer}
onPress={this.GetListViewItem.bind(this, rowData.fruit_name)} >{rowData.fruit_name}</Text>}
enableEmptySections={true}
style={{marginTop: 10}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 7,
},
rowViewContainer: {
fontSize: 17,
padding: 10
},
TextInputStyleClass:{
textAlign: ‘center’,
height: 40,
borderWidth: 1,
borderColor: ‘#009688’,
borderRadius: 7 ,
backgroundColor : “#FFFFFF”
}
});
|
Screenshot in Android device :
Screenshot in iOS Application :
Also Read :
React Native Scroll Down To Bottom and Scroll To Top in ListView Android iOS Example
React Native Integrate YouTube Video in Android iOS App Example
React Native Runtime PermissionsAndroid Request Android Example Tutorial
Add Image Icon Inside TextInput in React Native Android iOS Example
React Native Community Blur Background View Android iOS Example
