react-native-autocomplete-tags

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!