This package is a quick fix for a project. All rights reserved to Andreas Raduege. Github: https://github.com/Eldjotnar
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
- fully style-able
- extractors for tags and for suggestions
- easy to integrate and use
- controlled text input
Installation
yarn add react-native-autocomplete-tags
or
npm install react-native-autocomplete-tags --save
Dependency
Requires RN >= 0.59
Useage
Also see the demo projects
const suggestions = name: "Boris Yeltsin" email: "boris.yeltsin@abc.com" name: "Tom Boboby" email: "tom.boboy@abc.com" ; const Demo = const text setText = ; const tags setTags = ; const onChangeText = { ; const lastTyped = text; const parseWhen = "," " " ";" "\n"; if parseWhen > -1 ; ; }; const handleSuggestionPress = { ; ; }; return <SafeAreaView => <View => <Text>To: </Text> <AutocompleteTags = = = = = = = = /> </View> </SafeAreaView> ;;
Props
Prop | type | Description | required | default |
---|---|---|---|---|
tags |
array of any |
The current tags to be rendered | true |
|
labelExtractor |
function |
Determines what property of tags is displayed |
true |
|
text |
string |
value of TextInput |
true |
|
onChangeText |
function |
called when text changes, should also handle tag creation |
true |
|
onChangeTags |
function |
called when tags change (i.e. by deleting), should just write tags |
true |
|
minInputWidth |
number |
minimum width of TextInput before jumping to new line |
false |
100 |
suggestions |
array of any |
All possible suggestions | false |
[] |
suggestionExtractor |
function |
determines which property of suggestions is displayed |
false |
same as labelExtractor |
onSuggestionPress |
function |
called when suggestion is pressed | false |
null |
onTagPress |
function |
called when tag is pressed | false |
null |
renderSuggestion |
function |
renders a custom suggestion item | false |
null |
renderTag |
function |
renders a custom tag | false |
null |
filterSuggestions |
function |
filters suggestions based on text (receives text as parameter) |
false |
null |
inputProps |
TextInput props |
any additional props for TextInput |
false |
null |
flatListProps |
FlatList props |
any additional props for FlatList |
false |
null |
Style Props
No style props are required.
Prop | Description |
---|---|
containerStyle |
The outmost container which contains the TextInput and the FlatList of suggestions |
tagContainerStyle |
Container for the tags and the TextInput |
inputContainerStyle |
Container around the TextInput |
inputStyle |
Applied to the TextInput directly |
tagStyle |
Applied to each tag |
tagTextStyle |
Applied to the tag label |
suggestionStyle |
Applied to each suggestion |
suggestionContainerStyle |
Applied to the FlatList which renders suggestions |
suggestionTextStyle |
Applied to the suggestion label |
Contributing
PRs and issues welcome!