npm.io
1.3.1 • Published 7 years ago

@esteemapp/react-native-tags

Licence
MIT
Version
1.3.1
Deps
0
Size
222 kB
Vulns
0
Weekly
0

React-Native-Tags

Build Status npm

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