[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] # React Native Searchable Dropdown Searchable Dropdown to help you search with in the list (`FlatList`), and you can pick single item and multiple items. ![example][example-url] ![example][screenshot-2] ## Installation ```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 */} { 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 */} { 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, } } /> ); } } ```

	Stars	Issues	Version	Updated	Created
react-native-searchable-dropdown			1.1.3	3 years ago	6 years ago
react-native-sectioned-multi-select			0.10.0	a year ago	6 years ago
react-navigation	23,259	724	5.0.0	7 months ago	8 years ago

react-native-searchable-dropdown vs react-native-sectioned-multi-select vs react-navigation

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past