Badge
Round colored badge, typically used to show a number
(code example)
This component extends TouchableOpacity, View props.
Usage
<Badge label={'999'} size={16}/>
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