Badge
Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user.
![Standard](/img/badge/badge--standard.jpg)
![Mini Badge](/img/badge/badge--mini.jpg)
![Badge as Indicator](/img/badge/badge--indicator.jpg)
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 |