react-native-floating-tag-button

A floating button with animated tags that you can add to.

Installations

npm install react-native-floating-tag-button --save
yarn install react-native-floating-tag-button

Usage

import { TagSource, TagButton } from 'react-native-floating-tag-button';

const data: TagSource[] = [
   { value: 'Tag 1', label: 'test 1' },
   { value: 'Tag 2', label: 'test 2' },
   { value: 'Tag 3', label: 'test 3' },
];

const onSelect = (selectedTag: string[]) => {
   //do something with selectedTag
};

<TagButton
  dataSource={data}
  onTagSelected={onSelect}
  icon={
    <Ionicons
      name="menu"
      size={24}
      color="white"
      style={{ backgroundColor: 'blue', borderRadius: 180, padding: 10 }}
    />
  }
  position={{ bottom: 15, right: 15 }}
  tagContainerStyle={{
  backgroundColor: 'red',
  marginRight: 10,
  }}
  textStyle={{ color: 'yellow', fontSize: 14 }}
  activeTagContainerStyle={{ backgroundColor: 'green' }}
  activeTextStyle={{ color: 'white' }}
  tintColor="black"
  touchableOpacity />

Properties

Prop	Description	Type	Default	Is Required
dataSource	the tags to display and use.	TagSource[]	[]	yes
onTagSelected	the callback method when a tag is selected.	(tags: string[]) => void	none	yes
icon	the element to display as the floating button to hide and show the tags. the element can be an icon, a text, an image, etc.	JSX.Element	none	yes
sortTags	if true, the tags will be sorted alphabetically.	boolean	false	no
position	an object to define the position of the button on the screen.	{ top?: number; left?: number; right?: number; bottom?: number; }	{ bottom: 10, right: 5 }	no
direction	define the direction of the alignement between the floating button and his tags.	'row' | 'row-reverse' | 'column' | 'column-reverse'	column	no
tagContainerStyle	the style of the container of the tags.	StyleProp<ViewStyle>	{ backgroundColor: '#787878', borderRadius: 180, width: 75 }	no
textStyle	the style of the labels of the tags.	StyleProp<TextStyle>	{ color: '#ffffff', fontSize: 14 }	no
activeTagContainerStyle	the style of the container of the tags when selected.	StyleProp<ViewStyle>	{ backgroundColor: 'white', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, borderWidth: 1 }	no
activeTextStyle	the style of the labels of the tags when selected.	StyleProp<TextStyle>	{ color: '#333' }	no
tintColor?	the color of the border of the tags.	string	00a8ff	no
touchableOpacity?	if true, the tags will use a touchable opacity as clickable component, otherwise they will use a touchable without feedback.	boolean	false	no
animationDuration?	the duration of the animation when the tags are shown.	number	200	no

A complete minimal example can be found Here.

Contributing

See the contributing guide to learn how to contribute to the repository.

License

MIT