Need help with react-native-tag-input?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jwohlfert23
217 Stars 100 Forks MIT License 83 Commits 4 Opened issues

Description

A simple React Native component that creates an input for tags, emails, etc.

Services available

!
?

Need anything else?

Contributors list

# 37,215
TypeScr...
React N...
React
react-n...
28 commits
# 280,399
Laravel
PHP
React N...
tagging
16 commits
# 106,353
React N...
Objecti...
Java
snowfla...
6 commits
# 13,140
GraphQL
React N...
Objecti...
Mongoos...
4 commits
# 433,219
React N...
tagging
Dart
Kotlin
3 commits
# 481,367
React N...
tagging
Objecti...
Java
2 commits
# 66,048
React N...
tagging
Dart
Clojure
2 commits
# 107,436
React N...
Objecti...
Shell
HTML
1 commit
# 522,456
React N...
tagging
Objecti...
Java
1 commit
# 15,962
guidebo...
React N...
js
lazy-lo...
1 commit

React Native Tag Input

alt text

Simple Example

import TagInput from 'react-native-tag-input';

...

this.setState({ emails })} labelExtractor={(email) => email} text={this.state.text} onChangeText={(text) => this.setState({ text })} />

Props

Prop

Description Type Default
value
An array of tags, which can be any type, as long as labelExtractor below can extract a string from it Array Required
onChange
A handler to be called when array of tags change. The parent should update the value prop when this is called if you want to enable removal of tags Function Required
labelExtractor
A function to extract string value for label from item. May also return an element to be shown in place of text, in which case the tagTextColor and tagTextStyle props will be ignored. Function Required
text
The text currently being displayed in the TextInput following the list of tags String Required
onChangeText
This callback gets called when the user types in the TextInput. The parent should update the text prop when this is called if they want to enable input. This is also where any parsing to detect new tags should occur Function Required

editable
| If false, text input is not editable and existing tags cannot be removed | Boolean |
true
tagColor
| Background color of tags | String |
'#dddddd'
tagTextColor
| Text color of tags | String |
'#777777'
tagContainerStyle
| Styling override for container surrounding tag text | Object |
undefined
tagTextStyle
| Styling override for tag's text component | Object |
undefined
inputDefaultWidth
| Width override for text input's default width when it's empty and showing placeholder | Number |
90
inputColor
| Color of text input | String |
'#777777'
inputProps
| Any additional TextInput props (autoFocus, placeholder, returnKeyType, etc.) | Object |
undefined
maxHeight
| Max height of the tag input on screen (will scroll if max height reached) | Number |
75
onHeightChange
| Callback that gets passed the new component height when it changes | Function |
undefined
scrollViewProps
| Any additional ScrollView props (horizontal, showsHorizontalScrollIndicator, etc.) | Object |
undefined

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.