Badge

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

info

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