• This repository has been archived on 13/Jun/2023
  • Stars
    star
    288
  • Rank 143,818 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Tag input component for React Native

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