Mod
https://www.npmjs.com/package/react-native-tags All the rights go to the original developers.
This is just a Minimal Modification of the original version wich you can find it here:React-Native-Tags
A React Native component that allows you to input text and formats the text into a tag when a space or comma is entered. Tapping on the tag will remove it.
Installation
npm install --save react-native-tags
yarn add react-native-tags
Usage
import React from "react";import TouchableOpacity Text from "react-native";import Tags from "react-native-tags"; const MyTagInput = <Tags ="monkey" = = = = = = = />;
Render Props
renderTag
If you would like to add new functionality or modify the way that the tags are rendered then pass in a renderTag prop.
PropName | Description |
---|---|
tag | text of the tag |
index | position in the array of tags |
onPress | Removes the tag if deleteTagsOnPress and readonly is false |
Props
PropName | Description | Default |
---|---|---|
initialText | The input element's text | |
textInputProps | forward props to the textInput | |
initialTags | ['the', 'initial', 'tags'] | |
createTagOnString | Triggers new tag creation | [",", ".", " "] |
onChangeTags | Fires when tags are added or removed | |
maxNumberOfTags | The max number of tags that can be entered | infinity |
onTagPress | Fires when tags are pressed | |
readonly | Tags cannot be modified | false |
deleteTagOnPress | Remove the tag when pressed | true |
renderTag | Manage the rendering of your own Tag |
Style modification props
PropName | Description | Default |
---|---|---|
style | Style (containerStyle alias) |
|
containerStyle | Style | |
inputContainerStyle | Style | |
inputStyle | Style | |
tagContainerStyle | Style | |
tagTextStyle | Style |