@esteemapp/react-native-tags

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