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 BadgeThis type of badge shows when no value
prop is provided. This form is
effective for showing statuses.
#
withBadge Higher-Order ComponentThe withBadge HOC allows you to easily add badges to icons and other components.
#
Usageimport { 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#
ReferencebadgeStyle
#
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 withBadgevalue
#
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 |