added listview icon type, bump version to 6, closes issue react-nativ…

…e-elements#41
flyingcircle · Sep 25, 2016 · f883b3f · f883b3f
1 parent 50af533
commit f883b3f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/Readme.MD b/Readme.MD
@@ -347,7 +347,7 @@ const list = [
       <ListItem
         key={i}
         title={item.title}
-        icon={{name: item.icon}}
+        leftIcon={{name: item.icon}}
       />
     ))
   }
@@ -415,9 +415,9 @@ render () {
 | component | View or TouchableHighlight if onPress method is added as prop | React Native element | replace element with custom element (optional) |
 | containerStyle | none | object (style) | additional main container styling (optional) |
 | hideChevron | false | boolean | set if you do not want a chevron (optional) |
-| icon | none | object {name, color, style} | icon configuration for left icon (optional) |
+| leftIcon | none | object {name, color, style, type} (type defaults to material icons) | icon configuration for left icon (optional) |
+| rightIcon | {name: chevron} | object {name, color, style, type} (type defaults to material icons) | right icon (optional), will only show up if there is an onPress method attached ([material icon name](https://design.google.com/icons/)) |
 | onPress | none | function | onPress method for link (optional) |
-| rightIcon | chevron | string | right icon (optional) ([material icon name](https://design.google.com/icons/)) |
 | roundAvatar | false | boolan | make left avatar round |
 | subtitle | none | string | subtitle text (optional) |
 | subtitleStyle | none | object (style) | additional subtitle styling (optional ) |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "repository": {

diff --git a/src/icons/Icon.js b/src/icons/Icon.js
@@ -73,7 +73,10 @@ Icon.propTypes = {
   reverse: PropTypes.bool,
   raised: PropTypes.bool,
   containerStyle: PropTypes.object,
-  iconStyle: PropTypes.object,
+  iconStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array
+  ]),
   onPress: PropTypes.func,
   reverseColor: PropTypes.string
 }

diff --git a/src/list/ListItem.js b/src/list/ListItem.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import { View, StyleSheet, TouchableHighlight, Image, Platform } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import Icon from '../icons/Icon'
 import Text from '../text/Text'
 import colors from '../config/colors'
 import fonts from '../config/fonts'
@@ -9,7 +9,7 @@ let styles
 const ListItem = ({
   onPress,
   title,
-  icon,
+  leftIcon,
   rightIcon,
   avatar,
   avatarStyle,
@@ -39,12 +39,12 @@ const ListItem = ({
       style={[styles.container, containerStyle && containerStyle]}>
       <View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
         {
-          icon && icon.name && (
+          leftIcon && leftIcon.name && (
             <Icon
-              size={28}
-              style={[styles.icon, icon.style && icon.style]}
-              name={icon.name}
-              color={icon.color || colors.grey4}
+              type={leftIcon.type}
+              iconStyle={[styles.icon, leftIcon.style && leftIcon.style]}
+              name={leftIcon.name}
+              color={leftIcon.color || colors.grey4}
             />
           )
         }
@@ -64,14 +64,14 @@ const ListItem = ({
             style={[
               styles.title,
               titleStyle && titleStyle,
-              !icon && {marginLeft: 10},
+              !leftIcon && {marginLeft: 10},
               fontFamily && {fontFamily}
             ]}>{title}</Text>
           {subtitle && (
             <Text
               style={[
                 styles.subtitle,
-                !icon && {marginLeft: 10},
+                !leftIcon && {marginLeft: 10},
                 subtitleStyle && subtitleStyle,
                 fontFamily && {fontFamily}
               ]}>{subtitle}</Text>
@@ -81,6 +81,7 @@ const ListItem = ({
           onPress && !hideChevron && (
             <View style={styles.chevronContainer}>
               <Icon
+                type={rightIcon.type}
                 style={styles.chevron}
                 size={28}
                 name={rightIcon}
@@ -133,12 +134,11 @@ styles = StyleSheet.create({
     flexDirection: 'row'
   },
   icon: {
-    marginRight: 10
+    marginRight: 8
   },
   title: {
     fontSize: 15,
-    color: colors.grey1,
-    marginTop: -2
+    color: colors.grey1
   },
   subtitle: {
     color: colors.grey3,