Skip to main content
Version: 1.2.0

Badge

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

Standard
Standard
Mini Badge
Mini Badge
Badge as Indicator
Badge as Indicator

Mini Badge

This type of badge shows when no value prop is provided. This form is effective for showing statuses.

withBadge Higher-Order Component

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

Usage

import { Text, View } from 'react-native'
import { Avatar, Badge, Icon, withBadge } from 'react-native-elements'

// Standard badge
<Badge value="99+" status="error" />
<Badge value={<Text>My Custom Badge</Text>} />

// Mini badge
<Badge status="success" />
<Badge status="error" />
<Badge status="primary" />
<Badge status="warning" />

// Avatar with mini badge
<View>
<Avatar
rounded
source={{
uri: 'https://randomuser.me/api/portraits/men/41.jpg',
}}
size="large"
/>

<Badge
status="success"
containerStyle={{ position: 'absolute', top: -4, right: -4 }}
/>
</View>

// withBadge HOC

const BadgedIcon = withBadge(1)(Icon)
<BadgedIcon type="ionicon" name="ios-chatbubbles" />

// Using the decorator proposal
@connect(state => ({
notifications: state.notifications,
}))
@withBadge(props => props.notifications.length)
export default class MyDecoratedIcon extends React.Component {
render() {
return (
<Icon type="ionicon" name="md-cart" />
);
}
}

Props


Reference

badgeStyle

Additional styling for badge (background) view component (optional)

TypeDefault
View style (object)Internal Style

containerStyle

Style for the container (optional)

TypeDefault
View style (object)Internal Style

onPress

Function called when pressed on the badge

TypeDefault
functionnone

status

Determines color of the indicator

TypeDefault
primary, success, warning, errorprimary

textStyle

Extra styling for icon component (optional)

TypeDefault
Text style (object)Internal Style

value

Text value to be displayed by badge, defaults to empty

TypeDefault
String OR Number OR React Native Componentnone

Component

Custom component to replace the badge outer component

TypeDefault
React Native ComponentView, if onPress then TouchableOpacity

Props for withBadge


Reference for withBadge

value

Text value to be displayed by badge, defaults to empty

TypeDefault
String OR Number OR React Native Component OR Function, which returns one of the formernone

options

Also receives all Badge props.

Object with the following (optional) keys:

bottom

TypeDefault
number (optional)undefined

left

TypeDefault
number (optional)undefined
TypeDefault
number (optional)-16 (-3 with MiniBadge aka. without value)

top

TypeDefault
number (optional)-1 (3 with MiniBadge)

hidden

TypeDefault
boolean (optional)false

containerStyle

TypeDefault
View style (object)Internal Style