AutoComplete Text Input also known as Auto Complete Text View is a type of search box which shows typed text match suggestions below the search box. In AutoComplete Text Box when user starts typing search keyword then it will automatically shows us the content matched suggestions. in Today’s tutorial we would use the React native one of the most famous react-native-autocomplete-input NPM package to create Auto complete text input box in react native. We are showing all the data from JSON, So all the search result will be coming from online JSON data. After showing the Data from server when user selects the Data from multiple choice then we will display the selected item into Text component. So in this tutorial we would create React Native AutoComplete Text Input Android iOS Example Tutorial.
Note:- All the code of this tutorial is written into React Native Hooks.
Contents in this project React Native AutoComplete Text Input Android iOS Example Tutorial:
1. Before getting started we have to install the react-native-autocomplete-input NPM package in our react native project. So open your react native project Root directory into Command Prompt like I did in below screenshot and execute below command.
Installation Command:-
|
1
|
npm install —save react–native–autocomplete–input
|
Screenshot of CMD:
Screenshot of CMD after done installation:
2. After done installation of package, Now its time to start coding for project. So open your project’s main App.js file and import useState and useEffect from React.
|
1
|
import React, {useState, useEffect} from ‘react’;
|
3. Import StyleSheet, Text, TouchableOpacity and View component in your project.
|
1
|
import { StyleSheet, Text, TouchableOpacity, View } from ‘react-native’;
|
4. Import Autocomplete component from ‘react-native-autocomplete-input‘ package.
|
1
|
import Autocomplete from ‘react-native-autocomplete-input’;
|
5. Create our main constant App method. This is our main default Root App component. We would write the complete code into this constant method.
|
1
2
3
4
5
|
const App = () => {
}
|
6. Creating a State named as MainJSON with State change method setMainJSON. This State is used to hold our main JSON which is coming from server.
|
1
2
|
// Used to set Main JSON Data.
const [MainJSON, setMainJSON] = useState([]);
|
7. Creating another State named as FilterData with State change method setFilterData. This state is used to hold the filter JSON according to typed keywords.
|
1
2
|
// Used to set Filter JSON Data.
const [FilterData, setFilterData] = useState([]);
|
8. Creating anther State named as selectedItem with State change method setselectedItem. This State is used to hold the Selected Item result from Auto complete text view.
|
1
2
|
// Used to set Selected Item in State.
const [selectedItem, setselectedItem] = useState({});
|
9. Creating useEffect() method which works as Componentdidmount(). Using the method we would parse the complete JSON on app starting time and store into MainJSON State.
|
1
2
3
4
5
6
7
8
9
10
|
useEffect(() => {
fetch(‘https://jsonplaceholder.typicode.com/todos/’)
.then((res) => res.json())
.then((json) => {
setMainJSON(json);
})
.catch((e) => {
alert(e);
});
}, []);
|
10. Creating a constant function named as SearchDataFromJSON with query argument. Using this method we would search Content while user starts typing. After done filtering data we would store the filter JSON data into FilterData State.
|
1
2
3
4
5
6
7
8
9
10
11
|
const SearchDataFromJSON = (query) => {
if (query) {
//Making the Search as Case Insensitive.
const regex = new RegExp(`${query.trim()}`, ‘i’);
setFilterData(
MainJSON.filter((data) => data.title.search(regex) >= 0)
);
} else {
setFilterData([]);
}
};
|
11. Creating return() block and here first we would make a Root View component. Now we would make the Autocomplete component and after it we would put the Text component in which we would display the Selected Item.
|
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
|
return (
<View style={styles.MainContainer}>
<Autocomplete
autoCapitalize=“none”
autoCorrect={false}
containerStyle={styles.AutocompleteStyle}
data={FilterData}
defaultValue={
JSON.stringify(selectedItem) === ‘{}’ ?
” :
selectedItem.title
}
keyExtractor={(item, i) => i.toString()}
onChangeText={(text) => SearchDataFromJSON(text)}
placeholder=“Type The Search Keyword…”
renderItem={({item}) => (
<TouchableOpacity
onPress={() => {
setselectedItem(item);
setFilterData([]);
}}>
<Text style={styles.SearchBoxTextItem}>
{item.title}
</Text>
</TouchableOpacity>
)}
/>
<View style={styles.selectedTextContainer}>
{
<Text style={styles.selectedTextStyle}>
{JSON.stringify(selectedItem)}
</Text>
}
</View>
</View>
);
|
12. 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
26
27
28
29
|
const styles = StyleSheet.create({
MainContainer: {
backgroundColor: ‘#FAFAFA’,
flex: 1,
padding: 12,
},
AutocompleteStyle: {
flex: 1,
left: 0,
position: ‘absolute’,
right: 0,
top: 0,
zIndex: 1,
borderWidth:1
},
SearchBoxTextItem: {
margin: 5,
fontSize: 16,
paddingTop: 4,
},
selectedTextContainer: {
flex: 1,
justifyContent: ‘center’,
},
selectedTextStyle: {
textAlign: ‘center’,
fontSize: 18,
},
});
|
13. Creating our main export default App method. Because without using the export default it will not call our App class.
|
1
|
export default App;
|
14. 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
|
import React, {useState, useEffect} from ‘react’;
import { StyleSheet, Text, TouchableOpacity, View } from ‘react-native’;
import Autocomplete from ‘react-native-autocomplete-input’;
const App = () => {
// Used to set Main JSON Data.
const [MainJSON, setMainJSON] = useState([]);
// Used to set Filter JSON Data.
const [FilterData, setFilterData] = useState([]);
// Used to set Selected Item in State.
const [selectedItem, setselectedItem] = useState({});
useEffect(() => {
fetch(‘https://jsonplaceholder.typicode.com/todos/’)
.then((res) => res.json())
.then((json) => {
setMainJSON(json);
})
.catch((e) => {
alert(e);
});
}, []);
const SearchDataFromJSON = (query) => {
if (query) {
//Making the Search as Case Insensitive.
const regex = new RegExp(`${query.trim()}`, ‘i’);
setFilterData(
MainJSON.filter((data) => data.title.search(regex) >= 0)
);
} else {
setFilterData([]);
}
};
return (
<View style={styles.MainContainer}>
<Autocomplete
autoCapitalize=“none”
autoCorrect={false}
containerStyle={styles.AutocompleteStyle}
data={FilterData}
defaultValue={
JSON.stringify(selectedItem) === ‘{}’ ?
” :
selectedItem.title
}
keyExtractor={(item, i) => i.toString()}
onChangeText={(text) => SearchDataFromJSON(text)}
placeholder=“Type The Search Keyword…”
renderItem={({item}) => (
<TouchableOpacity
onPress={() => {
setselectedItem(item);
setFilterData([]);
}}>
<Text style={styles.SearchBoxTextItem}>
{item.title}
</Text>
</TouchableOpacity>
)}
/>
<View style={styles.selectedTextContainer}>
{
<Text style={styles.selectedTextStyle}>
{JSON.stringify(selectedItem)}
</Text>
}
</View>
</View>
);
};
const styles = StyleSheet.create({
MainContainer: {
backgroundColor: ‘#FAFAFA’,
flex: 1,
padding: 12,
},
AutocompleteStyle: {
flex: 1,
left: 0,
position: ‘absolute’,
right: 0,
top: 0,
zIndex: 1,
borderWidth:1
},
SearchBoxTextItem: {
margin: 5,
fontSize: 16,
paddingTop: 4,
},
selectedTextContainer: {
flex: 1,
justifyContent: ‘center’,
},
selectedTextStyle: {
textAlign: ‘center’,
fontSize: 18,
},
});
export default App;
|
Screenshots:
Also Read :
React Native Get Device Height Width on Button Click
Use React Native Ionicons Icon in Android iOS App Example
View All Data From SQLite Database in React Native FlatList Example
React Native Add Sticky Header to ListView Android iOS Example
React Native Apply Real Time Search Bar Filter on FlatList JSON Data Example Tutorial
