Skip to main content
Version: 4.0.0-rc.4


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


import { Badge } from "@rneui/themed";


withBadge Higher-Order Component

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


ComponentReact ComponentPress handlers present then Pressable else ViewCustom component to replace the badge outer component.
badgeStyleView StyleAdditional styling for badge (background) view component.
containerStyleView StyleStyle for the container.
onLongPressGestureResponderEventHandlerCalled when a long-tap gesture is detected.
onPressFunctionCalled when a single tap gesture is detected.
onPressInGestureResponderEventHandlerCalled when a touch is engaged before onPress.
onPressOutGestureResponderEventHandlerCalled when a touch is released before onPress.
pressablePropsPressableProps except click handlersNone
statusprimary | success | warning | errorprimaryDetermines color of the indicator.
textPropsTextPropsExtra props for text component.
textStyleText StyleExtra styling for icon component.
valueReactNodeText value to be displayed by badge, defaults to empty.