react-native-tags-selector

A ReactNative tag selector that supports single-line sliding, multi-line display, and single-select.

Preview

Installation

npm install react-native-tags-selector

or

yarn add react-native-tags-selector

Usage

Basic usage

Example

import TagsSelector from 'react-native-tags-selector';

// ...

const dataSource = [
  { id: '1', name: 'Tag1', image: require('../assets/tip_warn.png') },
  { id: '2', name: 'Tag2', image: require('../assets/tip_warn.png') },
  { id: '3', name: 'Tag3', image: require('../assets/tip_warn.png') },
  { id: '4', name: 'Tag4', image: require('../assets/tip_warn.png') },
  { id: '5', name: 'Tag5', image: require('../assets/tip_warn.png') },
  { id: '6', name: 'Tag6', image: require('../assets/tip_warn.png') },
  { id: '7', name: 'Tag7', image: require('../assets/tip_warn.png') },
  { id: '8', name: 'Tag8', image: require('../assets/tip_warn.png') },
];

<TagsSelector
  selectedId={'1'}
  multiLine={false}
  dataSource={dataSource}
/>

Advanced usage

Supports customizing the following attributes

| PropName | type | Description | Default | |---------------------------|---------------------|-----------------------------------|----------| | selectedId | string | ID is selected by default | | | multiLine | boolean | Whether to display multiple lines | false | | dataSource | DataModel[] | Data source used to display tags | | | onChecked | function | Callback when tag is selected | | | textStyle | TextStyle | Set the style of tag text | | | chipStyle | ViewStyle | Set the style of a single tag | | | selectedTextColor | string | Set selected text color | #5B00FF | | unselectedTextColor | string | Set unselected text color | #5B00FF | | selectedBorder | string | Set selected border color | #5B00FF | | unselectedBorder | string | Set unselected border color | #E5E7E9 | | selectedBackgroundColor | string | Set selected background color | #FFFFFF | | unselectedBackgroundColor | string | Set unselected background color | #F9F9F9 | | showMoreIcon | ImageSourcePropType | Set show more icon | | | showLessIcon | ImageSourcePropType | Set show less icon | | | showMoreStyle | ViewStyle | Set the style of show more | |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library