react-native-tag-autocomplete
Tag autocomplete component for contacts, groups, etc.
Up and Running
$ npm install --save react-native-tag-autocomplete
Example
//...;// ...state = suggestions : name:'Mickey Mouse' tagsSelected : { let tagsSelected = thisstatetagsSelected; tagsSelected; this;} { this;} { return <AutoTags suggestions=thisstatesuggestions tagsSelected=thisstatetagsSelected handleAddition=thishandleAddition handleDelete=thishandleDelete placeholder="Add a contact.." /> ;}// ...
Props
Prop | Type | Required | Description |
---|---|---|---|
suggestions | array | yes | Array of suggestion objects. They must have a 'name' prop if not overriding filter && renderTags |
tagsSelected | array | yes | List of tags that have already been selected |
handleAddition | function | yes | Handler for when suggestion is selected (normally just push to tagsSelected) |
handleDelete | function | yes | Handler called with index when tag is clicked |
placeholder | string | no | Input placeholder |
renderTags | function | no | Override the render tags and it's styles |
renderSuggestion | function | no | Override the suggestions dropdown items |
filterData | function | no | Override the search function, allows you to filter by props other than name |
onCustomTagCreated | function | no | Function called with user input when user presses enter |
createTagOnSpace | boolean | no | calls onCustomTagCreated when user presses space |
tagStyles | object | no | Override the default tag styling |
tagsOrientedBelow | boolean | no | Move tags below the input instead of above (default). |
Android
This repository wraps react-native-autocomplete-input, so their limitations will also apply here.
As such:
"Android does not support overflows (#20), for that reason it is necessary to wrap the autocomplete into a absolute positioned view on Android. This will allow the suggestion list to overlap other views inside your component."
//... { return <View> <View style=stylesautocompleteContainer> <AutoTags /* your props */ /> </View> <View> <Text>Some content</Text> </View> </View> ;} //... const styles = StyleSheet;
Pull Requests
I'm a dummy, so any PR's are wholly appreciated <3.