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

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