lists updated with badges and avatars

Components/Themes/light.js

@@ -81,6 +81,7 @@ module.exports = {
         return this.inverseTextColor;
     },	
 
+    borderWidth: 1,
 
 	inputColor: "#000",
 	inputBorderColor: "#000",
@@ -99,6 +100,14 @@ module.exports = {
 	jumbotronBg: "#C9C9CE",
 
     contentPadding: contentPadding,
-
-    listBorderColor: "#ddd"
+
+    listBorderColor: "#ddd",
+    listDividerBg: "#F5F5F5",
+    listItemPadding: 15,
+    listNoteColor: "#58575C",
+
+    iconFontSize: 27,
+
+    badgeColor: "#fff",
+    badgeBg: "#ED1727"
 }

Components/Widgets/Badge.js

@@ -0,0 +1,41 @@
+/* @flow */
+'use strict';
+
+import React, {Text, View } from 'react-native';
+import NativeBaseComponent from '../Base/NativeBaseComponent';
+import _ from 'lodash';
+import computeProps from '../../Utils/computeProps';
+
+
+export default class BadgeNB extends NativeBaseComponent {
+
+    prepareRootProps() {
+
+        var type = { 
+            color: this.getTheme().badgeColor,
+            fontSize: this.getTheme().fontSizeBase,
+            backgroundColor: this.getTheme().badgeBg,
+            padding: 4,
+            alignSelf: 'flex-start',
+            borderRadius: 13,
+            width: 27,
+            textAlign: 'center'
+
+        }
+
+        var defaultProps = {
+            style: type
+        }     
+
+        return computeProps(this.props, defaultProps);
+
+    }
+    render() {
+        return(
+
+            <Text {...this.prepareRootProps()}>{this.props.children}</Text>
+        );
+    }    
+
+}
+

Components/Widgets/ListItem.js

@@ -16,36 +16,38 @@ export default class ListItemNB extends NativeBaseComponent {
    getInitialStyle() {
            return {
                listItem: {
-                   borderBottomWidth: 1,
-                   padding: 8,
+                   borderBottomWidth: this.getTheme().borderWidth,
+                   padding: this.getTheme().listItemPadding,
                    borderRadius: 1,
-                   paddingRight: 10,
-                   paddingLeft: 10,
                    flex: 1,
                    justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start',
                    flexDirection: 'row',
                    alignItems: 'center',
                    borderColor: this.getTheme().listBorderColor
                },
                listItemDivider: {
-                   borderBottomWidth: 1,
-                   padding: 7,
-                   backgroundColor: '#ddd',
+                   borderBottomWidth: this.getTheme().borderWidth,
+                   padding: this.getTheme().listItemPadding,
+                   backgroundColor: this.getTheme().listDividerBg,
                    flex: 1,
                    justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start',
                    flexDirection: 'row',
                    borderColor: this.getTheme().listBorderColor
                },
                itemText: {
-                   fontSize: 18,  
+                   fontSize: 16,  
+               },
+               dividerItemText: {
+                   fontSize: 16,  
+                   fontWeight: '500'
                },
                itemIcon: {
-                   fontSize: 27,
+                   fontSize: this.getTheme().iconFontSize,
                    color: 'black'
                },
                itemNote: {
                    fontSize: 15,
-                   color: '#58575C',
+                   color: this.getTheme().listNoteColor,
                    alignSelf: 'center',
                    fontWeight: '100',
                    flex: 1,
@@ -71,6 +73,22 @@ export default class ListItemNB extends NativeBaseComponent {
                 flex: 1,
                 paddingLeft: 10
 
+            },
+            right2 : {
+                flex: 1,
+                flexDirection: 'row',
+                paddingLeft: 10,
+                alignItems: 'center',
+                justifyContent: 'space-between'
+
+            },
+            right3 : {
+                flex: 1,
+                flexDirection: 'row',
+                paddingLeft: 10,
+                alignItems: 'center',
+                justifyContent: 'space-between'
+
             }
         }
     }
@@ -120,20 +138,27 @@ export default class ListItemNB extends NativeBaseComponent {
             }
         }
         else if(child.type == Text) {
-            if(child.props.note && this.thumbnailPresent()) {
-                defaultProps = {
-                    style: this.getInitialStyle().itemSubNote
-                }
-            }
-            else if(child.props.note) {
-                defaultProps = {
-                    style: this.getInitialStyle().itemNote
-                }
-            }
-            else {
-                defaultProps = {
-                    style: this.getInitialStyle().itemText
+            if (this.props.itemDivider) {
+              defaultProps = {
+                    style: this.getInitialStyle().dividerItemText
                 }
+            } else {
+              if(child.props.note && this.thumbnailPresent()) {
+                  defaultProps = {
+                      style: this.getInitialStyle().itemSubNote
+                  }
+              }
+              else if(child.props.note) {
+                  defaultProps = {
+                      style: this.getInitialStyle().itemNote
+                  }
+              }
+              else {
+                  defaultProps = {
+                      style: this.getInitialStyle().itemText
+                  }
+              }
+
             }
         }
         else if(child.type == Icon) {
@@ -171,6 +196,23 @@ export default class ListItemNB extends NativeBaseComponent {
 
     }
 
+
+    notePresent() {
+
+          var notePresent = false;
+          if (this.thumbnailPresent()) {
+              React.Children.forEach(this.props.children, function (child) {
+                  if(child.type == Text && child.props.note)
+                      notePresent = true;
+              })
+
+          } 
+
+          return notePresent;
+
+
+    }
+
     renderChildren() {
         if(!this.thumbnailPresent() && !this.iconPresent()) {
             var newChildren = React.Children.map(this.props.children, (child) => {
@@ -189,7 +231,8 @@ export default class ListItemNB extends NativeBaseComponent {
             else {
                 var childrenArray = React.Children.toArray(this.props.children);
                 newChildren.push(React.cloneElement(childrenArray[0], this.getChildProps(childrenArray[0])));
-                newChildren.push(<View style={this.getRightStyle().right}>
+                newChildren.push(<View style={ this.notePresent() ? this.getRightStyle().right : 
+                                               this.getRightStyle().right2 }>
                         {childrenArray.slice(1).map((child) => {
                           return React.cloneElement(child, this.getChildProps(child));
                         })}

index.js

@@ -22,6 +22,7 @@ import InputGroup from './Components/Widgets/InputGroup';
 import Icon from './Components/Widgets/Icon';
 import Thumbnail from './Components/Widgets/Thumbnail';
 import Card from './Components/Widgets/Card';
+import Badge from './Components/Widgets/Badge';
 
 module.exports = {
 	Header: Header,
@@ -43,5 +44,6 @@ module.exports = {
 	InputGroup: InputGroup,
 	Icon: Icon,
 	Thumbnail: Thumbnail,
-	Card: Card
+	Card: Card,
+	Badge: Badge
 };