React-native-autocomplete-tags NPM

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

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!

react-native react-component react-native-component react react native mobile ios android text input tags autocomplete input email

@infinitebrahmanuniverse/nolb-react-native-au @everything-registry/sub-chunk-2571

2.0.0

4 years ago

1.0.0

5 years ago