In this tutorial we are going to cover the Searchable Dropdown topic. Searchable Dropdown to help you search with in the list (using ListView and FlatList), and you can pick single item. For this you have to install following dependency.
npm install --save react-native-searchable-dropdownProperties
| Props | Description |
|---|---|
| items | dropdown items |
| defaultIndex | Default selected index of items. (optional) |
| onTextChange | on text change you can passs onTextChange and catch the input text. (optional) |
| onItemSelect | on item selection you can passs onItemSelect and catch the input item. |
| containerStyle | component container style |
| textInputStyle | TextInput style |
| itemStyle | items on dropdown |
| itemTextStyle | item text |
| resetValue | reset textInput Value with true and false state |
| placeholder | textInput placeholder |
| placeholderTextColor | textInput placeholderTextColor |
| itemsContainerStyle | items container style you can pass maxHeight to restrict the items dropdown hieght |
| underlineColorAndroid | TextInput underline height |
| listType | default will be FlatList or you can pass ListView |
App.js
import React, { Component } from 'react';
import SearchableDropdown from 'react-native-searchable-dropdown';
var items = [
{
id: 1,
name: 'JavaScript',
},
{
id: 2,
name: 'Java',
},
{
id: 3,
name: 'Ruby',
},
{
id: 4,
name: 'React Native',
},
{
id: 5,
name: 'PHP',
},
{
id: 6,
name: 'Python',
},
{
id: 7,
name: 'Go',
},
{
id: 8,
name: 'Swift',
},
];
export default class App extends Component {
render() {
return (
<SearchableDropdown
onTextChange={text => alert(text)}
onItemSelect={item => alert(JSON.stringify(item))}
containerStyle={{ padding: 5 }}
textInputStyle={{
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
}}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
}}
itemTextStyle={{ color: '#000' }}
itemsContainerStyle={{ maxHeight: 250 }}
items={items}
defaultIndex={0}
placeholder="Select Item"
resetValue={false}
underlineColorAndroid="transparent"
/>
);
}
}
