react-native-tags-input
Fully customizable React Native input-component to add tags to an array. The tags are displayed as chips that can be deleted.
Npm repo
https://www.npmjs.com/package/react-native-tags-input
Git repo
https://github.com/jimmybengtsson/react-native-tags-input
Getting started
$ npm install react-native-tags-input --save
Props
necessary | types | about | |
---|---|---|---|
tags | ✓ | object | Object containing a empty string called tag and a empty array called tagsArray |
updateState | ✓ | func | Function to pass for component to be able to update parents state |
keysForTag | string | String to decide when a tag will be added. Space for standard | |
containerStyle | styles | Styles for the most outer view component | |
label | string | Text to appear on top of input | |
labelStyle | styles | Styles for label text | |
inputContainerStyle | styles | Styles for the outer input component | |
inputStyle | styles | Styles for the inner input component | |
leftElement | element | Element to be passed to input. Such as an icon. | |
leftElementContainerStyle | styles | Styles for the left element inside input | |
rightElement | element | Element to be passed to input. Such as an icon. | |
rightElementContainerStyle | styles | Styles for the right element inside input | |
tagsViewStyle | styles | Styles for the view component containing the tag-chips | |
tagStyle | styles | Styles for the tag-chips | |
tagTextStyle | styles | Styles for the text inside a tag-chip | |
disabled | boolean | Active input or not? false for standard | |
disabledInputStyle | styles | Styles for when the input is disabled | |
deleteElement | element | If this is included, the delete icon will be replaced by the element provided. (Thanks to periabyte) | |
deleteIconStyles | styles | Styles for the delete icon | |
customElement | element | Element to be displayed between input and tags. For example suggestions. (Auto suggestions will be implemented in a future release) |
This component also inherits all native TextInput props that come with a standard React Native TextInput element.
Examples
Auto suggest example by using customElement-prop
Standard example
;; ; Component { superprops; thisstate = tags: tag: '' tagsArray: ; } { this }; { return <View style=stylescontainer> <TagInput updateState=thisupdateTagState tags=thisstatetags /> </View> ; } const styles = StyleSheet;
Custom example
;;; ; const mainColor = '#3ca897'; Component { superprops; thisstate = tags: tag: '' tagsArray: tagsColor: mainColor tagsText: '#fff' ; } { this }; { return <View style=stylescontainer> <TagInput updateState=thisupdateTagState tags=thisstatetags placeholder="Tags..." label='Press comma & space to add a tag' labelStyle=color: '#fff' leftElement=<Icon name='tag-multiple' type='material-community' color=thisstatetagsText/> leftElementContainerStyle=marginLeft: 3 containerStyle=width: Dimensionswidth - 40 inputContainerStyle=stylestextInput backgroundColor: thisstatetagsColor inputStyle=color: thisstatetagsText onFocus= this onBlur= this autoCorrect=false tagStyle=stylestag tagTextStyle=stylestagText keysForTag=', '/> </View> ; } const styles = StyleSheet;
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
License
react-native-tags-input is MIT License @ Jimmy Bengtsson