Searchable Dropdown
npm install react-native-searchable-dropdown[example-url]: https://i.imgur.com/mHGaOX5.gif
[screenshot-1]: https://i.imgur.com/OrsBmik.png
[screenshot-2]: https://i.imgur.com/yghQDw0.png
[npm-badge]: https://img.shields.io/npm/v/react-native-searchable-dropdown.svg?colorB=ff6d00
[npm-url]: https://npmjs.com/package/react-native-searchable-dropdown
[license-badge]: https://img.shields.io/npm/l/react-native-searchable-dropdown.svg?colorB=448aff
[![npm][npm-badge]][npm-url]
![license][license-badge]
FlatList), and you can pick single item and multiple items.
bash
npm install --save react-native-searchable-dropdown
`
Properties
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 (
{/ Multi /}
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 /}
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,
}
}
/>
);
}
}
``