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 initialText="monkey" textInputProps={{ placeholder: "Any type of animal" }} initialTags={["dog", "cat", "chicken"]} onChangeTags={tags => console.log(tags)} onTagPress={(index, tagLabel, event, deleted) => console.log(index, tagLabel, event, deleted ? "deleted" : "not deleted") } containerStyle={{ justifyContent: "center" }} inputStyle={{ backgroundColor: "white" }} renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => ( <TouchableOpacity key={`${tag}-${index}`} onPress={onPress}> <Text>{tag}</Text> </TouchableOpacity> )} /> );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 |
