diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000..5172429f26
Binary files /dev/null and b/.DS_Store differ
diff --git a/Readme.MD b/Readme.MD
index b31f0f4f69..cf05daf0cd 100644
--- a/Readme.MD
+++ b/Readme.MD
@@ -440,6 +440,29 @@ render () {
| rightTitle | none | string | provide a rightTitle to have a title show up on the right side of the button, will override any icon on the right |
| rightTitleContainerStyle | flex: 1, alignItems: 'flex-end', justifyContent: 'center' | object (style) | style the outer container of the rightTitle text |
| rightTitleStyle | marginRight: 5, color: '#bdc6cf' | object (style) | style the text of the rightTitle text |
+| label | none | react native component | add a label with your own styling by providing a label={} prop to ListItem |
+
+#### Badges
+
+You can now easily add a badge to your List Item
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| badge | none | object, accepts the following properties: value (string), badgeContainerStyle (object), badgeTextStyle (object). You can override the default badge by providing your own component with it's own styling by providing badge={{ element: }} | add a badge to the ListItem by using this prop |
+
+Example badge usage
+```
+
+
+ }}
+/>
+
+```
## SideMenu
diff --git a/src/badge/badge.js b/src/badge/badge.js
new file mode 100644
index 0000000000..f5b629ea90
--- /dev/null
+++ b/src/badge/badge.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+
+let styles = {}
+
+const Badge = ({ badge }) => {
+ if (badge.element) return badge.element
+ return (
+
+ {badge.value}
+
+ )
+}
+
+styles = StyleSheet.create({
+ badge: {
+ top: 2,
+ padding: 12,
+ paddingTop: 3,
+ paddingBottom: 3,
+ backgroundColor: '#444',
+ borderRadius: 20,
+ position: 'absolute',
+ right: 30
+ },
+ text: {
+ fontSize: 14,
+ color: 'white'
+ }
+})
+
+export default Badge
diff --git a/src/list/ListItem.js b/src/list/ListItem.js
index 5281146dc3..693ec53ffd 100644
--- a/src/list/ListItem.js
+++ b/src/list/ListItem.js
@@ -1,5 +1,6 @@
import React, { PropTypes } from 'react'
import { View, StyleSheet, TouchableHighlight, Image, Platform } from 'react-native'
+import Badge from '../badge/badge'
import Icon from '../icons/Icon'
import Text from '../text/Text'
import colors from '../config/colors'
@@ -30,6 +31,10 @@ const ListItem = ({
rightTitleContainerStyle,
rightTitleStyle,
subtitleContainerStyle,
+ badge,
+ badgeContainerStyle,
+ badgeTextStyle,
+ label,
}) => {
let Component = onPress ? TouchableHighlight : View
if (component) {
@@ -93,10 +98,20 @@ const ListItem = ({
style={styles.chevron}
size={28}
name={rightIcon.name}
- color={rightIcon.color || chevronColor} />
+ color={rightIcon.color || chevronColor}
+ />
)
}
+ {
+ badge && (
+ )
+ }
+ {
+ label && label
+ }
{
rightTitle && (
@@ -131,7 +146,8 @@ ListItem.propTypes = {
titleStyle: PropTypes.any,
hideChevron: PropTypes.bool,
chevronColor: PropTypes.string,
- roundAvatar: PropTypes.bool
+ roundAvatar: PropTypes.bool,
+ badge: PropTypes.any,
}
styles = StyleSheet.create({