Skip to content

Repository files navigation

React Native Tag Input

alt text

Simple Example

importTagInputfrom'react-native-tag-input';
...
<TagInputvalue={this.state.emails}onChange={(emails)=>this.setState({ emails })}labelExtractor={(email)=>email}text={this.state.text}onChangeText={(text)=>this.setState({ text })}/>

Props

PropDescriptionTypeDefault
valueAn array of tags, which can be any type, as long as labelExtractor below can extract a string from itArrayRequired
onChangeA 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 tagsFunctionRequired
labelExtractorA 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.FunctionRequired
textThe text currently being displayed in the TextInput following the list of tagsStringRequired
onChangeTextThis 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 occurFunctionRequired
editableIf false, text input is not editable and existing tags cannot be removedBooleantrue
tagColorBackground color of tagsString'#dddddd'
tagTextColorText color of tagsString'#777777'
tagContainerStyleStyling override for container surrounding tag textObjectundefined
tagTextStyleStyling override for tag's text componentObjectundefined
inputDefaultWidthWidth override for text input's default width when it's empty and showing placeholderNumber90
inputColorColor of text inputString'#777777'
inputPropsAny additional TextInput props (autoFocus, placeholder, returnKeyType, etc.)Objectundefined
maxHeightMax height of the tag input on screen (will scroll if max height reached)Number75
onHeightChangeCallback that gets passed the new component height when it changesFunctionundefined
scrollViewPropsAny additional ScrollView props (horizontal, showsHorizontalScrollIndicator, etc.)Objectundefined

About

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

Resources

Stars

0 stars

Watchers

6 watching

Forks

Releases

Packages

Contributors

Languages