# @esteemapp/react-native-tags

> Tag input component for React Native

Latest version **1.3.1** (published 2018-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @esteemapp/react-native-tags
pnpm add @esteemapp/react-native-tags
yarn add @esteemapp/react-native-tags
bun add @esteemapp/react-native-tags
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2018-09-04 |
| First published | 2018-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 221.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | eSteem |
| Maintainers | esteem.app |

## Links

- npm: https://www.npmjs.com/package/@esteemapp/react-native-tags
- Repository: https://github.com/esteemapp/react-native-tags
- Homepage: https://github.com/esteemapp/react-native-tags#readme
- Issues: https://github.com/esteemapp/react-native-tags/issues
- npm.io page: https://npm.io/package/@esteemapp/react-native-tags

## Recent versions

- 1.3.1 (latest) — 2018-09-04

## README

# React-Native-Tags

[![Build Status](https://travis-ci.org/peterp/react-native-tags.svg?branch=master)](https://travis-ci.org/peterp/react-native-tags)
[![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/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.

![Demo](https://camo.githubusercontent.com/e3d6f3f87e625ad787bda1e7b518307d29d21a23/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6c34394a5036786c6847723138795a46652f67697068792e676966)

## Installation

```terminal
npm install --save react-native-tags
```

```terminal
yarn add react-native-tags
```

## Usage

```jsx
import React from "react";
import Tags from "react-native-tags";

const UselessComponent = () => (
  <Tags
    initialText="monkey"
    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" }}
  />
);
```

## Props

| PropName          | Description                                | Default  |
| ----------------- | ------------------------------------------ | -------- |
| initialText       | The input element's text                   |          |
| initialTags       | ['the', 'initial', 'tags']                 |          |
| 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     |
| containerStyle    | Style                                      |          |
| style             | Style (`containerStyle` alias)             |          |
| inputStyle        | Style                                      |          |
| tagContainerStyle | Style                                      |          |
| tagTextStyle      | Style                                      |          |

---
_Source: https://npm.io/package/@esteemapp/react-native-tags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._