Skip to content
This repository has been archived by the owner on Jun 13, 2023. It is now read-only.

peterp/react-native-tags

Repository files navigation

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 = () => (
  <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