| 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 |
| listProps |
all supported (FlatList) props example: listProps={ nestedScrollEnabled: true }
|
|
| textInputProps |
all supported (TextInput) props example: textInputProps={ underlineColorAndroid: 'transparent' }
|
| setSort |
filter data on text changing example: setSort={(item, searchedText)=> item.name.toLowerCase().startsWith(searchedText.toLowerCase())} |
| multi |
boolean toggle multi selection |
| selectedItems |
selectedItems of multi selection note: work when if multi prop is true |
| chip |
boolean toggle chip display mode note: work when if multi prop is true |
| onRemoveItem |
{ (item, index) => { } } note: work when if multi prop is true |
# Example
```jsx
import React, { Component, Fragment } 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',
},
];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedItems: [
{
id: 7,
name: 'Go',
},
{
id: 8,
name: 'Swift',
}
]
}
}
render() {
return (