React Native AutoComplete Text Input Android iOS Example Tutorial

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:-

Screenshot of CMD:

Screenshot of CMD after done installation:

React Native AutoComplete Text Input Android iOS Example Tutorial2. 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.

3. Import StyleSheet, Text, TouchableOpacity and View component in your project.

4. Import Autocomplete component from ‘react-native-autocomplete-input‘ package.

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.

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.

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.

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.

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.

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.

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.

12. Creating Style.

13. Creating our main export default App method. Because without using the export default it will not call our App class.

14. Complete Source Code for App.js file:

Screenshots:

React Native AutoComplete Text Input Android iOS Example Tutorial

Leave a Reply

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