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