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