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 |
|