react-native-tag-selector

Simple React Native tag selector control with folding of overflowed tags

Installation

$ npm i react-native-tag-selector --save

Basic Usage

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TagSelector from 'react-native-tag-selector';

class Example extends React.Component {

	tags = [
		{
			id: 'quick',
			name: 'quick'
		},
		{
			id: 'brown',
			name: 'brown'
		},
		{
			id: 'fox',
			name: 'fox'
		}
	]

	constructor(props) {
		super(props);
		this.state = {
			selectedTags: []
		}
	}

	render() {
		return (
			<View>
				<Text>
					Selected: {this.state.selectedTags.map(tag => `${tag} `)}
				</Text>
				<TagSelector
					maxHeight={70}
					tags={this.tags}
					onChange={(selected) => this.setState({ selectedTags: selected })} />
			</View>
		);
	}
}

With all props:

<TagSelector
    maxHeight={70}
    expandCaptions={['more', 'less']}
    expdandedContainerStyle = {styles.containerExpanded}
    containerStyle = {styles.container}
    selectedTagStyle = {styles.tagSelected}
    tagStyle = {styles.tag}
    separatorStyle = {styles.separator}
    expandBtnStyle = {styles.btnStyle}
    expandTextStyle = {styles.btnText}
    tags={this.tags}
    onChange={ (selected) => this.setState({selectedTags: selected})} />

Props

| Key | Type | Default | Description | | --- | --- | --- | --- | | onChange | Function | *required | callback on change with one (tagsSelected) param - array of selected tags' id | | maxHeight | Array | 0 | max height of view to allow before appears 'more' text and folding functionality. 0 to disable folding and always show all tags | | tags | Array | *required | array of tags to render - objects of type {id: string, name: string} | | expandCaptions | Array | ['more', 'less'] | array of expand captions - ['Show more', 'Show less'] | | expdandedContainerStyle | style | - | style of expanded container | | containerStyle | style | - | style of default container | | selectedTagStyle | style | - | selected tag style | | tagStyle | style | - | default tag style | | separatorStyle | style | - | separator between tags and expand button style | | expandBtnStyle | style | - | expand button style | | expandTextStyle | style | - | expand button text style |

Contribution

• @thedukeatreides The main author.