bump to version 0.3.1

Readme.MD

@@ -65,6 +65,26 @@ import {
 ## Examples
 Check out the pre built and configured [React Native Hackathon Starter Project](https://github.com/dabit3/react-native-hackathon-starter) which uses all of these elements.
 
+## Notes
+
+#### Fonts
+React Native Elements uses Lato as the default font family for iOS and Roboto as the default font family for Android.
+
+[Here](https://github.com/dabit3/react-native-fonts) is a list of fonts available out of the box for each platform, or you can install and use a custom font of your own.
+
+> We are working on a way to make the font family configurable through the command line.
+
+To override in any element, simply provide a fontFamily prop:
+
+```
+<Button
+  raised
+  icon={{name: 'cached'}}
+  title='RAISED WITH ICON'
+  fontFamily='Comic Sans MS' />
+
+```
+
 # API
 
 
@@ -96,8 +116,9 @@ import { Button } from 'react-native-elements'
 | prop | default | type | description |
 | ---- | ---- | ----| ---- |
 | buttonStyle | none | object (style) | add additional styling for button component (optional) |
-| title | none | string | button title (required) | 
+| title | none | string | button title (required) |
 | small | false | boolean | makes button small |
+| fontFamily | Lato (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) | 
@@ -133,7 +154,7 @@ import { SocialIcon } from 'react-native-elements'
 
 | prop | default | type | description |
 | ---- | ---- | ----| ---- |
-| component | TouchableHighlight | React Native Component | type of button (optional)  |
+| title | none | string | title if made into a button (optional) |
 | type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon, github, github-alt, twitch, medium, soundcloud, gitlab, angellist, codepen) | social media type (required) |
 | raised | true | boolean | raised adds a drop shadow, set to false to remove |
 | button | false | boolean | creates button (optional) |
@@ -142,8 +163,9 @@ import { SocialIcon } from 'react-native-elements'
 | iconStyle | none | object (style) | extra styling for icon component (optional) |
 | style | none | object (style) | button styling (optional) |
 | iconColor | white | string | icon color (optional) |
-| title | none | string | title if made into a button (optional) |
-
+| component | TouchableHighlight | React Native Component | type of button (optional)  |
+| fontFamily | Lato-Black (iOS), Roboto-Black (android) | string | specify different font family |
+| fontStyle | none | object (style) | specify text styling |
 
 ## Lists
 
@@ -248,6 +270,7 @@ render () {
 | titleStyle | none | object (style) | additional title styling (optional) |
 | wrapperStyle | none | object (style) | additional wrapper styling (optional) |
 | underlayColor | white | string | define underlay color for TouchableHighlight (optional) |
+| fontFamily | Lato (iOS), Roboto (android) | string | specify different font family |
 
 
 ## SideMenu
@@ -370,6 +393,7 @@ import { CheckBox } from 'react-native-elements'
 | checkedColor | green | string | default checked color (optional) |
 | uncheckedColor | #bfbfbf | string | default unchecked color (optional) |
 | checkedTitle | none | string | specify a custom checked message (optional) |
+| fontFamily | Lato-Bold (iOS), Roboto-Bold (android) | string | specify different font family |
 
 ## Forms
 
@@ -398,6 +422,7 @@ import { FormLabel, FormInput } from 'react-native-elements'
 | ---- | ---- | ----| ---- |
 | containerStyle | none | object (style) | additional label container style (optional) |
 | labelStyle | none | object (style) | additional label styling (optional) |
+| fontFamily | Lato-Bold (iOS), Roboto-Bold (android) | string | specify different font family |
 
 
 ## Card
@@ -425,6 +450,7 @@ import { Card } from 'react-native-elements'
 | title | none | string | optional card title (optional) |
 | titleStyle | none | object (style) | additional title styling (if title provided) (optional) |
 | dividerStyle | none | object (style) | additional divider styling (if title provided) (optional) |
+| fontFamily | Lato-Bold (iOS), Roboto-Bold (android) | string | specify different font family |
 
 
 ## Pricing Component
@@ -455,8 +481,11 @@ import { PricingCard } from 'react-native-elements'
 | button | none | object {title, icon, buttonStyle} | button information (required) |
 | containerStyle | inherited styling | object (style) | outer component styling (optional) |
 | wrapperStyle | inherited styling | object (style) | inner wrapper component styling (optional) |
-
-
+| titleFont | Lato-Black (iOS), Roboto-Black (android) | string | specify title font family |
+| pricingFont | Lato-Bold (iOS), Roboto-Bold (android) | string | specify pricing font family |
+| infoFont | Lato-Bold (iOS), Roboto-Bold (android) | string | specify pricing information font family |
+| buttonFont | Lato (iOS), Roboto (android) | string | specify button font family |
+
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "React Native Elements & UI Toolkit",
   "main": "dist/index.js",
   "scripts": {

src/buttons/Button.js

@@ -10,7 +10,7 @@ const log = () => {
   console.log('please attach method to this component')
 }
 
-const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secondary3, primary1, primary2, primary3, backgroundColor, color, fontSize, underlayColor, raised, textStyle, small, iconRight}) => {
+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) {
     iconElement = (
@@ -41,10 +41,11 @@ const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secon
         <Text
           style={[
             styles.text,
-            textStyle && textStyle,
             color && {color},
             fontSize && {fontSize},
-            small && styles.smallFont
+            small && styles.smallFont,
+            textStyle && textStyle,
+            fontFamily && {fontFamily}
           ]}>
           {title}
         </Text>

src/checkbox/CheckBox.js

@@ -34,7 +34,7 @@ const getIconType = (type) => {
   }
 }
 
-const CheckBox = ({component, checked, iconRight, title, center, right, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle}) => {
+const CheckBox = ({component, checked, iconRight, title, center, right, containerStyle, textStyle, onPress, checkedIcon, uncheckedIcon, iconType, checkedColor, uncheckedColor, checkedTitle, fontFamily}) => {
   let Icon = FAIcon
   if (iconType) {
     Icon = getIconType(iconType)
@@ -66,7 +66,8 @@ const CheckBox = ({component, checked, iconRight, title, center, right, containe
         }
         <Text style={[
           styles.text,
-          textStyle && textStyle
+          textStyle && textStyle,
+          fontFamily && {fontFamily}
         ]}>
           {checked ? checkedTitle || title : title}
         </Text>

src/containers/Card.js

@@ -6,13 +6,17 @@ import Text from '../text/Text'
 import Divider from '../Divider'
 let styles = {}
 
-const Card = ({children, flexDirection, containerStyle, wrapperStyle, title, titleStyle, dividerStyle}) => (
+const Card = ({children, flexDirection, containerStyle, wrapperStyle, title, titleStyle, dividerStyle, fontFamily}) => (
   <View style={[styles.container, containerStyle && containerStyle]}>
     <View style={[styles.wrapper, wrapperStyle && wrapperStyle, flexDirection && {flexDirection}]}>
       {
         title && (
           <View>
-            <Text style={[styles.cardTitle, titleStyle && titleStyle]}>{title}</Text>
+            <Text style={[
+              styles.cardTitle,
+              titleStyle && titleStyle,
+              fontFamily && {fontFamily}
+            ]}>{title}</Text>
             <Divider style={[styles.divider, dividerStyle && dividerStyle]} />
           </View>
         )

src/form/FormLabel.js

@@ -6,9 +6,13 @@ import Text from '../text/Text'
 
 let styles = {}
 
-const FormLabel = ({containerStyle, labelStyle, children}) => (
+const FormLabel = ({containerStyle, labelStyle, children, fontFamily}) => (
   <View style={[styles.container, containerStyle && containerStyle]}>
-    <Text style={[styles.label, labelStyle && labelStyle]}>{children.toUpperCase()}</Text>
+    <Text style={[
+      styles.label,
+      labelStyle && labelStyle,
+      fontFamily && {fontFamily}
+    ]}>{children.toUpperCase()}</Text>
   </View>
 )
 

src/list/ListItem.js

@@ -22,7 +22,8 @@ const ListItem = ({
   hideChevron,
   chevronColor,
   roundAvatar,
-  component
+  component,
+  fontFamily
 }) => {
   let Component = onPress ? TouchableHighlight : View
   if (component) {
@@ -60,14 +61,16 @@ const ListItem = ({
             style={[
               styles.title,
               titleStyle && titleStyle,
-              !icon && {marginLeft: 10}
+              !icon && {marginLeft: 10},
+              fontFamily && {fontFamily}
             ]}>{title}</Text>
           {subtitle && (
             <Text
               style={[
                 styles.subtitle,
                 !icon && {marginLeft: 10},
-                subtitleStyle && subtitleStyle
+                subtitleStyle && subtitleStyle,
+                fontFamily && {fontFamily}
               ]}>{subtitle}</Text>
           )}
         </View>

src/pricing/PricingCard.js

@@ -6,19 +6,46 @@ import colors from '../config/colors'
 import Button from '../buttons/Button'
 let styles = {}
 
-const PricingCard = ({containerStyle, wrapperStyle, title, price, info, button, color}) => (
+const PricingCard = ({
+  containerStyle,
+  wrapperStyle,
+  title,
+  price,
+  info,
+  button,
+  color,
+  titleFont,
+  pricingFont,
+  infoFont,
+  buttonFont
+}) => (
   <View style={[styles.container, containerStyle && containerStyle]}>
     <View style={[styles.wrapper, wrapperStyle && wrapperStyle]}>
-      <Text style={[styles.pricingTitle, {color}]}>{title}</Text>
-      <Text style={styles.pricingPrice}>{price}</Text>
+      <Text style={[
+        styles.pricingTitle,
+        {color},
+        titleFont && {fontFamily: titleFont}
+      ]}>{title}</Text>
+      <Text style={[
+        styles.pricingPrice,
+        pricingFont && {fontFamily: pricingFont}
+      ]}>{price}</Text>
       {
         info.map((item, i) => {
-          return <Text key={i} style={styles.pricingInfo}>{item}</Text>
+          return <Text key={i} style={[
+            styles.pricingInfo,
+            infoFont && {fontFamily: infoFont}
+          ]}>{item}</Text>
         })
       }
       <Button
         icon={{name: button.icon}}
-        buttonStyle={[styles.button, button.buttonStyle, {backgroundColor: color}]}
+        buttonStyle={[
+          styles.button,
+          button.buttonStyle,
+          {backgroundColor: color},
+          buttonFont && {fontFamily: buttonFont}
+        ]}
         title={button.title} />
     </View>
   </View>

src/social/SocialIcon.js

@@ -29,7 +29,7 @@ const colors = {
   codepen: '#000000'
 }
 
-const SocialIcon = ({component, type, button, onPress, iconStyle, style, iconColor, title, raised, light}) => {
+const SocialIcon = ({component, type, button, onPress, iconStyle, style, iconColor, title, raised, light, fontFamily, fontStyle}) => {
   const Component = !onPress ? View : component || TouchableHighlight
   return (
     <Component
@@ -52,7 +52,13 @@ const SocialIcon = ({component, type, button, onPress, iconStyle, style, iconCol
           size={24} />
         {
           button && title && (
-            <Text style={[styles.title, light && {color: colors[type]}]}>{title}</Text>
+            <Text
+              style={[
+                styles.title,
+                light && {color: colors[type]},
+                fontFamily && {fontFamily},
+                fontStyle && fontStyle
+              ]}>{title}</Text>
           )
         }
       </View>

src/text/Text.js

@@ -4,7 +4,7 @@ import fonts from '../config/fonts'
 
 let styles = {}
 
-const TextElement = ({style, children, h1, h2, h3, h4}) => (
+const TextElement = ({style, children, h1, h2, h3, h4, h5, h6, fontFamily}) => (
   <Text
     style={[
       styles.text,
@@ -16,6 +16,7 @@ const TextElement = ({style, children, h1, h2, h3, h4}) => (
       h2 && styles.bold,
       h3 && styles.bold,
       h4 && styles.bold,
+      fontFamily && {fontFamily},
       style && style
     ]}>{children}</Text>
 )