2.2.1 • Published 3 years ago
react-native-tags v2.2.1
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 |
2.2.1
3 years ago
2.2.0
4 years ago
2.1.0
5 years ago
2.0.0
5 years ago
1.7.0
6 years ago
1.6.1
6 years ago
1.6.0
6 years ago
1.5.0
6 years ago
1.4.0
6 years ago
1.3.0
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago
1.0.0
6 years ago
0.2.1
6 years ago
0.2.0
7 years ago
0.1.1
8 years ago
0.1.0
8 years ago
0.0.4
8 years ago
0.0.3
8 years ago