/react-native-tag-group

A simple Tag component that supports both single and multiple selection.

Primary LanguageJavaScriptMIT LicenseMIT

react-native-tag-group

A simple Tag component that supports both single and multiple selection.

Get Started

Installation

npm i react-native-tag-group --save

TagGroup Usage

import TagGroup from 'react-native-tag-group';

// ...

render() {
  return (
    <TagGroup 
      ref={ref => this.tagGroup = ref}
      source={['One', 'Two', 'Three']}
      onSelectedTagChange={(selected) => { this.setState({selected}); }}
    />
  );
}

TagGroup Props

Props Type Description
style View style container's style
source array source array, usually a string array.
singleChoiceMode bool only allow select one Tag at one time. Default false.
onSelectedTagChange function callback after Tag(s) pressed, the parameter is a string array[], or (stringValue, selectedIndex) when set singleChoiceMode to true.
tintColor string set the border color and background color when Tag is selected.
tagStyle/activeTagStyle View style set the Tag's style before and after selected.
textStyle/activeTextStyle Text style set the Tag's text style before and after selected.
touchableOpacity bool use TouchableOpacity instead of TouchableWithoutFeedback.

Methods

select(index)

Select Tag at the index, this WON'T invoke onSelectedTagChange callback.

unselect(index)

Unselect Tag at the index, this WON'T invoke onSelectedTagChange callback.

getSelectedIndex()

Get the index array of the selected Tag(s), return -1 if no Tag is selected.

Tag Usage

Tag can also be used as a simple button, for example:

import {Tag} from 'react-native-tag-group';

// ...

<Tag 
  text={'Button Text'}
  tagStyle={styles.buttonContainer}
  textStyle={styles.buttonText}
  onPress={this.onTagPress}
  touchableOpacity
/>

// ...

onTagPress = () => {
 console.log('Hello world!')
}

Tag Props

Props Type Description
tintColor string Tag's border color, you can also cusotomize it with tagStyle prop.
tagStyle View style Tag style.
textStyle Text style Tag's text style.
onPress function callback function when Tag is pressed.
touchableOpacity bool use TouchableOpacity instead of TouchableWithoutFeedback.

For more information please check the example.