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

right#

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