react-native-autocomplete-tags
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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!

Package Sidebar

Install

npm i react-native-autocomplete-tags

Weekly Downloads

304

Version

2.0.0

License

MIT

Unpacked Size

17.7 kB

Total Files

9

Last publish

Collaborators

  • eldjotnar