Need help with react-native-tags?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

peterp
212 Stars 61 Forks MIT License 104 Commits 6 Opened issues

Description

Tag input component for React Native

Services available

!
?

Need anything else?

Contributors list

# 12,716
React N...
TypeScr...
GraphQL
nexus
65 commits
# 92,664
JavaScr...
mjml
email-b...
respons...
8 commits
# 480,199
JavaScr...
React N...
7 commits
# 379,305
TypeScr...
in-app-...
Objecti...
React N...
4 commits

React-Native-Tags

Build Status npm npm version

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.

Demo

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 = () => ( 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 }) => ( {tag} )} /> );

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.