Search Bar filter is one of the most common way to filter large amount of dynamic data in mobile applications. As we all know search bar filter is present in almost every single large scale android & iOS mobile app. We have already make a tutorial on real time search using ListView but as our user required we are now making this in FlatList also. In today’s tutorial we would make in React Native Apply Real Time Search Bar Filter on FlatList JSON Data in Android and iOS App Example Tutorial. The JSON used in current tutorial is coming from JSONPlaceholder website. This website provides us free dummy JSON data for testing purpose. So let’s get started .
Contents in this project React Native Apply Real Time Search Bar Filter on FlatList JSON Data Android iOS Example Tutorial:
1. Open your project’s main App.js file and import ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, and TextInput component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, TextInput } from ‘react-native’;
|
2. Creating our main Root Parent class named as App export default Component.
|
1
2
3
4
|
export default class App extends Component {
}
|
3. Creating constructor() in App class. Now we would make 3 States named as isLoading, text and data. We would also make a arrayholder in constructor.
- isLoading : is used to show and hide the ActivityIndicator component after done loading data.
- text : Used to hold TextInput component entered text.
- data : Used to hold JSON data coming from server.
- arrayholder : Used to filter data.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: ”,
data: []
}
this.arrayholder = [];
}
|
4. Creating componentDidMount() method and here we would parse all the JSON coming from web URL and store the JSON into data. After done loading JSON we would also make false isLoading State to hide the Activity Indicator component from screen.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
componentDidMount() {
return fetch(‘https://jsonplaceholder.typicode.com/users’)
.then((response) => response.json())
.then((responseJson) => {
// console.log(responseJson);
this.setState({
isLoading: false,
data: responseJson,
}, () => {
// In this block you can do something with new state.
this.arrayholder = responseJson;
});
})
.catch((error) => {
console.error(error);
});
}
|
5. Creating a function named as GetFlatListItem() with name argument. We would use this function to print the selected Flat List item on mobile screen using Alert.
|
1
2
3
|
GetFlatListItem(name) {
Alert.alert(name);
}
|
6. Create a function named as searchData() with text argument. We would call this function on TextInput’s onChangeText() event. So every time when user starts typing inside TextInput component it will filter the JSON data according to typed text.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
searchData(text) {
const newData = this.arrayholder.filter(item => {
const itemData = item.name.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > –1
});
this.setState({
data: newData,
text: text
})
}
|
7. Creating another function named as itemSeparator(). In this function we would simply drawing a horizontal line. We would call this function on ItemSeparatorComponent() event of Flat List.
|
1
2
3
4
5
6
7
8
9
10
11
|
itemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
8. Creating ActivityIndicator component in render’s block with isLoading State. Now we would make TextInput and FlatList component in render’s return block.
|
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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.textInput}
onChangeText={(text) => this.searchData(text)}
value={this.state.text}
underlineColorAndroid=‘transparent’
placeholder=“Search Here” />
<FlatList
data={this.state.data}
keyExtractor={ (item, index) => index.toString() }
ItemSeparatorComponent={this.itemSeparator}
renderItem={({ item }) => <Text style={styles.row}
onPress={this.GetFlatListItem.bind(this, item.name)} >{item.name}</Text>}
style={{ marginTop: 10 }} />
</View>
);
}
|
9. Creating 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
|
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
flex: 1,
margin: 5,
},
row: {
fontSize: 18,
padding: 12
},
textInput: {
textAlign: ‘center’,
height: 42,
borderWidth: 1,
borderColor: ‘#009688’,
borderRadius: 8,
backgroundColor: “#FFFF”
}
});
|
10. 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
|
import React, { Component } from ‘react’;
import { ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, TextInput } from ‘react-native’;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
text: ”,
data: []
}
this.arrayholder = [];
}
componentDidMount() {
return fetch(‘https://jsonplaceholder.typicode.com/users’)
.then((response) => response.json())
.then((responseJson) => {
// console.log(responseJson);
this.setState({
isLoading: false,
data: responseJson,
}, () => {
// In this block you can do something with new state.
this.arrayholder = responseJson;
});
})
.catch((error) => {
console.error(error);
});
}
GetFlatListItem(name) {
Alert.alert(name);
}
searchData(text) {
const newData = this.arrayholder.filter(item => {
const itemData = item.name.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > –1
});
this.setState({
data: newData,
text: text
})
}
itemSeparator = () => {
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.textInput}
onChangeText={(text) => this.searchData(text)}
value={this.state.text}
underlineColorAndroid=‘transparent’
placeholder=“Search Here” />
<FlatList
data={this.state.data}
keyExtractor={ (item, index) => index.toString() }
ItemSeparatorComponent={this.itemSeparator}
renderItem={({ item }) => <Text style={styles.row}
onPress={this.GetFlatListItem.bind(this, item.name)} >{item.name}</Text>}
style={{ marginTop: 10 }} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
flex: 1,
margin: 5,
},
row: {
fontSize: 18,
padding: 12
},
textInput: {
textAlign: ‘center’,
height: 42,
borderWidth: 1,
borderColor: ‘#009688’,
borderRadius: 8,
backgroundColor: “#FFFF”
}
});
|
Screenshots:
Also Read :
React Native New ImageBackground Component iOS Android Example
Add Fixed Sticky Header on FlatList in React Native iOS Android Tutorial
Example of Creating Pie Chart in React Native Android iOS App
React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native
React Native Create Custom Component with custom user define Props
