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
| Name | Type | Default | Description |
|---|---|---|---|
Component | React Component | Press handlers present then Pressable else View | Custom component to replace the badge outer component. |
badgeStyle | View Style | Additional styling for badge (background) view component. | |
containerStyle | View Style | Style for the container. | |
onLongPress | GestureResponderEventHandler | Called when a long-tap gesture is detected. | |
onPress | Function | Called when a single tap gesture is detected. | |
onPressIn | GestureResponderEventHandler | Called when a touch is engaged before onPress. | |
onPressOut | GestureResponderEventHandler | Called when a touch is released before onPress. | |
pressableProps | PressableProps except click handlers | None | |
status | primary or success or warning or error | primary | Determines color of the indicator. |
textProps | TextProps | Extra props for text component. | |
textStyle | Text Style | Extra styling for icon component. | |
value | ReactNode | Text value to be displayed by badge, defaults to empty. |