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.