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 |
importReact,{Component,Fragment}from'react';importSearchableDropdownfrom'react-native-searchable-dropdown';varitems=[{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',},];classAppextendsReact.Component{constructor(props){super(props);this.state={selectedItems: [{id: 7,name: 'Go',},{id: 8,name: 'Swift',}]}}render(){return(<Fragment>{/* Multi */}<SearchableDropdownmulti={true}selectedItems={this.state.selectedItems}onItemSelect={(item)=>{constitems=this.state.selectedItems;items.push(item)this.setState({selectedItems: items});}}containerStyle={{padding: 5}}onRemoveItem={(item,index)=>{constitems=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 */}<SearchableDropdownonItemSelect={(item)=>{constitems=this.state.selectedItems;items.push(item)this.setState({selectedItems: items});}}containerStyle={{padding: 5}}onRemoveItem={(item,index)=>{constitems=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>);}}