react-native-spk-tag-input

Label insertion component, manage the list from the visual environment and obtain an arrangement of all the words. Use it as a component for selecting keywords, emails, names, etc.

Installation

To install use the following commands:

npm install react-native-spk-tag-input

yarn add react-native-spk-tag-input

Simple Tag Component

Simple Usage

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import TagInput from 'react-native-spk-tag-input';

export default function App() {
  const [tags, setTags] = useState([]);

  return (
      <View style={styles.container}>
          <TagInput
              data={tags}
              getTags={(tagsnuevo) => { setTags(tagsnuevo) }}
          />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
    width: '100%'
  }
});

Custom TagInput Component

Usage

import { useState } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import TagInput from 'react-native-spk-tag-input';

export default function App() {
  const [errorVisibility, setErrorVisibility] = useState(false);
  const [tags, setTags] = useState([]);

  return (
    <View style={styles.container}>
      <TagInput
        data={tags}
        getTags={(tagsnuevo) => {setTags(tagsnuevo);}}
        placeholder={"tagsPlaceholder"}
        label={"Tags"}
        errorVisibility={errorVisibility}
        errorMessage={"You have not selected tags"}
        required={true}
        placeholderTextColor={"#b3ffb3"}
        iconSize={20}
        primaryColor="#00ff00"
        boxStyle={{ backgroundColor: '#fff', height: 50 }}
        textInputStyle={{ backgroundColor: '#fff', height: '100%', color: "#33cc33" }}
        labelStyle={{ color: '#00cc00' }}
        tagStyle={{ borderWidth: 6, height: 50 }}
        textTagStyle={{ color: "#00cc00" }}
        deleteButtomStyle={{ backgroundColor: 'transparent', height: 30, justifyContent: 'center' }}
      />
      <View style={{ marginTop: 30 }} />
      <Button title='Validate Tags' onPress={() => { setErrorVisibility(!errorVisibility) }} />
    </View >
  );
}

How do I insert tags to the list?

After pointing to the label, it can be entered using the space bar or the enter key to insert labels one by one, or several labels preceded by a comma. For example: one, two, three and then an insertion key.

Props

prop	Type	Description
data	Array	The data to be displayed in the component.
getTags	Function	Value return function, it is executed immediately after the insertion or deletion of a label, the value returned is an array of labels Ex: [one, two, three]
required	Boolean	Required selection element indicator (*).
label	string	Selection box title.
labelStyle	Object	Label style. { fontSize: 13, color: '#000' }
errorMessage	string	Error message displayed in case of failed validation.
errorVisibility	Boolean	Indicates whether the error message is displayed.
placeholder	string	Placeholder text displayed when no item is selected.
placeholderTextColor	string	Placeholder text color.
iconSize	Number	Size of the icon (label icon/close icon) inside the box.
primaryColor	string	Main color to highlight selected elements. 'rgba(20, 164, 172, 0.2)' "#fff"
boxStyle	Object	label box style. { backgroundColor: '#fff', height: 50 }
textInputStyle	Object	Text style inside the box. { backgroundColor: '#fff', height: '100%', color: "#33cc33" }
labelStyle	Object	tag style (component name). { color: '#00cc00' }
tagStyle	Object	individual label box style. { borderWidth: 6, height: 50 }
textTagStyle	Object	individual label box text style. { color: "#00cc00" }
deleteButtomStyle	Object	individual label box style. { backgroundColor: 'transparent', height: 30, justifyContent: 'center' }