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