Nostradamus Predicting Maelstroms

    react-native-tags-mod

    2.1.0 • Public • Published

    Mod

    This is just a Minimal Modification of the original version wich you can find it here: https://www.npmjs.com/package/react-native-tags All the rights go to the original developers.

    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

    Install

    npm i react-native-tags-mod

    DownloadsWeekly Downloads

    2

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    13.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • tribiec