A simple Tag component that supports both single and multiple selection.
npm i react-native-tag-group --saveimport TagGroup from 'react-native-tag-group';
// ...
render() {
return (
<TagGroup
ref={ref => this.tagGroup = ref}
source={['One', 'Two', 'Three']}
onSelectedTagChange={(selected) => { this.setState({selected}); }}
/>
);
}| 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. |
Select Tag at the index, this WON'T invoke onSelectedTagChange callback.
Unselect Tag at the index, this WON'T invoke onSelectedTagChange callback.
Get the index array of the selected Tag(s), return -1 if no Tag is selected.
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!')
}| 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.