Badge
Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user.
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)
| Type | Default |
|---|---|
| View style (object) | Internal Style |
containerStyle#
Style for the container (optional)
| Type | Default |
|---|---|
| View style (object) | Internal Style |
onPress#
Function called when pressed on the badge
| Type | Default |
|---|---|
| function | none |
status#
Determines color of the indicator
| Type | Default |
|---|---|
primary, success, warning, error | primary |
textProps#
Extra props for text component (optional)
| Type | Default |
|---|---|
| Text props (object) | none |
textStyle#
Extra styling for icon component (optional)
| Type | Default |
|---|---|
| Text style (object) | Internal Style |
value#
Text value to be displayed by badge, defaults to empty
| Type | Default |
|---|---|
| String OR Number OR React Native Component | none |
Component#
Custom component to replace the badge outer component
| Type | Default |
|---|---|
| React Native Component | View, if onPress then TouchableOpacity |
Props for withBadge#
Reference for withBadge#
value#
Text value to be displayed by badge, defaults to empty
| Type | Default |
|---|---|
| String OR Number OR React Native Component OR Function, which returns one of the former | none |
options#
Also receives all Badge props.
Object with the following (optional) keys:
bottom#
| Type | Default |
|---|---|
| number (optional) | undefined |
left#
| Type | Default |
|---|---|
| number (optional) | undefined |
right#
| Type | Default |
|---|---|
| number (optional) | -16 (-3 with MiniBadge aka. without value) |
top#
| Type | Default |
|---|---|
| number (optional) | -1 (3 with MiniBadge) |
hidden#
| Type | Default |
|---|---|
| boolean (optional) | false |
containerStyle#
| Type | Default |
|---|---|
| View style (object) | Internal Style |