react-native-bpk-component-badge
Backpack React Native badge component.
Installation
npm install react-native-bpk-component-badge --save-dev
Usage
;;;;; const styles = StyleSheet; { return <View style=stylescontainer> <BpkBadge message="Badge" accessibilityLabel="This is a badge" type=BADGE_TYPESsuccess /> <BpkBadge message="Badge" type=BADGE_TYPESwarning /> <BpkBadge message="Badge" type=BADGE_TYPESdestructive /> <BpkBadge message="Badge" type=BADGE_TYPESinverse /> <BpkBadge message="Badge" type=BADGE_TYPESlight /> <BpkBadge message="Badge" type=BADGE_TYPESoutline /> <BpkBadge message="Badge" type=BADGE_TYPESsuccess accessoryView= <BpkBadgeIcons icons=<BpkIcon icon=iconsflight /> <BpkIcon icon=iconshotels /> separator="+" /> /> <BpkBadge message="Badge" docked=BADGE_DOCKED_TYPESstart type=BADGE_TYPESwarning /> <BpkBadge message="Badge" docked=BADGE_DOCKED_TYPESend type=BADGE_TYPESdestructive /> </View > ; }
Props
Property | PropType | Required | Default Value |
---|---|---|---|
accessibilityLabel | string | if message === null |
props.message |
accessoryView | element | false | null |
docked | oneOf('start', 'end') | false | null |
message | string | false | null |
type | oneOf('success', 'warning', 'destructive', 'light', 'inverse', 'outline') | false | warning |
accessoryView
The accessory view allows for icons to be placed in front of the text inside the Badge component in conjunction with BpkBadgeIcons
.
BpkBadgeIcons
Renders icons suitable to be placed inside a Badge.
Theme Props
badgeSuccessBackgroundColor
badgeWarningBackgroundColor
badgeDestructiveBackgroundColor
badgeSuccessTextColor
badgeWarningTextColor
badgeDestructiveTextColor
Props
Property | PropType | Required | Default Value |
---|---|---|---|
icons | arrayOf(BpkIcon) | true | - |
itemStyle | style | false | null |
separator | string | false | null |