Example of Searchable Dropdown / Picker in React Native
This is an Example of Searchable Dropdown / Picker in React Native. To make a Searchable Dropdown in React Native we have a SearchableDropdown component provided by react-native-searchable-dropdown.
React Native Picker is the component which can be used as a drop-down but in case of huge data we have to give the facility to search for the option for that we can use Searchable Dropdown.
Searchable Dropdown in React Native
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 | <SearchableDropdown onTextChange={text => console.log(text)} //On text change listner on the searchable input onItemSelect={item => alert(JSON.stringify(item))} //onItemSelect called after the selection from the dropdown containerStyle={{ padding: 5 }} //suggestion container style textInputStyle={{ //inserted text style padding: 12, borderWidth: 1, borderColor: '#ccc', backgroundColor: '#FAF7F6', }} itemStyle={{ //single dropdown item style padding: 10, marginTop: 2, backgroundColor: '#FAF9F8', borderColor: '#bbb', borderWidth: 1, }} itemTextStyle={{ //text style of a single dropdown item color: '#222', }} itemsContainerStyle={{ //items container style you can pass maxHeight //to restrict the items dropdown hieght maxHeight: '60%', }} items={items} //mapping of item array defaultIndex={2} //default selected item index placeholder="placeholder" //place holder for the search input resetValue={false} //reset textInput Value with true and false state underlineColorAndroid="transparent" //To remove the underline from the android input /> |
In this example of Searchable Dropdown, we will make 2 searchable drop-downs. One of them will have the data from the static array and the other one have the data from calling the rest API. So Let’s get started.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install thereact-native-cli command line utility.
Open the terminal and go to the workspace and runnpm install -g react-native-clireact-native init ProjectNameInstallation of Dependency
To use SearchableDropdown component you need to install react-native-searchable-dropdown dependency.
To install this open the terminal and jump into your project
1 | cd ProjectName |
Run the following command
1 | npm install react-native-searchable-dropdown --save |
This command will copy all the dependencies into your node_module directory, You can find the directory in node_module directory named react-native-searchable-dropdown.
Dependencies for this example
1 | "react-native-searchable-dropdown": "1.0.6" |
Now Open App.js in any code editor and replace the code with the following code.
App.js
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 | /*This is an Example of Searchable Dropdown*/ import React, { Component } from 'react'; //import react in our project import { View, Text } from 'react-native'; //import basic react native components import SearchableDropdown from 'react-native-searchable-dropdown'; //import SearchableDropdown component //Item array for the dropdown var items = [ //name key is must.It is to show the text in front { id: 1, name: 'angellist' }, { id: 2, name: 'codepen' }, { id: 3, name: 'envelope' }, { id: 4, name: 'etsy' }, { id: 5, name: 'facebook' }, { id: 6, name: 'foursquare' }, { id: 7, name: 'github-alt' }, { id: 8, name: 'github' }, { id: 9, name: 'gitlab' }, { id: 10, name: 'instagram' }, ]; export default class App extends Component { constructor() { super(); this.state = { serverData: [], //Data Source for the SearchableDropdown }; } componentDidMount() { fetch('https://aboutreact.com/demo/demosearchables.php') .then(response => response.json()) .then(responseJson => { //Successful response from the API Call this.setState({ serverData: [...this.state.serverData, ...responseJson.results], //adding the new data in Data Source of the SearchableDropdown }); }) .catch(error => { console.error(error); }); } render() { return ( <View style={{ flex: 1, marginTop: 30 }}> <Text style={{ marginLeft: 10 }}> Searchable Dropdown from Static Array </Text> <SearchableDropdown onTextChange={text => console.log(text)} //On text change listner on the searchable input onItemSelect={item => alert(JSON.stringify(item))} //onItemSelect called after the selection from the dropdown containerStyle={{ padding: 5 }} //suggestion container style textInputStyle={{ //inserted text style padding: 12, borderWidth: 1, borderColor: '#ccc', backgroundColor: '#FAF7F6', }} itemStyle={{ //single dropdown item style padding: 10, marginTop: 2, backgroundColor: '#FAF9F8', borderColor: '#bbb', borderWidth: 1, }} itemTextStyle={{ //text style of a single dropdown item color: '#222', }} itemsContainerStyle={{ //items container style you can pass maxHeight //to restrict the items dropdown hieght maxHeight: '60%', }} items={items} //mapping of item array defaultIndex={2} //default selected item index placeholder="placeholder" //place holder for the search input resetValue={false} //reset textInput Value with true and false state underlineColorAndroid="transparent" //To remove the underline from the android input /> <Text style={{ marginLeft: 10 }}> Searchable Dropdown from Dynamic Array from Server </Text> <SearchableDropdown onTextChange={text => console.log(text)} //On text change listner on the searchable input onItemSelect={item => alert(JSON.stringify(item))} //onItemSelect called after the selection from the dropdown containerStyle={{ padding: 5 }} //suggestion container style textInputStyle={{ //inserted text style padding: 12, borderWidth: 1, borderColor: '#ccc', backgroundColor: '#FAF7F6', }} itemStyle={{ //single dropdown item style padding: 10, marginTop: 2, backgroundColor: '#FAF9F8', borderColor: '#bbb', borderWidth: 1, }} itemTextStyle={{ //text style of a single dropdown item color: '#222', }} itemsContainerStyle={{ //items container style you can pass maxHeight //to restrict the items dropdown hieght maxHeight: '50%', }} items={this.state.serverData} //mapping of item array defaultIndex={2} //default selected item index placeholder="placeholder" //place holder for the search input resetValue={false} //reset textInput Value with true and false state underlineColorAndroid="transparent" //To remove the underline from the android input /> </View> ); } } |
To Run the React Native App
Open the terminal again and jump into your project using.cd ProjectNamereact-native run-androidreact-native run-ios (macOS only).
That was the example of the searchable dropdown/picker in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!
Hope you liked it. 🙂