react-native-tag-selector v0.0.3

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

Contribution

• @thedukeatreides The main author.