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.