fixed border-radius on avatar, added more configuration to button icons

Readme.MD

@@ -94,7 +94,7 @@ To override the fontFamily in any element, simply provide a fontFamily prop:
 
 
 ## Buttons
-Buttons take a title and an optional [material icon name](https://design.google.com/icons/), as well as the props below.
+Buttons take a title and an optional [material icon name](https://design.google.com/icons/), as well as the props below. You can override Material icons with one of the following: zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by passing in an icon.type as a prop. 
 
 ![Buttons](http://i.imgur.com/jeXZSMC.png)
 
@@ -115,6 +115,16 @@ import { Button } from 'react-native-elements'
   icon={{name: 'code'}}
   title='SMALL WITH RIGHT ICON' />
 
+<Button
+  small
+  icon={{name: 'envira', type: 'font-awesome'}}
+  title='SMALL WITH RIGHT ICON' />
+
+<Button
+  small
+  icon={{name: 'squirrel', type: 'octicon', style: {marginLeft: 20}}}
+  title='OCTICON' />
+
 ```
 
 #### Button props
@@ -127,7 +137,7 @@ import { Button } from 'react-native-elements'
 | fontFamily | System font (iOS), Roboto (android) | string | specify different font family |
 | iconRight | false | boolean | moves icon to right of title |
 | onPress | none | function | onPress method (required) |
-| icon | none | object {name(string), color(string), size(number)} | [Material Icon Name](https://design.google.com/icons/) (optional) | 
+| icon | {color: 'white'} | object {name: string, color: string, size: number, type: string (default is material, or choose one of zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | icon configuration (optional) | 
 | backgroundColor | #397af8 | string (color) | background color of button (optional) |
 | color | white | string(color) | font color (optional) |
 | textStyle | none | object (style) | text styling (optional)  |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "repository": {

src/buttons/Button.js

@@ -1,8 +1,9 @@
 import React, { PropTypes } from 'react'
 import { TouchableHighlight, StyleSheet, View, Platform } from 'react-native'
-import Icon from 'react-native-vector-icons/MaterialIcons'
 import colors from '../config/colors'
 import Text from '../text/Text'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import getIconType from '../helpers/getIconType'
 
 let styles = {}
 
@@ -13,8 +14,21 @@ const log = () => {
 const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secondary3, primary1, primary2, primary3, backgroundColor, color, fontSize, underlayColor, raised, textStyle, small, iconRight, fontFamily}) => {
   let iconElement
   if (icon) {
+    let Icon
+    if (!icon.type) {
+      Icon = MaterialIcon
+    } else {
+      Icon = getIconType(icon.type)
+    }
     iconElement = (
-      <Icon color={icon.color || 'white'} size={icon.size || small ? 18 : 26} style={iconRight ? styles.iconRight : styles.icon} name={icon.name} />
+      <Icon
+        color={icon.color || 'white'}
+        size={icon.size || small ? 18 : 26}
+        style={[
+          iconRight ? styles.iconRight : styles.icon,
+          icon.style && icon.style
+        ]}
+        name={icon.name} />
     )
   }
   return (
@@ -78,7 +92,7 @@ Button.propTypes = {
 
 styles = StyleSheet.create({
   button: {
-    padding: 20,
+    padding: 19,
     marginLeft: 15,
     marginRight: 15,
     backgroundColor: colors.primary,

src/checkbox/CheckBox.js

@@ -3,37 +3,11 @@ import { StyleSheet, TouchableOpacity, View, Platform } from 'react-native'
 import Text from '../text/Text'
 import fonts from '../config/fonts'
 import colors from '../config/colors'
-
 import FAIcon from 'react-native-vector-icons/FontAwesome'
-import ZocialIcon from 'react-native-vector-icons/Zocial'
-import OcticonIcon from 'react-native-vector-icons/Octicons'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import Ionicon from 'react-native-vector-icons/Ionicons'
-import FoundationIcon from 'react-native-vector-icons/Foundation'
-import EvilIcon from 'react-native-vector-icons/EvilIcons'
-import EntypoIcon from 'react-native-vector-icons/Entypo'
+import getIconType from '../helpers/getIconType'
 
 let styles = {}
 
-const getIconType = (type) => {
-  switch (type) {
-    case 'zocial':
-      return ZocialIcon
-    case 'octicon':
-      return OcticonIcon
-    case 'material':
-      return MaterialIcon
-    case 'ionicon':
-      return Ionicon
-    case 'foundation':
-      return FoundationIcon
-    case 'evilicon':
-      return EvilIcon
-    case 'entypo':
-      return EntypoIcon
-  }
-}
-
 const CheckBox = ({component, checked, iconRight, title, center, right, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle, fontFamily}) => {
   let Icon = FAIcon
   if (iconType) {

src/helpers/getIconType.js

@@ -0,0 +1,31 @@
+import ZocialIcon from 'react-native-vector-icons/Zocial'
+import OcticonIcon from 'react-native-vector-icons/Octicons'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import Ionicon from 'react-native-vector-icons/Ionicons'
+import FoundationIcon from 'react-native-vector-icons/Foundation'
+import EvilIcon from 'react-native-vector-icons/EvilIcons'
+import EntypoIcon from 'react-native-vector-icons/Entypo'
+import FAIcon from 'react-native-vector-icons/FontAwesome'
+
+export default (type) => {
+  switch (type) {
+    case 'zocial':
+      return ZocialIcon
+    case 'octicon':
+      return OcticonIcon
+    case 'material':
+      return MaterialIcon
+    case 'ionicon':
+      return Ionicon
+    case 'foundation':
+      return FoundationIcon
+    case 'evilicon':
+      return EvilIcon
+    case 'entypo':
+      return EntypoIcon
+    case 'font-awesome':
+      return FAIcon
+    default:
+      return MaterialIcon
+  }
+}

src/list/ListItem.js

@@ -50,7 +50,7 @@ const ListItem = ({
             <Image
               style={[
                 styles.avatar,
-                roundAvatar && {borderRadius: 15},
+                roundAvatar && {borderRadius: 17},
                 avatarStyle && avatarStyle]}
               source={{uri: avatar}}
               />