added badge and label properties to ListItem

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={<SomeComponent />} 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: <YourCustomElement /> }} | add a badge to the ListItem by using this prop |     
+
+Example badge usage
+```
+<ListItem
+  ...
+  badge={{ value: 3, badgeTextStyle: { color: 'orange' }, badgeContainerStyle: { marginTop: -20 } }}
+/>      
+
+<ListItem 
+  ...
+  badge={{ element: <MyCustomElement /> }}
+/>
+
+```
 
 
 ## SideMenu

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 (
+    <View style={[ styles.badge, badge.badgeContainerStyle ]}>
+      <Text style={[ styles.text, badge.badgeTextStyle ]}>{badge.value}</Text>
+    </View>
+  )
+}
+
+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

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}
+              />
             </View>
           )
         }
+        {
+          badge && (
+            <Badge
+              badge={badge}
+            />)
+        }
+        {
+          label && label
+        }
         {
           rightTitle && (
             <View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
@@ -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({