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