react-native-autocomplete-tags
A quick and easy solutions for projects that need an input with both autocomplete and tags
Features
- custom tag and suggestions components
- separate extractors for tags and for suggestions
- easy to integrate and use
- configurable
What's new in version 2?
- no more mandatory controlled TextInput (although you still can if you want)
- TypeScript support!
- no more tag/suggestion styles - if you need custom styles, use
renderTag
or renderSuggestion
instead
Installation
yarn add react-native-autocomplete-tags
or
npm install react-native-autocomplete-tags --save
Dependency
Requires RN >= 0.63
If using RN < 0.63, use v1 instead.
Useage
Also see the demo projects
const suggestions = ['apple', 'orange', 'banana', 'kiwi'];
const SimpleExample = () => {
const [tags, setTags] = useState<string[]>([]);
const labelExtractor = (tag: string) => tag;
return (
<AutocompleteTags
tags={tags}
suggestions={suggestions}
onChangeTags={setTags}
labelExtractor={labelExtractor}
/>
);
};
export default SimpleExample;
Props
Prop | type | Description | required | default |
---|
tags | Tag[] | The current tags to be rendered | yes | |
labelExtractor | (tag: Tag) => string | Determines what property of tags is displayed | yes | |
onChangeTags | (newTags: Tag[]) => void | called when tags change (i.e. by deleting), should be used to set tags | yes | |
suggestions | Suggestion[] | All possible suggestions | no | [] |
suggestionExtractor | (suggestion: Suggestion) => string | determines which property of suggestions is displayed | no | uses labelExtractor |
onSuggestionPress | (suggestion: Suggestion) => void | called when suggestion is pressed | no | calls onChangeTags with [...tags, pressedSuggestion] |
onTagPress | (tag: Tag) => void | called when tag is pressed | no | calls onChangeTags with the pressed tag removed |
renderSuggestion | (suggestion: Suggestion, onPress: (tag: Suggestion) => void) => Element | renders a custom suggestion component | no | |
renderTag | (tag: Tag, onPress: (tag: Tag) => void) => Element | renders a custom tag component | no | |
filterSuggestions | (text: string) => Suggestion[] | filters suggestions based on users text input | no | |
inputProps | TextInput props | any additional props for TextInput | no | |
flatListProps | FlatList props | any additional props for FlatList | no | |
allowCustomTags | boolean | whether or not to allow the user to create a Tag that doesn't come from suggestions | no | true |
parseChars | string[] | an array of characters that should trigger a new tag and clear the TextInput | no | [',', ' ', ';', '\n'] |
onAddNewTag | (userInput: string) => void | called when the user types a character in parseChars | no | calls onChangeTags with [...tags, userInputText] |
Style Props
No style props are required.
Prop | Description |
---|
containerStyle | style for the outer-most View that houses both the tagContainer and suggestion list |
tagContainerStyle | Container for the tags and the TextInput |
inputStyle | Applied to the TextInput directly |
flatListStyle | Applied to the FlatList which renders suggestions |
Contributing
PRs and issues welcome!