Autocomplete text input with tags

Usage no npm install needed!

<script type="module">
  import reactNativeAutocompleteTags from '';



A quick and easy solutions for projects that need an input with both autocomplete and tags


  • 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


yarn add react-native-autocomplete-tags


npm install react-native-autocomplete-tags --save


Requires RN >= 0.63 If using RN < 0.63, use v1 instead.


Also see the demo projects

const suggestions = ['apple', 'orange', 'banana', 'kiwi'];

const SimpleExample = () => {
  const [tags, setTags] = useState<string[]>([]);

  const labelExtractor = (tag: string) => tag;

  return (

export default SimpleExample;


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


PRs and issues welcome!