Badge

Round colored badge, typically used to show a number
(code example)

info

This component extends TouchableOpacity, View props.

Usage

Live Editor

<Badge label={'999'} size={16}/>

Result

Loading...

API

backgroundColor

Background color string

borderColor

Color of border around the badge ImageStyle['borderColor']

borderRadius

Radius of border around the badge number

borderWidth

Width of border around the badge number

containerStyle

Additional styles for the top container ViewStyle

customElement

Custom element to render instead of an icon JSX.Element

hitSlop

Defines how far a touch event can start away from the badge ViewProps['hitSlop']

icon

Renders an icon badge ImageSourcePropType

iconProps

Additional props passed to icon ImageProps

iconStyle

Additional styling to badge icon ImageStyle

label

Passing a label (undefined) will present a pimple badge

Text to show inside the badge string

labelFormatterLimit

Beyond the max number for that digit length, a '+' will show at the end.

If set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. Example: labelLengthFormatter=2, label=124, label will present '99+' Receives a number from 1 to 4, representing the label's max digit length LabelFormatterValues

labelStyle

Additional styles for the badge label TextStyle

onPress

Called when the badge is pressed (props: any) => void

size

Badge's size number