Searchable Dropdown to help you search with in the list (FlatList), and you can pick single item and multiple items.
npm install --save react-native-searchable-dropdown| 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 |
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 (
<Fragment>
{/* Multi */}
<SearchableDropdown
multi={true}
selectedItems={this.state.selectedItems}
onItemSelect={(item) => {
const items = this.state.selectedItems;
items.push(item)
this.setState({ selectedItems: items });
}}
containerStyle={{ padding: 5 }}
onRemoveItem={(item, index) => {
const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
this.setState({ selectedItems: items });
}}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
}}
itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: 140 }}
items={items}
defaultIndex={2}
chip={true}
resetValue={false}
textInputProps={
{
placeholder: "placeholder",
underlineColorAndroid: "transparent",
style: {
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
},
onTextChange: text => alert(text)
}
}
listProps={
{
nestedScrollEnabled: true,
}
}
/>
{/* Single */}
<SearchableDropdown
onItemSelect={(item) => {
const items = this.state.selectedItems;
items.push(item)
this.setState({ selectedItems: items });
}}
containerStyle={{ padding: 5 }}
onRemoveItem={(item, index) => {
const items = this.state.selectedItems.filter((sitem) => sitem.id !== item.id);
this.setState({ selectedItems: items });
}}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
}}
itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ maxHeight: 140 }}
items={items}
defaultIndex={2}
resetValue={false}
textInputProps={
{
placeholder: "placeholder",
underlineColorAndroid: "transparent",
style: {
padding: 12,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
},
onTextChange: text => alert(text)
}
}
listProps={
{
nestedScrollEnabled: true,
}
}
/>
</Fragment>
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent