1.0.6 • Published 2 years ago
react-native-floating-tag-button v1.0.6
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-buttonUsage
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