Skip to main content
Version: Next

Badge

Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user.

Usage#

withBadge Higher-Order Component#

The withBadge HOC allows you to easily add badges to icons and other components.


Props#

Badge#

Reference#

Badge#

Component#

Custom component to replace the badge outer component.

TypeDefault
React ComponentonPress ? TouchableOpacity : View

badgeStyle#

Additional styling for badge (background) view component.

TypeDefault
View style(Object)None

containerStyle#

Style for the container.

TypeDefault
View style(Object)None

onPress#

Function called when pressed on the badge.

TypeDefault
FunctionNone

status#

Determines color of the indicator.

TypeDefault
"primary" or "success" or "warning" or "error"primary

textProps#

Extra props for text component.

TypeDefault
TextPropsNone

textStyle#

Extra styling for icon component.

TypeDefault
Text Style(Object)None

value#

Text value to be displayed by badge, defaults to empty.

TypeDefault
anyNone